@*@@model GridImplementation.Models.EmployeeDetailsModel*@ @model IEnumerable<GridImplementation.Models.EmployeeDetailsModel> @Styles.Render("~/Content/css") <link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" /> @Styles.Render("~/Content/themes/base/css") @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/jqueryui") <style type="text/css"> .alignment { text-align: center; } .hAlignment { margin-left: 10px; float: left; } table, th, td { border: 1px solid black; font-size: 1.1em; text-align: center; } table { border-collapse: separate; width: 90%; } td { padding: 10px 0; } tr:nth-child(even) { background: #CCC; } tr:nth-child(odd) { background: #FFF; } table th { background-color: ButtonShadow; } </style> <div> <table id="tEmpDetails"> <thead> <tr> <th>Employee Name</th> <th>Employee Designation</th> <th>Employee Department</th> <th>Employee Salary</th> <th>Actions</th> </tr> </thead> <tbody> @foreach (var EmployeeDetails in Model) { <tr> <td class="alignment" style="display:none;">@EmployeeDetails.EmpID </td> <td class="alignment">@EmployeeDetails.EmpName </td> <td class="alignment">@EmployeeDetails.EmpDesignation </td> <td class="alignment">@EmployeeDetails.EmpDepartment </td> <td class="alignment">@EmployeeDetails.EmpSalary </td> <td class="alignment"> <input id="btnEdit" type="button" value="Edit" /> <input id="btnDelete" type="button" value="Delete" /> </td> </tr> } </tbody> </table> </div> <script type="text/javascript"> $(document).ready(function () { $("#tEmpDetails").on('click', '#btnEdit', function () { var CurrentRow = $(this).closest('tr'); var EmpID = CurrentRow.find("td:eq(0)").text(); var EmpName = CurrentRow.find("td:eq(1)").text(); var EmpDesignation = CurrentRow.find("td:eq(2)").text(); var EmpDepartment = CurrentRow.find("td:eq(3)").text(); var EmpSalary = CurrentRow.find("td:eq(4)").text(); $("#EmpName").val(EmpName); $("#EmpDesignation").val(EmpDesignation); $("#EmpDepartment").val(EmpDepartment); $("#EmpSalary").val(EmpSalary); $("#openPopup").dialog('open'); }); }); $(function () { $("#openPopup").dialog({ modal: true, autoOpen: false, title: "Edit Employee Details", width: 500, height: 500, buttons: { close: function () { $(this).dialog('close'); } } }); }) </script> <div id="openPopUp" style="display:none;" align=center> <table> <tr> <td>Employee Name:</td> <td>@Html.TextBox("EmpName") </td> </tr> <tr> <td>Employee Designation:</td> <td>@Html.TextBox("EmpDesignation") </td> </tr> <tr> <td>Employee Department:</td> <td>@Html.TextBox("EmpDepartment") </td> </tr> <tr> <td>Employee Salary:</td> <td>@Html.TextBox("EmpSalary") </td> </tr> </table> </div>
$("#openPopup").dialog('open');
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
style="display:none;
<div id="openPopUp" style="display:none;" align=center>
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)