Introduction

In this article we will implement modal pop up to display the detailed information of user after clicking on detail anchor. Here I am going to implement modal popup on list of my last article. So this is the view on which we are going to apply modal popup.

View code

  1. Enumerable<CodeFirst.Models.FriendsInfo>
  2. @{
  3. ViewBag.Title = “Index”;
  4. }
  5. <h2>Index</h2>
  6. <p>
  7.     @Html.ActionLink(“View All”, “Index”)
  8.     @using (Html.BeginForm(“Search”, “Home”, FormMethod.Post))
  9.     {
  10. <table>
  11. <tr>
  12. <td>
  13. <input type=“text” id=“txtName” name=“searchparam” placeholder=“type here to search” />
  14. </td>
  15. <td>
  16. <input type=“submit” id=“btnSubmit” value=“Search” />
  17. </td>
  18. </tr>
  19. </table>
  20.     }
  21. </p>
  22. <table class=“table”>
  23. <tr>
  24. <th>
  25.             @Html.DisplayNameFor(model => model.Name)
  26. </th>
  27. <th>
  28.             @Html.DisplayNameFor(model => model.Mobile)
  29. </th>
  30. <th>
  31.             @Html.DisplayNameFor(model => model.Address)
  32. </th>
  33. <th></th>
  34. </tr>
  35.     @foreach (var item in Model)
  36.     {
  37. <tr>
  38. <td>
  39.                 @Html.DisplayFor(modelItem => item.Name)
  40. </td>
  41. <td>
  42.                 @Html.DisplayFor(modelItem => item.Mobile)
  43. </td>
  44. <td>
  45.                 @Html.DisplayFor(modelItem => item.Address)
  46. </td>
  47. <td>
  48.                 @*@Html.ActionLink(“Edit”, “Edit”, new { id=item.Id }) |
  49.                     @Html.ActionLink(“Details”, “Details”, new { id=item.Id }) |
  50.                     @Html.ActionLink(“Delete”, “Delete”, new { id=item.Id })*@
  51. <a href=“javascript:void(0);” class=“anchorDetail”  data-id=“@item.Id”>Details</a>
  52. </td>
  53. </tr>
  54.     }
  55. </table>
We have an Action method Details(int id) which will return the partial view.
  1. public ActionResult Details(int Id)
  2. {
  3.     FriendsInfo frnds = new FriendsInfo();
  4.     frnds = db.FriendsInfo.Find(Id);
  5.     return PartialView(“_Details”,frnds);
  6. }
Here we added a partial view for this purpose to show detail view when user click on detail anchor in the list.
View Code
  1. @model CodeFirst.Models.FriendsInfo
  2. <div>
  3.     <div class=“modal-header”>
  4.         <button type=“button” class=“close” data-dismiss=“modal” aria-hidden=“true”>×</button>
  5.         <h4 class=“modal-title” id=“myModalLabel”>FriendsInfo</h4>
  6.     </div>
  7.     <hr />
  8.     <dl class=“dl-horizontal”>
  9.         <dt>
  10.             @Html.DisplayNameFor(model => model.Name)
  11.         </dt>
  12.         <dd>
  13.             @Html.DisplayFor(model => model.Name)
  14.         </dd>
  15.         <dt>
  16.             @Html.DisplayNameFor(model => model.Mobile)
  17.         </dt>
  18.         <dd>
  19.             @Html.DisplayFor(model => model.Mobile)
  20.         </dd>
  21.         <dt>
  22.             @Html.DisplayNameFor(model => model.Address)
  23.         </dt>
  24.         <dd>
  25.             @Html.DisplayFor(model => model.Address)
  26.         </dd>
  27.     </dl>
  28. </div>

We have a div for modal pop-up.

  1. <div id=‘myModal’ class=‘modal’>
  2.     <div class=“modal-dialog”>
  3.         <div class=“modal-content”>
  4.             <div id=‘myModalContent’></div>
  5.         </div>
  6.     </div>
  7. </div>
Here is the script for showing modal (partial view) on above div when user click on detail anchor. Here we used Ajax call for this purpose.

Script

  1. @section scripts
  2. {
  3.     “~/Scripts/jquery-1.10.2.min.js”>
  4.     “~/Scripts/bootstrap.js”>
  5.     “~/Scripts/bootstrap.min.js”>
  6.     var TeamDetailPostBackURL = ‘/Home/Details’;
  7.     $(function () {
  8.         $(“.anchorDetail”).click(function () {
  9.             debugger;
  10.             var $buttonClicked = $(this);
  11.             var id = $buttonClicked.attr(‘data-id’);
  12.             var options = { “backdrop”“static”, keyboard: true };
  13.             $.ajax({
  14.                 type: “GET”,
  15.                 url: TeamDetailPostBackURL,
  16.                 contentType: “application/json; charset=utf-8”,
  17.                 data: { “Id”: id },
  18.                 datatype: “json”,
  19.                 success: function (data) {
  20.                     debugger;
  21.                     $(‘#myModalContent’).html(data);
  22.                     $(‘#myModal’).modal(options);
  23.                     $(‘#myModal’).modal(‘show’);
  24.                 },
  25.                 error: function () {
  26.                     alert(“Dynamic content load failed.”);
  27.                 }
  28.             });
  29.         });
  30.         //$(“#closebtn”).on(‘click’,function(){
  31.         //    $(‘#myModal’).modal(‘hide’);  
  32.         $(“#closbtn”).click(function () {
  33.             $(‘#myModal’).modal(‘hide’);
  34.         });
  35.     });
  36. }
Advertisements