我开始研究MVC 3项目，我在项目中使用jquery设计了带弹出视图的项目，但是我无法实现它。
这是我的主页代码：这里我将在表格视图中显示记录 -
@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);
}
<link href="../../Content/themes/Webgrid.css" rel="stylesheet" />
<link href="@Url.Content("~/Content/themes/base/minified/jquery-ui.min.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="../../Scripts/jquery-2.1.0.js"></script>
<script src="../../Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$(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');
});
});
</script>
<h2>
CRUD Operations using jQuery dialog and WebGrid</h2>
<br />
<div style="color: Green; font-weight: bold">
@TempData["msg"]
</div>
<br />
@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: "<< First",
previousText: "< Prev",
nextText: "Next >",
lastText: "Last >>",
columns: new[] {
grid.Column("EmpID", header: "Employee ID"),
grid.Column("EName", format:@<text>@Html.ActionLink((string)item.EName, "Details", "Home", new {id = item.EmpID}, null)</text>),
grid.Column("EmailID", header: "Email-ID"),
grid.Column("Address", header: "Address"),
})
<br />
@Html.ActionLink("Create", "Create")
@*<a id="CreateEmp" href="~\Home\Create">Create Employee</a>*@
<div id="dialog-confirm" style="display: none">
<p>
<span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
Are you sure to delete ?
</p>
</div>
<div id="dialog-edit" style="display: none">
</div>
<div id="dialog-view" style="display: none">
</div>
我想在点击特定记录时显示视图，下面是查看详细信息
@model EmpMvcApplication.Models.EmpModel
@{
Layout = null;
}
<link href="../../Content/themes/Webgrid.css" rel="stylesheet" />
@using (Html.BeginForm("Details", "Home", "POST"))
{
<fieldset class="DetailsFS">
<legend>Employee Details</legend>
<div>
EmpID: @Html.DisplayFor(model => model.EmpID)
</div>
<div>
Employee Name: @Html.DisplayFor(model => model.EName)
</div>
<div>
Age: @Html.DisplayFor(model => model.Age)
</div>
<div>
Gender: @Html.DisplayFor(model => model.Gender)
</div>
<div>
Qualification: @Html.DisplayFor(model => model.Qualification)
</div>
<div>
Address: @Html.DisplayFor(model => model.Address)
</div>
<div>
EmailID: @Html.DisplayFor(model => model.EmailID)
</div>
<div>
Department Name: @Html.DisplayFor(model => model.DeptName)
</div>
<div>
<p>
@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")
</p>
</div>
</fieldset>
}
这是控制器
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);
}
有人帮我做这件事，谢谢。
答案 0 :(得分：0)
您正在进行两次对话构造函数调用。
例如：$("#dialog-edit").dialog({})和$("#dialog-edit").dialog('open');
可能是造成这个问题。
答案 1 :(得分：0)
为什么有两个版本的jquery库??? 只需删除一个并尝试。
<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="../../Scripts/jquery-2.1.0.js"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script>