AJAX

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 the record from my database table using web grid.

Open Visual Studio, New, then click Project,

new

project

Below is my Data Table.

table

Data in my Data Table.

data

Now right click on Project Solution Explorer, Add, then click ADO.NET Entity Data Model.

add

add

add

add

add

add

add

Now time to add a new controller.

controller

controller

controller

Add a View here.

view

view

Add the following code to your Index.cshtml,

  1. @ {  
  2.     ViewBag.Title = "Render Partial View As Modal Popup Using AJAX call with JSON";  
  3.     Layout = "~/Views/Shared/_Layout.cshtml";  
  4. }  
  5. @section scripts { < script > var ajaxCallURL = '/Employee/EmployeePartial';  
  6.     $(function()  
  7.       {  
  8.         $(".getAllEMP").click(function()  
  9.          {  
  10.             var $buttonClicked = $(this);  
  11.             var options = {  
  12.                 "backdrop": "static",  
  13.                 keyboard: true  
  14.             };  
  15.             $.ajax({  
  16.                 type: "GET",  
  17.                 url: ajaxCallURL,  
  18.                 contentType: "application/json; charset=utf-8",  
  19.                 datatype: "json",  
  20.                 success: function(data)  
  21.                 {  
  22.                     debugger;  
  23.                     $('#myModalContent').html(data);  
  24.                     $('#myModal').modal(options);  
  25.                     $('#myModal').modal('show');  
  26.                 },  
  27.                 error: function() {  
  28.                     alert("Content load failed.");  
  29.                 }  
  30.             });  
  31.         });  
  32.         $("#closbtn").click(function()  
  33.         {  
  34.             debugger;  
  35.             $('#myModal').modal('hide');  
  36.         });  
  37.     }); < /script>  
  38. } < table style = "background-color:orange; width:100%; border:solid5pxgreen; padding:20px;" > < tr > < td align = "center"  
  39. style = "padding:20px;" > < ahref = "javascript:void(0);"  
  40. class = "getAllEMP"  
  41. style = "font-size:20pt;" > Get All Employee Information < /a> < /td> < /tr> < /table> < divid = 'myModal'  
  42. class = 'modal'  
  43. style = "text-align:right; " > < divclass = "modal-dialog"  
  44. style = "width:900px; height:400px; padding:10px;" > < divclass = "modal-content"  
  45. style = "overflow: auto; padding:10px; background-color:#d2f5f4;" > < button type = "button"  
  46. id = "closbtn" > x < /button> < divstyle = "height:10px;" > < /div> < div id = 'myModalContent'  
  47. style = "width:850px; height:400px; padding:10px;" > < /div> < /div> < /div> < /div>  
Now add the following code to your EmployeeController,

EmployeeController
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. namespace MVC_WebGrid_PartialView_ModalPopup.Controllers  
  7. {  
  8.     public class EmployeeController: Controller  
  9.     {  
  10.         CompanyDBEntities db = new CompanyDBEntities();  
  11.         // GET: Employee  
  12.         public ActionResult Index()   
  13.         {  
  14.             return View();  
  15.         }  
  16.         public ActionResultEmployeePartial()  
  17.         {  
  18.             List < Emp_Information > model = db.Emp_Information.ToList();  
  19.             return PartialView("_EmpPartial", model);  
  20.         }  
  21.     }  
  22. }  
Now Add a partial view inside Views, then Employee Folder,

view

In _EmpPartial.cshtml write the following code: 
  1. @model List < MVC_WebGrid_PartialView_ModalPopup.Emp_Information > @  
  2.   {  
  3.         //var grid = new WebGrid(Model, defaultSort: "Name", rowsPerPage: 10, ajaxUpdateContainerId: "gridContent");  
  4.         var grid = newWebGrid(source: Model, canPage: true, rowsPerPage: 10, ajaxUpdateContainerId: "gridContent");  
  5.         grid.Pager(WebGridPagerModes.All);  
  6.     } < styletype = "text/css" > .webgrid - table  
  7.     {  
  8.         font - family: "Trebuchet MS", Arial, Helvetica, sans - serif;  
  9.         font - size: 1.2e m;  
  10.         width: 100 % ;  
  11.         display: table;  
  12.         border - collapse: separate;  
  13.         border: solid1px# ff6a00;  
  14.         background - color: white;  
  15.     }.webgrid - tabletd, th  
  16.     {  
  17.         border: 1 pxsolid# ff6a00;  
  18.         padding: 3 px7px2px;  
  19.         text - align: left;  
  20.     }.webgrid - header {  
  21.         background - color: #ff6a00;  
  22.         color: #ffffff;  
  23.         padding - bottom: 4 px;  
  24.         padding - top: 5 px;  
  25.         text - align: left;  
  26.     }.webgrid - footer {}.webgrid - row - style  
  27.     {  
  28.         padding: 3 px7px2px;  
  29.     }.webgrid - alternating - row {  
  30.         background - color: #00ffff;  
  31. padding: 3px7px2px;  
  32. }  
  33. </style>  
  34. <div id= "gridContent" >   
  35. @grid.GetHtml  
  36. (  
  37.   tableStyle: "webgrid-table",   
  38.   headerStyle: "webgrid-header",   
  39.   footerStyle: "webgrid-footer",   
  40.   alternatingRowStyle: "webgrid-alternating-row",   
  41.   rowStyle: "webgrid-row-style",   
  42.  columns: grid.Columns  
  43. (  
  44. grid.Column  
  45. (  
  46. header: "No.",   
  47. format: @   
  48. < text >   
  49. < div >   
  50. @(item.WebGrid.Rows.IndexOf(item) + 1)   
  51. < /div></text >   
  52. ),   
  53. grid.Column  
  54. (  
  55. columnName: "EMP_ID", header: "EMPLOYEE ID"  
  56. ),   
  57. grid.Column  
  58. (header: "Name", format:   
  59. @ < text > < a href = "#" > @item.Name < /a></text > ),   
  60. grid.Column(columnName: "ManagerName", header: "ManagerName"),   
  61. grid.Column(columnName: "ProjectName", header: "ProjectName"),   
  62. grid.Column(columnName: "City", header: "City")))   
  63. < /div>  
In Route.config set startup controller and action method like below:

config

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using System.Web.Routing;  
  7. namespace MVC_WebGrid_PartialView_ModalPopup  
  8. {  
  9.     
  10.     public class RouteConfig  
  11.     {  
  12.         public static void RegisterRoutes(RouteCollection routes)  
  13.         {  
  14.             routes.IgnoreRoute("{resource}.axd/{*pathInfo}");  
  15.             routes.MapRoute(name: "Default", url: "{controller}/{action}/{id}", defaults: new  
  16.             {  
  17.                 controller = "Employee",  
  18.                     action = "Index", id = UrlParameter.Optional  
  19.             });  
  20.         }  
  21.     }  
  22. }  
Now run your Application:

app

application

Read more articles on AJAX:

Up Next
    Ebook Download
    View all
    Learn
    View all
    Membership not found