Example of Modal Popup in ASP.NET MVC , Loading data dynamically using jquery

Example of Modal Popup in ASP.NET MVC

To Call Modal Popup in ASP.NET MVC, You have to associate a partial view when you click on a link.

Please see the below example :

//Index.cshtml

 

@Styles.Render("~/Content/css")

@Scripts.Render("~/bundles/modernizr")

@Scripts.Render("~/bundles/jquery")

@Scripts.Render("~/bundles/bootstrap")

<script​​ type="text/javascript">

 ​​ ​​​​ 

 ​​ ​​ ​​​​ var​​ tooltipurl =​​ '/Home/EmployeeDetail';

 ​​ ​​ ​​​​ $(function(){

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ $(".anchorDetails").hover(function​​ () {

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ //debugger;

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ var​​ $buttonClicked = $(this);

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ var​​ id=$buttonClicked.attr('data-id');

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ var​​ name=$buttonClicked.attr('data-name');

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ var​​ options ={'backdrop':'static',keyboard:true,"width":"400","left":"150","top":"300"};

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ $.ajax({

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ type:"GET",

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ cache:false,

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ url:tooltipurl,

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ contentType:​​ "application/JSON;charset=utf-8",

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ data: {​​ "id": id,​​ "name": name },

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ dataType:​​ "Text",

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ success:​​ function​​ (data) {

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ // debugger;

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ $('#myModalContent').html(data);

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ $('#myModal').modal(options);

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ $('myModal').modal('show');

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ },

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ error:​​ function​​ (data) {

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ //debugger;

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ alert("Dynamic Content load failed.");

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ }

 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ });

 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ });

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ $('closebtn').on('click',​​ function​​ () {

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ $('#myModal').modal('hide');

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ });

 ​​ ​​ ​​​​ });

 ​​ ​​​​ 

</script>

<html>

<head>

 

</head>

<body>

 ​​ ​​ ​​​​ @Html.Action("EmployeeInfo",​​ "Home");

 ​​ ​​ ​​​​ <div​​ id="myModal"​​ class="modal">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <div​​ class="modal-dialog">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <div​​ id="myModalContent"​​ class="modal-content">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </div>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </div>

 

 ​​ ​​ ​​​​ </div>

</body>

 

</html>

//HomeController.cs

 

using​​ MVC_Example_using_AngularJS.Models;

using​​ System;

using​​ System.Collections.Generic;

using​​ System.Linq;

using​​ System.Web;

using​​ System.Web.Mvc;

 

namespace​​ MVC_Example_using_AngularJS.Controllers

{

 ​​ ​​ ​​​​ public​​ class​​ HomeController​​ :​​ Controller

 ​​ ​​ ​​​​ {

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ public​​ ActionResult​​ EmployeeInfo()

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ {

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ List<Employee> lstEmployee =​​ new​​ List<Employee>();

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ Employee​​ objEmployee1 =​​ new​​ Employee();

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ objEmployee1.ID = 1;

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ objEmployee1.EmployeeName =​​ "Anup";

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ objEmployee1.EmplyeeAddress =​​ "Kolkata";

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ lstEmployee.Add(objEmployee1);

 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ Employee​​ objEmployee2 =​​ new​​ Employee();

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ objEmployee2.ID = 2;

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ objEmployee2.EmployeeName =​​ "Manasi";

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ objEmployee2.EmplyeeAddress =​​ "Lucknow";

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ lstEmployee.Add(objEmployee2);

 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ Employee​​ objEmployee3 =​​ new​​ Employee();

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ objEmployee3.ID = 3;

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ objEmployee3.EmployeeName =​​ "Prince";

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ objEmployee3.EmplyeeAddress =​​ "Kanpur";

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ lstEmployee.Add(objEmployee3);

 

 

 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ return​​ View(lstEmployee);

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ }

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ [HttpGet]

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ public​​ ActionResult​​ EmployeeDetail(string​​ id,string​​ name)

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ {

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ return​​ View();

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ }

 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ 

 ​​ ​​ ​​​​ }

}

//EmployeeInfo.cshtml

@model​​ IEnumerable<MVC_Example_using_AngularJS.Models.Employee>

 

<p>

 ​​ ​​ ​​​​ @Html.ActionLink("Create New",​​ "Create")

</p>

<table​​ class="table">

 ​​ ​​ ​​​​ <tr>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <th>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ @Html.DisplayNameFor(model => model.EmployeeName)

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </th>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <th>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ @Html.DisplayNameFor(model => model.EmplyeeAddress)

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </th>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <th></th>

 ​​ ​​ ​​​​ </tr>

 

@foreach​​ (var​​ item​​ in​​ Model) {

 ​​ ​​ ​​​​ <tr>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <td>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ @Html.DisplayFor(modelItem => item.EmployeeName)

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </td>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <td>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ @Html.DisplayFor(modelItem => item.EmplyeeAddress)

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </td>

 ​​ ​​ ​​ ​​ ​​ ​​​​ 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <td>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <a​​ href="javascript:void(0)"​​ class="anchorDetails"​​ data-id="4"​​ data-name="Anup">View Tooltip</a>​​ |

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ @Html.ActionLink("Edit",​​ "Edit"​​ ) |

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ @Html.ActionLink("Details",​​ "Details",​​ new​​ { id=item.ID }) |

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ @Html.ActionLink("Delete",​​ "Delete",​​ new​​ { id=item.ID })

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </td>

 ​​ ​​ ​​​​ </tr>

}

 

</table>

 

//EmnployeeDetail.cshtml

 

<div>

 ​​ ​​ ​​​​ <a​​ href="#"​​ id="close"​​ class="close"​​ data-dismiss="modal"​​ style="color:black;">*</a>

 ​​ ​​ ​​​​ <br​​ />

 ​​ ​​ ​​​​ <table​​ class="webgrid">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <thead>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <tr>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <th>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ Name

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </th>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <th>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ Date of Birth

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </th>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <th>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ Department

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </th>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </tr>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </thead>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <tbody>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <tr>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <td>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ Mansi

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </td>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <td>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ 30-10-1998

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </td>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <td>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ CS

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </td>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </tr>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <tr>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <td>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ Prince

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </td>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <td>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ 21-03-1992

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </td>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <td>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ IT

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </td>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </tr>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </tbody>

 ​​ ​​ ​​​​ </table>

</div>

 

//Output

(Visited 1,589 times, 1 visits today)

Leave a Reply

Your email address will not be published. Required fields are marked *