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

You can use ajax to call action an then just insert html string using jQuery to the page where you want it to appear:

Server-side:

Render partial view to string Renders partial view on server to html string, useful when you need to add partial view to ASP.NET MVC page via AJAX.

Client-side:

$('#yourDdl').change(function()
{
  $.get('/InsertPartialViewUsingAjax', function (data) 
  {
     $('#container').html(data);
  });
});

Answer 2

The following article tells you how to do it with minimum javascript. Basically you return html instead of JSON to your response object.

https://www.simple-talk.com/content/article.aspx?article=2118

Answer 3

Use Ajax :)

http://api.jquery.com/jQuery.ajax/

Example:

$.post(window.gRootPath + "Customer/PartialView", { Question: questionId})
.done(function (data) {
    $('#partialDiv').html(data.responceText);
});

Answer 4

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>
}

Answer 5

I believe you can do something like this example, just using the change event on your dropdown instead. It's a simple jQuery call, you can find more on the jQuery website.

$("#dropdown").change(function() {

    $("#destination").load("/Products/GetProduct", $(this).val(),
       function(result) {
         // do what you need to do

       });
});

The first parameter is the view you need to call for the details.

The second parameter is the selected value.

The third parameter of the $.load function is the callback function, where you can parse the result and do what you need to do.

If you have a multiple select $(this).val() that will give you an array with the selected options.

If you want only return a Json object you may want to follow this example.

Answer 6

You can do this by following these steps. In your controller, you return a partial view.

    [HttpGet]
    public virtual ActionResult LoadPartialViewDynamically()
    {
        var query = _repository.GetQuery();
        return PartialView("_PartialViewName", query);
    }

then in the view you have an empty div

<div id="partialgoeshere"></div>

and then load the partial view using jQuery:

function LoadPartialView() {

    $.get("@Url.Action(MVC.ControllerName.LoadPartialViewDynamically())", { null }, function (data) {

        $("#partialgoeshere").empty();
        $("#partialgoeshere").html(data);

    });

}

Hope this helps