Hi everyone in this blog I’m explaining about load partial view using JQuery Ajax.

Description:

In this article, we'll discuss partial views in ASP.NET MVC and loading them via jQuery AJAX. There could be several scenarios for this. Let's assume that we have a page that contains multiple partial views and data from various sources. So we can load each partial view using AJAX individually, it will improve the user experience because the components that can be loaded earlier won't be delayed until all the components load. As soon as each control loads, they will be available to the user on the screen.

I have used ASP.NET MVC3 for this article but it does not matter whether you use MVC3 or MVC4 or MVC5. I have created a main View (called here HomePage.cshtml) and created two Partial Views (_ProductDetails.cstml and _UserDetails.cshtml) that will be displayed. So I'll show you how easily we can load these controls viaAjax. It will make the page more intuitive and seamless to users.
I am showing simple data in these controls and one control display the details of the users and other control displays product details. For this, I have created two models, User, and Product.

Also, I have created two methods GetUserDetails and GetProductDetails in Home Controller. GetUserDetails returns a list of users and GetProductDetails returns a list of products.

While we can load each control easily via jQuery AJAX. For this jQuery must be included in the on the View. By default, it is included in the __Layout.cshtml. It works as a master layout of the page but if you are not using it in your View then include the jQuery file specifically. So my HomePage.cshtml looks like:

HomeController.cs:

publicclassHomeController : Controller
    {
        //
        // GET: /Home/
 
        MyDBEntities db = newMyDBEntities();
 
        publicActionResult Index()
        {
            return View();
        }
 
        publicActionResult GetUserDetails()
        {
            return PartialView(db.UserDetails.ToList());
        }
        publicActionResult GetProductDetails()
        {
            return PartialView(db.ProductDetails.ToList());
        }
    }

Index.cshtml:

<divclass="container">
    <divclass="row form-group"id="userdetails">
 
    </div>
    <divclass="row form-group"id="productdetails">
 
    </div>
</div>

<script>
    $(document).ready(function () {
        $.ajax({
            url: '/Home/GetUserDetails',
            contentType: 'application/html; charset=utf-8',
            type: 'GET',
            dataType: "html",
        })
        .success(function(result){
            $('#userdetails').html(result);
        })
        .error(function (xhr, status) {
            alert(status);
        })
 
 
        $.ajax({
            url: '/Home/GetProductDetails',
            contentType: 'application/html; charset=utf-8',
            type: 'GET',
            dataType: "html",
        })
        .success(function (result) {
            $('#productdetails').html(result);
        })
        .error(function (xhr, status) {
            alert(status);
        })
    });
</script>

So here you can see each control is loaded individually. For each control, I have defined a method in Controller and that method is called via Ajax. When the result is returned from the ajax call successfully then that success event is fired. Here I am setting the returned HTML in a div and displaying it.
Also here we can easily pass the parameter to the controller methods if we want, via URL itself. Twopartial Views 

GetUserDetails Partial View:

@model List<LoadPartial.Models.UserDetail>
 
<divclass="col-md-12">
    <divclass="table-responsive">
        <tableclass="table table-bordered table-striped">
            <thead>
                <tr>
                    <th>User ID</th>
                    <th>User Name</th>
                    <th>City</th>
                    <th>Phone</th>
                    <th>Zip Code</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model)
                {
                    <tr>
 
                        <td>@item.UserId</td>
                        <td>@item.Name</td>
                        <td>@item.City</td>
                        <td>@item.Phone</td>
                        <td>@item.Zip</td>
 
                    </tr>
                }
            </tbody>
        </table>
    </div>
</div>

GetProductDetails Partial View:

@model List<LoadPartial.Models.ProductDetail>
 
<divclass="col-md-12">
    <divclass="table-responsive">
        <tableclass="table table-bordered table-striped">
            <thead>
                <tr>
                    <th>Product ID</th>
                    <th>Product Name</th>
                    <th>Product Quantity</th>
                    <th>Price</th>
                    <th>Emi Code</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model)
                {
                    <tr>
 
                        <td>@item.ProductId</td>
                        <td>@item.Name</td>
                        <td>@item.Quantity</td>
                        <td>@item.Price</td>
                        <td>@item.EmiCode</td>
 
                    </tr>
                }
            </tbody>
        </table>
    </div>
</div>

Now when the page loads it fires two Ajax calls fired individually and when the result is returned then the control is displayed.

Output:

in my next post, i'll explain about Laptop is dead. How to troubleshoot