Render Partial View (webgrid) Using jQuery in ASP.NET MVC

Render Partial View (webgrid) Using jQuery in ASP.NET MVC

This article will show you how to render partial view using jQuery in ASP.NET MVC.

Approach : We want to load a partial view using jQuery on pageload, Partial view contain list of product.

Step 1: Create controller
Create controller and add view to Index method. Add a method “ProductPartial” which will return PartialView as below

namespace Sample.Controllers
{
    public class RenderPartial_jQueryController : Controller
    {
        private StoreContext db = new StoreContext();

        public ActionResult Index()
        {
            return View();
        }

        public ActionResult ProductPartial()
        {
            List<Product> model = db.Products.ToList();
            return PartialView("_ProductPartial", model);
        }
    }
}

Step 2: Create Partial view
Create partial view _ProductPartial.cshtml add grid on this page with model as below

@model List<Sample.Models.Product>

<div id="gridContent"  style=" padding:20px; " class="datagrid">
@{
    var grid = new WebGrid(Model, defaultSort: "Name", rowsPerPage: 10, ajaxUpdateContainerId: "gridContent");
}

@grid.GetHtml(tableStyle: "table",mode: WebGridPagerModes.All,
    columns:
    grid.Columns(
        grid.Column("Name", format: @<text>@Html.ActionLink((string)item.Name, "Details", "Product", new { id = item.ID }, null)</text>),
        grid.Column("Price", header: "Product Price", format: @<text> @item.Price.ToString("0.00")</text> ,style: "price" ))
        )
</div>

Step 3: Index page
On Index page in $(document).ready(function()); call partial view as below, you can call partial view on button click also.

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

 <script type="text/javascript" >
     $(document).ready(function() {
         $.get("@Url.Action("ProductPartial", "RenderPartial_jQuery")", function (data) {
             $('#divProduct').replaceWith(data);
         });
     });
  </script>

 <div id="divProduct"  ></div>

Note : we have added model (@model List) in partial view.

Render Partial View (webgrid) Using jQuery in ASP.NET MVC

Render Partial View (webgrid) Using jQuery in ASP.NET MVC

Advertisements
This entry was posted in ASP.NET MVC Web Grid, jQuery, MVC and tagged , , . Bookmark the permalink.

7 Responses to Render Partial View (webgrid) Using jQuery in ASP.NET MVC

  1. chhabraankur says:

    But after this paging not worked in Web grid .because the url is changed in that paging from main to partial view.
    pls give solution to that.

  2. chhabraankur says:

    Thanks for reply.

  3. Have you ever considered about including a little bit more than just
    your articles? I mean, what you say is valuable and all.
    However think about if you added some great pictures or videos to give your posts
    more, “pop”! Your content is excellent but with pics and video clips, this site could definitely be one
    of the best in its niche. Good blog!

  4. Hello to all, it’s genuinely a nice for me to go to see this site, it contains precious Information.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s