神刀安全网

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 database table using web grid.

Open Visual Studio, New, then click Project,

Render Partial View As Modal Popup Using AJAX Call with JSON Render Partial View As Modal Popup Using AJAX Call with JSON

Below is my Data Table.

Render Partial View As Modal Popup Using AJAX Call with JSON

Data in my Data Table.

Render Partial View As Modal Popup Using AJAX Call with JSON

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

Render Partial View As Modal Popup Using AJAX Call with JSON Render Partial View As Modal Popup Using AJAX Call with JSON Render Partial View As Modal Popup Using AJAX Call with JSON Render Partial View As Modal Popup Using AJAX Call with JSON Render Partial View As Modal Popup Using AJAX Call with JSON Render Partial View As Modal Popup Using AJAX Call with JSON Render Partial View As Modal Popup Using AJAX Call with JSON

Now time to add a new controller.

Render Partial View As Modal Popup Using AJAX Call with JSON Render Partial View As Modal Popup Using AJAX Call with JSON Render Partial View As Modal Popup Using AJAX Call with JSON

Add a View here.

Render Partial View As Modal Popup Using AJAX Call with JSON Render Partial View As Modal Popup Using AJAX Call with JSON

Add the following code to you 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)                   {                       debugger;                       $('#myModalContent').html(data);                       $('#myModal').modal(options);                       $('#myModal').modal('show');                   },                   error: function() {                       alert("Content load failed.");                   }               });           });           $("#closbtn").click(function()           {               debugger;               $('#myModal').modal('hide');           });       }); < /script>   } < table style = "background-color:orange; width:100%; border:solid5pxgreen; padding:20px;" > < tr > < td align = "center"   style = "padding:20px;" > < ahref = "javascript:void(0);"   class = "getAllEMP"   style = "font-size:20pt;" > Get All Employee Information < /a> < /td> < /tr> < /table> < divid = 'myModal'   class = 'modal'   style = "text-align:right; " > < divclass = "modal-dialog"   style = "width:900px; height:400px; padding:10px;" > < divclass = "modal-content"   style = "overflow: auto; padding:10px; background-color:#d2f5f4;" > < button type = "button"   id = "closbtn" > x < /button> < divstyle = "height:10px;" > < /div> < div id = 'myModalContent'   style = "width:850px; height:400px; padding:10px;" > < /div> < /div> < /div> < /div>   

Now add the following code to your EmployeeController,

Render Partial View As Modal Popup Using AJAX Call with JSON

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       {           CompanyDBEntitiesdb = new CompanyDBEntities();           // GET: Employee           public ActionResult Index()            {               return View();           }           public ActionResultEmployeePartial()           {               List < Emp_Information > model = db.Emp_Information.ToList();               return PartialView("_EmpPartial", model);           }       }   }   

Now Add a partial view inside Views, then Employee Folder,

Render Partial View As Modal Popup Using AJAX Call with JSON In _EmpPartial.cshtml write the following code:

@model List < MVC_WebGrid_PartialView_ModalPopup.Emp_Information > @     {           //var grid = new WebGrid(Model, defaultSort: "Name", rowsPerPage: 10, ajaxUpdateContainerId: "gridContent");           var grid = newWebGrid(source: Model, canPage: true, rowsPerPage: 10, ajaxUpdateContainerId: "gridContent");           grid.Pager(WebGridPagerModes.All);       } < styletype = "text/css" > .webgrid - table       {           font - family: "Trebuchet MS", Arial, Helvetica, sans - serif;           font - size: 1.2e m;           width: 100 % ;           display: table;           border - collapse: separate;           border: solid1px# ff6a00;           background - color: white;       }.webgrid - tabletd, th       {           border: 1 pxsolid# ff6a00;           padding: 3 px7px2px;           text - align: left;       }.webgrid - header {           background - color: #ff6a00;           color: #ffffff;           padding - bottom: 4 px;           padding - top: 5 px;           text - align: left;       }.webgrid - footer {}.webgrid - row - style       {           padding: 3 px7px2px;       }.webgrid - alternating - row {           background - color: #00ffff;   padding: 3px7px2px;   }   </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:

Render Partial View As Modal Popup Using AJAX Call with JSON

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:

Render Partial View As Modal Popup Using AJAX Call with JSON Render Partial View As Modal Popup Using AJAX Call with JSON

Read more articles on AJAX:

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Render Partial View As Modal Popup Using AJAX Call with JSON

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮