Dynamically load Partial Views

Question

How can i dynamically load a Partial View?

I mean I have this view, lets say ListProducts, there I select some dropdownlists with products, etc, and with the selected values from those I wanna fill a partial view, which would be in a div that was invisible but after onchange() event would become visible and with the data from the specific selected items.

Answer 1

Use jQuery's $.load() with a controller action that returns a partial view.
For example:

HTML

<script type="text/javascript"> $(document).ready(function() {     $("#yourselect").onchange(function()     {         // Home is your controller, Index is your action name         $("#yourdiv").load("@Url.Action("Index","Home")", { 'id' : '123' },                                          function (response, status, xhr)         {             if (status == "error")             {                 alert("An error occurred while loading the results.");             }         });     }); }); </script>  <div id="yourdiv"> </div> 

Controller

public virtual ActionResult Index(string id) {     var myModel = GetSomeData();     return Partial(myModel); } 

View

@model IEnumerable<YourObjects>  @if (Model == null || Model.Count() == 0) {     <p>No results found</p> } else {     <ul>     @foreach (YourObjects myobject in Model)     {         <li>@myObject.Name</li>     }     </ul> }