Load partial view using jQuery Ajax in ASP.NET MVC

public ActionResult Index()
        {
            StudentsEntities entities = new StudentsEntities();
            return View(from students in entities.StudentTables.Take(10)
                        select students);
        }

        [HttpPost]
        public ActionResult Details(int studentId)
        {
            StudentsEntities entities = new StudentsEntities();
            return PartialView("Details", entities.StudentTables.Find(studentId));
        }

In the above code, using Index ActionMethod we are fetching all the list of students, while using Details ActionMethod, we are selecting specific student and passing it to PartialView

Now in you Index view, use the code below to show all students

@model IEnumerable<LoadPartialViewUsingjQueryAjax.Models.StudentTable>
@{
    ViewBag.Title = "Home Page";
}

<h4>Students</h4>
<hr />
<table class="table table-bordered" id="StudentGrid">
    <tr>
        <th>Id</th>
        <th>Student Name</th>
        <th>Class</th>
        <th>Subject</th>
        <th></th>
    </tr>
    @foreach (var student in Model)
    {
        <tr>
            <td>@student.Id</td>
            <td>@student.Name</td>
            <td>@student.StudentClass</td>
            <td>@student.Subjects</td>
            <td><a class="btn btn-primary details" href="javascript:void(0)" >View</a></td>
        </tr>
    }
</table>

<!--Bootstrap Pop Up modal-->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Student details</h4>
            </div>
            <div class="modal-body" id="ModalBody">
               
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>
<!--End of Bootstrap Pop-Up modal-->

As discussed earlier we will be showing PartialView data in Bootstrap Pop-up modal, so I have it's HTML code also but wit empty modal-body.

Now to load the Partial View using jQuery ajax & show it in modal pop-up, here is the jQuery code for it

$(function () {
            
          
            $("#StudentGrid .details").click(function () {
                //get student id of row clicked
                var studentId = $(this).closest("tr").find("td").eq(0).html();
                $.ajax({
                    type: "POST", //Method type
                    url: "/Home/Details", //url to load partial view
                    data: '{studentId: "' + studentId + '" }', //send student id
                    contentType: "application/json; charset=utf-8",
                    dataType: "html",
                    success: function (response) {
                        $('#ModalBody').html(response);
                        $('#myModal').modal('show');
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    },
                    error: function (response) {
                        alert(response.responseText);
                    }
                });
            });
        });

I have explained few lines of javascript code using comments, so complete Index View code will be as below:

@model IEnumerable<LoadPartialViewUsingjQueryAjax.Models.StudentTable>
@{
    ViewBag.Title = "Home Page";
}

<h4>Students</h4>
<hr />
<table class="table table-bordered" id="StudentGrid">
    <tr>
        <th>Id</th>
        <th>Student Name</th>
        <th>Class</th>
        <th>Subject</th>
        <th></th>
    </tr>
    @foreach (var student in Model)
    {
        <tr>
            <td>@student.Id</td>
            <td>@student.Name</td>
            <td>@student.StudentClass</td>
            <td>@student.Subjects</td>
            <td><a class="btn btn-primary details" href="javascript:void(0)" >View</a></td>
        </tr>
    }
</table>

<!--Bootstrap Pop Up modal-->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Student details</h4>
            </div>
            <div class="modal-body" id="ModalBody">
               
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>
<!--End of Bootstrap Pop-Up modal-->


@section scripts{
<script type="text/javascript">
    $(function () {
            
          
            $("#StudentGrid .details").click(function () {
                //get student id of row clicked
                var studentId = $(this).closest("tr").find("td").eq(0).html();
                $.ajax({
                    type: "POST", //Method type
                    url: "/Home/Details", //url to load partial view
                    data: '{studentId: "' + studentId + '" }', //send student id
                    contentType: "application/json; charset=utf-8",
                    dataType: "html",
                    success: function (response) {
                        $('#ModalBody').html(response);
                        $('#myModal').modal('show');
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    },
                    error: function (response) {
                        alert(response.responseText);
                    }
                });
            });
        });
</script>
}

Step 5: Now in this step, we will create Partial View for Details ActionMethod, so go to HomeController, right click on Details View and click on "Add View"

In the generated partial View, we will Show Student name, Class, Subject using HTML

@model LoadPartialViewUsingjQueryAjax.Models.StudentTable


<div class="row">
    <div class="col-lg-2"><label>Name</label></div>
    <div class="col-lg-10">@Model.Name</div>
</div>

<div class="row">
    <div class="col-lg-2"><label>Class</label></div>
    <div class="col-lg-10">@Model.StudentClass</div>
</div>

<div class="row">
    <div class="col-lg-2"><label>Subjects</label></div>
    <div class="col-lg-10">@Model.Subjects</div>
</div>

Step 6: This is final step, build your project and run it in browser, you will get the below output

If you will click on "View" button of any row, jQuery code will call Details ActionMethod using AJAX which returns us the HTML of Partial View, on success of Ajax, we are appending that HTML string in the Modal Pop-up body and opening/showing it.

 That's it, we have successfully loaded the partial view in Bootstrap pop-up modal using jQuery Ajax.

Here is the Google drive link to the complete Source code available to download https://drive.google.com/file/d/1KJpAV8E21oeo_2N1E8hVQd3epz8C3iVY/view?usp=sharing

Note: Above link doesn't include database file, so you can copy script from the article's Step 2 or modify code according to your database tables.

Feel free to ask questions, related to this article in questions section, by linking it or comment below in comment's section.