Render partial View (Webgrid) in model popup using jQuery in ASP.NET MVC

How to load partial view in model popup MVC

This article will show you how to render a partial view with webgrid in jQuery model popup. Also you can use same partial view with grid on different pages only you have to work on paths.

Model Popup

Model Popup

Approach: We have to load webgrid in model popup on button click, where webgrid is in partial view.

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

    public class PopupController : 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 partial view 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>))
        )

</div>

Step 3: Index page
On Index page add button “Show Product” and in onclick event open a dialog which will show a list of product. Here you can configure the structure of dialog (height, width, title)


@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/PopupLayout.cshtml";
}

 <script type="text/javascript" >
     $(function () {
        $('#dialog').dialog({
            autoOpen: false,
            width: 400,
            height:500,
            resizable: false,
            title: 'Product',
            modal: true,
            open: function(event, ui) {
                $(this).load("@Url.Action("ProductPartial", "Popup")");
            },
            buttons: {
                "Close": function () {
                    $(this).dialog("close");
                }
            }
        });
         $("#opener").click(function () {
             $("#dialog").dialog("open");
         });
     });
  </script>
<h2> Index</h2>
 
<div id="dialog" title="Basic dialog" >Please wait</div>
<button id="opener">Show Product</button>

Download complete source code

Render partial View (Webgrid) in model popup using jQuery in ASP.NET MVC

Render partial View (Webgrid) in model popup using jQuery in ASP.NET MVC

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

3 Responses to Render partial View (Webgrid) in model popup using jQuery in ASP.NET MVC

  1. aay says:

    can you share code … since your code does not works

  2. Badhon says:

    Thanks buddy, nice article. It helped me to set up the pop up window.

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