Load partial view depending on dropdown selection in MVC3

Question

Im trying to create a from using asp.net mvc3.

I have a dropdownlist with some options. What i want is different partial views to be injected into the page, dependi

Answer 1

Let's say following is your view that you want to insert your partial.

    
    
        
        ....

        
        
 
    

On the change event of your dropdownlist, get partial via jquery ajax call and load it to place holder.

/* This is change event for your dropdownlist */
$('#myDropDown').change( function() {

     /* Get the selected value of dropdownlist */
     var selectedID = $(this).val();

     /* Request the partial view with .get request. */
     $.get('/Controller/MyAction/' + selectedID , function(data) {

         /* data is the pure html returned from action method, load it to your page */
         $('#partialPlaceHolder').html(data);
         /* little fade in effect */
         $('#partialPlaceHolder').fadeIn('fast');
     });

});

And in your controller action which is /Controller/MyActionin above jquery, return your partial view.

//
// GET: /Controller/MyAction/{id}

public ActionResult MyAction(int id)
{
   var partialViewModel = new PartialViewModel();
   // TODO: Populate the model (viewmodel) here using the id

   return PartialView("_MyPartial", partialViewModel );
}