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. {
  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: