Asp.net mvc Render Partial View with Java Script

Question

I want to make a Partial view that displays data in a table.

I will have a Select element with the services to choose from.

When a user selects a service in the combo box, I want the call to be a partial view with the service identifier number:

How can i do this?

Here is an action method that will display a partial view

// // GET: /Service/ServiceStatusLogs/1 public ActionResult ServiceStatusLogs(int id) { var db = new EFServiceStatusHistoryRepository(); IList<ServiceStatusHistory> logs = db.GetAllStatusLogs(id); return View("_ServiceStatusLogs", logs); } 

Here is the main action method that returns the page:

 // // GET: /Services/Status public ActionResult Status() { IList<Service> services; using (var db = new EFServiceRepository()) { services = db.GetAll(); } return View(services); } 

Answer 1

You can use the $ .ajax functionality to achieve, check this: -

  //Combo box change event $("#comboboxName").change(function () { //Get service Id var serviceId = $("#comboboxName").val(); //Do ajax call $.ajax({ type: 'GET', url: "@Url.Content("/Service/ServiceStatusLogs/")", data : { Id:serviceId //Data need to pass as parameter }, dataType: 'html', //dataType - html success:function(result) { //Create a Div around the Partial View and fill the result $('#partialViewContainerDiv').html(result); } }); }); 

You should also return a partial view instead of a view

 // // GET: /Service/ServiceStatusLogs/1 public ActionResult ServiceStatusLogs(int id) { var db = new EFServiceStatusHistoryRepository(); IList<ServiceStatusHistory> logs = db.GetAllStatusLogs(id); return PartialView("_ServiceStatusLogs", logs); } 

Answer 2

Try the following:

 public ActionResult ServiceStatusLogs( int id ) { //Prepare your model return PartialView( "UserDetails", model ); } 

In any case, use javascript (ajax) to load the content for the DOM element:

 $('#user_content').load('/Service/ServiceStatusLogs');