Home > DeveloperSection > Blogs > Render Partial Views in ASP.NET MVC Using Ajax

Render Partial Views in ASP.NET MVC Using Ajax


AJAX AJAX  View  Ajax.net 
Ratings:
0 Comment(s)
 1112  View(s)
Rate this:

Render Partial Views in ASP.NET MVC Using Ajax

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

public class HomeController : Controller

    {

        //

        // GET: /Home/

 

        MyDBEntities db = new MyDBEntities();

 

        public ActionResult Index()

        {

            return View();

        }

 

        public ActionResult GetUserDetails()

        {

            return PartialView(db.UserDetails.ToList());

        }

        public ActionResult GetProductDetails()

        {

            return PartialView(db.ProductDetails.ToList());

        }

    }

Index.cshtml:

<div class="container">

    <div class="row form-group" id="userdetails">

 

    </div>

    <div class="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. Two
partial Views 

GetUserDetails Partial View:

@model List<LoadPartial.Models.UserDetail>

 

<div class="col-md-12">

    <div class="table-responsive">

        <table class="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>

 

<div class="col-md-12">

    <div class="table-responsive">

        <table class="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


Don't want to miss updates? Please click the below button!

Follow MindStick