我正在使用MVC 4和Entity Framework以及Grid.MVC用于datagrid。 我试图使用bootstrap实现一个模态对话框来编辑记录。 当我单击编辑时，模态窗口不会出现。
我按照说明如何在这里创建模态： Popup dialog for editing record using Grid.MVC in a ASP.NET MVC3
这是我的代码
YOU CAN DOWNLOAD MY SAMPLE PROJECT HERE
的HomeController
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
return View();
}
[HttpGet]
public ActionResult HR201()
{
DCHREmployee dchremp = new DCHREmployee();
List<HREmployee> hrempList = new List<HREmployee>();
foreach (HREmployee hremp_ in dchremp.GetHREmployee(""))
{
hrempList.Add(hremp_);
}
return View(hrempList);
}
[HttpGet]
public ActionResult Edit(String EmpID)
{
DCHREmployee dchremp = new DCHREmployee();
List<HREmployee> hrempList = new List<HREmployee>();
foreach (HREmployee hremp_ in dchremp.GetHREmployee(EmpID))
{
hrempList.Add(hremp_);
}
return View(hrempList[0]);
}
}
HR201 cshtml视图
@model IEnumerable<TAObjectModel.HREmployee>
@using GridMvc.Html
@using TAObjectModel
@{
ViewBag.Title = "HR201";
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link href="@Url.Content("~/Content/Gridmvc.css")" rel="stylesheet" />
<link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" />
<script src="@Url.Content("~/Scripts/bootstrap.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery-1.9.0.min.js")"></script>
<script src="@Url.Content("~/Scripts/gridmvc.min.js")"></script>
<title>Index</title>
</head>
<body>
<div class="container">
</div>
<div class="container">
@helper RenderDeleteForm(HREmployee hremp)
{
<form method="POST" action="@Url.Action("Delete", "HR201", new { EmpID = hremp.EmpID })">
<button type="submit" class="modal-link" onclick="return confirm('Are you sure you want to delete employee: @hremp.LastNm?');">
Delete
</button>
</form>
}
<h2>HR201</h2>
<div class="pull-left">
@using (Html.BeginForm())
{
<button type="submit" class="btn btn-primary">Add</button>
<button type="submit" class="modal-link">MODAL</button>
}
</div>
@Html.Grid(Model).Columns(columns =>
{
columns.Add(c => c.EmpID).Titled("EmpID").Filterable(true);
columns.Add(c => c.FirstNm).Titled("First Name");
//columns.Add(c => c.MiddleNm).Titled("Middle Name");
//columns.Add(c => c.LastNm).Titled("Lastn Name");
columns.Add(c => c.BirthDt).Titled("BirthDay").Format("{0:dd MMM yyyy}").Filterable(true);
columns.Add().Titled("Action")
.Sanitized(false)
.Encoded(false)
.RenderValueAs(d => Html.ActionLink("Edit", "Edit", new { EmpID = d.EmpID }, new { @class = "modal-link" }));
columns.Add().Titled("Action2")
.Sanitized(false)
.Encoded(false)
.RenderValueAs(c => RenderDeleteForm(c));
}).WithPaging(10).Sortable(true)
@Html.ActionLink("Click to Add Customer", "Edit",new{EmpID = "E9770003"}, new { @class = "modal-link" })
</div>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>Loading…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
<script>
//this script reset modal each time when you click on the link:
$(function () {
$(".modal-link").click(function (event) {
event.preventDefault();
$('#myModal').removeData("modal");
$('#myModal').modal({ remote: $(this).attr("href") });
});
})
</script>
</body>
</html>
编辑视图
<div class="container">
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
<fieldset>
<legend>HREmployee</legend>
<div class="editor-label">
@Html.LabelFor(model => model.EmpID)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.EmpID)
@Html.ValidationMessageFor(model => model.EmpID)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.FirstNm)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.FirstNm)
@Html.ValidationMessageFor(model => model.FirstNm)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.LastNm)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.LastNm)
@Html.ValidationMessageFor(model => model.LastNm)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.MiddleNm)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.MiddleNm)
@Html.ValidationMessageFor(model => model.MiddleNm)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.SenseID)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.SenseID)
@Html.ValidationMessageFor(model => model.SenseID)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.NickNm)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.NickNm)
@Html.ValidationMessageFor(model => model.NickNm)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.BirthDt)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.BirthDt)
@Html.ValidationMessageFor(model => model.BirthDt)
</div>
<p>
<input type="submit" value="Save" />
</p>
</fieldset>
}
</div>
**