-1
我開始在MVC 3項目上工作，我在項目中使用jquery設計了帶有彈出視圖的項目，但是我無法實現它。Jquery Popup不在MVC中工作？
這是我的主頁代碼：在這裏我將diaplay記錄表view--
@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);
}
有人幫我做到這一點，謝謝。
接縫是什麼問題？除了$（「CreateEmp」）'缺少'＃'？ –
另外，我認爲''.live（）''jquery-2.1.0'已被棄用 - 使用'.on（）'而不是 – Pavlo