asp.net mvc Render a 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 the user Selects a Service in the combobox I want to the call a partial view with the service Id number:

How can I do this?

Here is a action method which will render the partialView

//
// 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 which 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 make use $.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);                 
            }
         });           
     });

Also you should return partial view instead of 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 this:

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

Any then use javascript(ajax) to load contents for an element of the DOM:

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