title: Jquery Popup is not working in MVC?
body: <p>I am start working on a MVC 3  project, I designed the project with popup views by using jquery in the project, but I am unable to achieve it.</p>
  
  <p><strong>This is My Home Page Code: here I will diaplay records in a table view--</strong></p>
  
  <pre><code>@model EmpMvcApplication.Models.PagedEmployeeModel 
  @{
      ViewBag.Title = "Index";
      Layout = "~/Views/Shared/_Layout.cshtml";
      WebGrid grid = new WebGrid(rowsPerPage: Model.PageSize);
      grid.Bind(Model.TblEmp, autoSortAndPage: false, rowCount: Model.TotalRows);
  }
  &lt;link href="../../Content/themes/Webgrid.css" rel="stylesheet" /&gt;
  &lt;link href="@Url.Content("~/Content/themes/base/minified/jquery-ui.min.css")" rel="stylesheet" type="text/css" /&gt;
  &lt;script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="../../Scripts/jquery-2.1.0.js"&gt;&lt;/script&gt;
  &lt;script src="../../Scripts/jquery.unobtrusive-ajax.js"&gt;&lt;/script&gt;
  &lt;script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
  
          $("CreateEmp").live("click", function (e) {
              // e.preventDefault(); use this or return false
              var url = $(this).attr('href');
              $("#dialog-edit").dialog({
                  title: 'Create Employee',
                  autoOpen: false,
                  resizable: false,
                  height: 355,
                  width: 400,
                  show: { effect: 'drop', direction: "up" },
                  modal: true,
                  draggable: true,
                  open: function (event, ui) {
                      $(this).load(url);
  
                  },
                  close: function (event, ui) {
                      $(this).dialog('close');
                  }
              });
  
              $("#dialog-edit").dialog('open');
              return false;
          });
  
          $(".editDialog").live("click", function (e) {
              // e.preventDefault(); use this or return false
              var url = $(this).attr('href');
              $("#dialog-edit").dialog({
                  title: 'Edit Employee',
                  autoOpen: false,
                  resizable: false,
                  height: 355,
                  width: 400,
                  show: { effect: 'drop', direction: "up" },
                  modal: true,
                  draggable: true,
                  open: function (event, ui) {
                      $(this).load(url);
  
                  },
                  close: function (event, ui) {
                      $(this).dialog('close');
                  }
              });
  
              $("#dialog-edit").dialog('open');
              return false;
          });
  
          $(".confirmDialog").live("click", function (e) {
  
              // e.preventDefault(); use this or return false
              var url = $(this).attr('href');
  
              $("#dialog-confirm").dialog({
                  autoOpen: false,
                  resizable: false,
                  height: 170,
                  width: 350,
                  show: { effect: 'drop', direction: "up" },
                  modal: true,
                  draggable: true,
                  buttons: {
                      "OK": function () {
                          $(this).dialog("close");
                          window.location = url;
  
                      },
                      "Cancel": function () {
                          $(this).dialog("close");
  
                      }
                  }
              });
              $("#dialog-confirm").dialog('open');
              return false;
          });
  
          $(".viewDialog").live("click", function (e) {
              // e.preventDefault(); use this or return false
              var url = $(this).attr('href');
              $("#dialog-view").dialog({
                  title: 'View Employee',
                  autoOpen: false,
                  resizable: false,
                  height: 250,
                  width: 400,
                  show: { effect: 'drop', direction: "up" },
                  modal: true,
                  draggable: true,
                  open: function (event, ui) {
                      $(this).load(url);
  
                  },
                  buttons: {
                      "Close": function () {
                          $(this).dialog("close");
  
                      }
                  },
                  close: function (event, ui) {
                      $(this).dialog('close');
                  }
              });
  
              $("#dialog-view").dialog('open');
              return false;
          });
  
          $("#btncancel").live("click", function (e) {
              // location.reload(true);
              $("#dialog-edit").dialog('close');
  
          });
      });
  &lt;/script&gt;
  &lt;h2&gt;
      CRUD Operations using jQuery dialog and WebGrid&lt;/h2&gt;
  &lt;br /&gt;
  &lt;div style="color: Green; font-weight: bold"&gt;
      @TempData["msg"]
  &lt;/div&gt;
  &lt;br /&gt;
  @grid.GetHtml(
      fillEmptyRows: false,
      tableStyle: "Webgrid-table",
      headerStyle: "Webgrid-header",
      footerStyle: "Webgrid-footer",
      alternatingRowStyle: "Webgrid-alternating-row",
      rowStyle: "Webgrid-row-style",
  
      mode: WebGridPagerModes.All,
              firstText: "&lt;&lt; First",
              previousText: "&lt; Prev",
              nextText: "Next &gt;",
              lastText: "Last &gt;&gt;",
      columns: new[] {
  
          grid.Column("EmpID", header: "Employee ID"),
          grid.Column("EName", format:@&lt;text&gt;@Html.ActionLink((string)item.EName, "Details", "Home", new {id = item.EmpID}, null)&lt;/text&gt;),
          grid.Column("EmailID",  header: "Email-ID"),
          grid.Column("Address",  header: "Address"),
  })
  &lt;br /&gt;
  @Html.ActionLink("Create", "Create")
  @*&lt;a id="CreateEmp" href="~\Home\Create"&gt;Create Employee&lt;/a&gt;*@
  &lt;div id="dialog-confirm" style="display: none"&gt;
      &lt;p&gt;
          &lt;span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"&gt;&lt;/span&gt;
          Are you sure to delete ?
      &lt;/p&gt;
  &lt;/div&gt;
  &lt;div id="dialog-edit" style="display: none"&gt;
  &lt;/div&gt;
  &lt;div id="dialog-view" style="display: none"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>I want to display a view when I clicked on the a particular record, below is view Detail</strong></p>
  
  <pre><code>@model EmpMvcApplication.Models.EmpModel
  @{
      Layout = null;
  }
  &lt;link href="../../Content/themes/Webgrid.css" rel="stylesheet" /&gt;
  @using (Html.BeginForm("Details", "Home", "POST"))
  {
      &lt;fieldset class="DetailsFS"&gt;
          &lt;legend&gt;Employee Details&lt;/legend&gt;
  
          &lt;div&gt;
              EmpID: @Html.DisplayFor(model =&gt; model.EmpID)
          &lt;/div&gt;
  
          &lt;div&gt;
              Employee Name: @Html.DisplayFor(model =&gt; model.EName)
          &lt;/div&gt;
  
          &lt;div&gt;
              Age:  @Html.DisplayFor(model =&gt; model.Age)
          &lt;/div&gt;
  
          &lt;div&gt;
              Gender: @Html.DisplayFor(model =&gt; model.Gender)
          &lt;/div&gt;
  
          &lt;div&gt;
              Qualification: @Html.DisplayFor(model =&gt; model.Qualification)
          &lt;/div&gt;
  
          &lt;div&gt;
              Address: @Html.DisplayFor(model =&gt; model.Address)
          &lt;/div&gt;
  
          &lt;div&gt;
              EmailID: @Html.DisplayFor(model =&gt; model.EmailID)
          &lt;/div&gt;
          &lt;div&gt;
              Department Name: @Html.DisplayFor(model =&gt; model.DeptName)
          &lt;/div&gt;
          &lt;div&gt;
              &lt;p&gt;
                  @Html.ActionLink("Edit", "Edit", new { Id = Model.EmpID /* id=Model.PrimaryKey */ }) |
                  @Html.ActionLink("Delete", "Delete", new { ID = Model.EmpID }) | 
                  @Html.ActionLink("Back to List", "Index")
              &lt;/p&gt;
          &lt;/div&gt;
  
      &lt;/fieldset&gt;
  
  }
  </code></pre>
  
  <p><strong>This is the Controller</strong></p>
  
  <pre><code>   public ActionResult Details(int id)
          {
              var data = modlservices.GetEmployee(id);
  
              EmpModel emp = new EmpModel();
              emp.EmpID = data.EmpID;
              emp.EName = data.EName;
              emp.Gender = data.Gender;
              emp.Qualification = data.Qualification;
  
              //emp.Age = data.Age;
              emp.Address = data.Address;
              emp.EmailID = data.EmailID;
  
              return View("_ViewEmployee", emp);
  
          }
  </code></pre>
  
  <p>Someone help me to do this, Thanks.</p>