jQuery – load partial view by request

We have used partial view on the cshtml page directly and with the model also. Also, we can return this partial view from server side and then show in our html at run time. When returning a partial view, we can pass a simple string or a complete model to be bind with that partial view.

For simple HTML we can use this partial view on the page itself, but if we are receiving partial view from server side then in most cases, we use with it model binding. Like we want employee details section on the page by that employee id. Create a partial view ‘_employeeDetailView’ in the Views->Home folder and paste below html code:

@model WebModules.Models.PersonDetailModel
<div>
    <div class="row">
        <div class="col-md-6">Name:</div>
        <div class="col-md-6">@Model.name</div>
    </div>
    <div class="row">
        <div class="col-md-6">Age:</div>
        <div class="col-md-6">@Model.age</div>
    </div>
    <div class="row">
        <div class="col-md-6">City:</div>
        <div class="col-md-6">@Model.city</div>
    </div>
    <div class="row">
        <div class="col-md-6">Job:</div>
        <div class="col-md-6">@Model.job</div>
    </div>
</div>

Now create an action method that will work as API method to return a partial view with person details. On the page, create a button and a div element after that button. Write a button click event and call above API by get/post request and assign returned partial view’s html to our div element.

//action method
public IActionResult GetEmployeeDetails(int id)
    {
        //get data from database
        var personModel = lstPersons.First(a => a.id == id);
        return PartialView("_employeeDetailView", personModel);
    }
// button click event
$('#btnShowDetails').click(function () {
    $.get('/Home/GetEmployeeDetails',{ id : 1 }, function (data) {
        $('#divEmployeeDetails').html(data);
    });
})

This partial view can be a collection of loops or any type of section that you want to split out from our main page. On the same button click event we can load all employee details and set the html. For that change the partial view and our action method a little bit and it will work.

//action method with static list of persons
public IActionResult GetEmployeeDetails()
    {
        var lstPersons = new List<PersonDetailModel>();
        lstPersons.Add(new PersonDetailModel() { id = 1, name = "Rahul", age = 30, city = "Melbourne", job = "Marketing" });
        lstPersons.Add(new PersonDetailModel() { id = 2, name = "Ramesh", age = 28, city = "London", job = "IT" });
        lstPersons.Add(new PersonDetailModel() { id = 3, name = "Rohit", age = 31, city = "Cambridge", job = "Hospital" });
        lstPersons.Add(new PersonDetailModel() { id = 4, name = "Rajat", age = 30, city = "California", job = "Accounts" });
        return PartialView("_employeeDetailView", lstPersons);
    }

Have a foreach loop in partial view to display all the four employees and also change the type of model to a list. Look out first line in below html. On the click event of button just remove id parameter because we don’t need that in the request. If we don’t remove it will also work but on the server side, we will not get that as input.

@model List<WebModules.Models.PersonDetailModel>

@foreach (var person in Model)
{
    <div>
        <div class="row">
            <div class="col-md-6">Name:</div>
            <div class="col-md-6">@person.name</div>
        </div>
        <div class="row">
            <div class="col-md-6">Age:</div>
            <div class="col-md-6">@person.age</div>
        </div>
        <div class="row">
            <div class="col-md-6">City:</div>
            <div class="col-md-6">@person.city</div>
        </div>
        <div class="row">
            <div class="col-md-6">Job:</div>
            <div class="col-md-6">@person.job</div>
        </div>
    </div>
}

Partial view as bootstrap modal

We can show the partial view on the bootstrap modal and show that modal. Change the partial view’s html as bootstrap’s modal html and paste our previous loop into modal’s body. The model type of our partial view will not change, it will be a list as above.

<div class="modal" tabindex="-1" role="dialog" id="modalEmployeeDetails">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                //our previous html loop
            </div>
            <div class="modal-footer">                
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Everything will work but modal will not open because we haven’t shown that in jQuery code. After our request we are assigning that partial view on the div so just show that model after that:

$('#modalEmployeeDetails').modal('show');
// selector is the id of our model, see above

The modal will show now as shown in below screenshot. So we have learned about partial view and loading that partial view on bootstrap modal.