Render Partial View with webgrid in Modal Popup in MVC4

Description:-

In this example I explain that how to render a partial view with webgrid in modal popup or load partial view with webgrid in modal popup using jquery in Asp .Net MVC. You can use this partial view in many forms as you wish. First we understand the actual use of partial view

What is Partial View:

If you want to reuse a razor view in your web application or project, then you can prefer the partial view concept. Partial view is same like a regular view with a file extension .cshtml. We can use partial views in a situation where we need a header, footer reused for an MVC web application. We can say that it's like a user control concept in ASP.NET.

In this example we render the webgrid in modal popup when user click on showlist button. Here partial view contain the webgrid with Field itemname and prize that we have to display in grid format in modal popup.

to show example of WCF service for insert,update,delete CRUD operation using WCF service

check the Extention of file when upload upload only image or word file

here is below step to how to render partial view with webgrid in dynamic modal popup.

Step1: Create Controller

Create controller and add view to Index method. Add a method "ProductPartial" which will return webgrid PartialView as below

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using Popup.Models;

namespace Popup.Controllers

{

    public class PopupController : Controller

    {

        public ActionResult Index()

        {

            return View();

        }

        public ActionResult ProductPartial()

        {

            List<Product> model = Product.getProduct();

            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<Popup.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 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";

}

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