Email: Password:       Forgot Password 
    .netCodeSG
A Saarsha Group Online Community for dot net codes group like C#, Asp.NET, VB.NET, Sharepoint, JavaScript, JQuery, Ajax, SQL, WCF, WPF.
 
TECHNOLOGIES:
 

Render Partial View As Modal Popup Using AJAX call with JSON

Article:
Viewed:  2573 
Posted On:  4/16/2016 3:45:02 AM 
In ASP.NET MVC how we can render Partial View As Modal Popup Using AJAX call with JSON? 

 In this article I am going to show how we can render a partial view in a modal popup with AJAX call. Here in Partial View I will show record from my data base table using web grid.

Open Visual Studio-> New -> Project

1.png

Image 1.

2.png

Image 2.

Below is my Data Table.

3.png

Image 3.

Data in my Data Table.

4.png

Image 4.

Now Right Click on Project Solution Explorer -> Add -> ADO.NET Entity Data Model.

5.png

Image 5.

6.png

Image 6.

7.png

Image 7.

8.png

Image 8.

9.png

Image 9.

10.png

Image 10.

11.png

Image 11.

Now time to add a new controller.

12.png

Image 12.

13.png

Image 13.

14.png

Image 14.

Add a View here.

15.png

Image 15.

16.png

Image 16.

Add below code to your Index.cshtml

@{
    ViewBag.Title = "Render Partial View As Modal Popup Using AJAX call with JSON";
    Layout = "~/Views/Shared/_Layout.cshtml";
 
}@section scripts
{
    <script>
        var ajaxCallURL = '/Employee/EmployeePartial';
        $(function () {
            $(".getAllEMP").click(function () {
                var $buttonClicked = $(this);
                var options = { "backdrop": "static", keyboard: true };
                $.ajax({
                    type: "GET",
                    url: ajaxCallURL,
                    contentType: "application/json; charset=utf-8",
                    datatype: "json",
                    success: function (data) {                       
                        $('#myModalContent').html(data);
                        $('#myModal').modal(options);
                        $('#myModal').modal('show');
                    },
                    error: function () {
                        alert("Content load failed.");
                    }
                });
            });
            $("#closbtn").click(function () {                
                $('#myModal').modal('hide');
            });
        });
    </script>
}
<table style="background-color:orange; width:100%; border:solid 5px green; padding:20px;">
  
    <tr>
        <td align="center" style="padding:20px;">
            <a href="javascript:void(0);" class="getAllEMP" style="font-size:20pt;">Get All Employee Inforamtion</a>
        </td>
    </tr>
</table>

<div id='myModal' class='modal' style="text-align:right; ">
    <div class="modal-dialog" style="width:900px; height:400px; padding:10px;">
        <div class="modal-content" style="overflow: auto; padding:10px; background-color:#d2f5f4;">
            <button type="button" id="closbtn">x</button>
            <div style="height:10px;"></div>
            <div id='myModalContent' style="width:850px; height:400px; padding:10px;"></div>
        </div>
    </div>
</div>
 

 

Now Add below code to your EmployeeController

17.png

Image 17.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
 
namespace MVC_WebGrid_PartialView_ModalPopup.Controllers
{
    public class EmployeeController : Controller
    {
        CompanyDBEntities db = new CompanyDBEntities();
 
        // GET: Employee
        public ActionResult Index()
        {
           return View();
        }
 
        public ActionResult EmployeePartial()
        {
            List<Emp_Information> model = db.Emp_Information.ToList();
            return PartialView("_EmpPartial", model);
        }
    }
}

Now Add a partial view inside Views-> Employee Folder

18.png

Image 18.

In this _EmpPartial.cshtml do below code:

@model List<MVC_WebGrid_PartialView_ModalPopup.Emp_Information>
@{
    //var grid = new WebGrid(Model, defaultSort: "Name", rowsPerPage: 10, ajaxUpdateContainerId: "gridContent");
    var grid = new WebGrid(source: Model, canPage: true, rowsPerPage: 10, ajaxUpdateContainerId: "gridContent");
    grid.Pager(WebGridPagerModes.All);
}
<style type="text/css">
    .webgrid-table {
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 1.2em;
        width: 100%;
        display: table;
        border-collapse: separate;
        border: solid 1px #ff6a00;
        background-color: white;
    }
 
        .webgrid-table td, th {
            border: 1px solid #ff6a00;
            padding: 3px 7px 2px;
            text-align:left;
        }
 
    .webgrid-header {
        background-color: #ff6a00;
        color: #ffffff;
        padding-bottom: 4px;
        padding-top: 5px;
        text-align: left;
    }
 
    .webgrid-footer {
    }
 
    .webgrid-row-style {
        padding: 3px 7px 2px;
    }
 
    .webgrid-alternating-row {
        background-color: #00ffff;
        padding: 3px 7px 2px;
    }
</style>
<div id="gridContent">
    @grid.GetHtml(
                tableStyle: "webgrid-table",
                headerStyle: "webgrid-header",
                footerStyle: "webgrid-footer",
                alternatingRowStyle: "webgrid-alternating-row",
                rowStyle: "webgrid-row-style",
                columns: grid.Columns(
                    grid.Column(header: "No.", format: @<text><div>@(item.WebGrid.Rows.IndexOf(item) + 1)</div></text>),
                                                                    grid.Column(columnName: "EMP_ID", header: "EMPLOYEE ID"),
                                            grid.Column(header: "Name", format: @<text><a href="#">@item.Name</a></text>),
    grid.Column(columnName: "ManagerName", header: "ManagerName"),
    grid.Column(columnName: "ProjectName", header: "ProjectName"),
    grid.Column(columnName: "City", header: "City"
))
</div>

 

In Route.config set startup controller and action method like below:

19.png

Image 19.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;
 
namespace MVC_WebGrid_PartialView_ModalPopup
{
    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
 
            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Employee",
                    action = "Index", id = UrlParameter.Optional }
            );
        }
    }
}
 
Now Run your Application:

20.png

Image 20.

21.png

Image 21.

  Comment:
         HOME   |   Submit Article   |   Contact Us   |   About Us   |   Terms & Condition   |   Advertise With us