您好，
我通过开发一个简单的网络应用程序来学习MVC。我使用jQuery Dialogs时遇到问题。
我有一个带索引/创建/编辑视图和操作的模型。编辑是通过jQuery对话框中的部分视图完成的。到目前为止，对话框加载局部视图并提交它没有问题。 问题是当编辑表单中输入的数据错误时，不会返回错误消息，并且会立即关闭对话框。
这是我的索引视图
@model IEnumerable<HomeManager.Models.Expense>
@{
ViewBag.Title = "Index";
}
<div id="dialog-edit" style="display: none">
</div>
<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>
<h2>Expenses</h2>
<table class="table">
<tr>
<th>
@Html.DisplayNameFor(model => model.Title)
</th>
<th>
@Html.DisplayNameFor(model => model.Amount)
</th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Title)
</td>
<td>
@Html.DisplayFor(modelItem => item.Amount)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id = item.Id }, new { @class = "lnkEdit btn btn-primary btn-sm linkButton", role = "button"}) |
@Html.ActionLink("Delete", "Delete", new { id = item.Id }, new { @class = "lnkDelete btn btn-primary btn-sm linkButton", role = "button" })
</td>
</tr>
}
</table>
<p>
@{ Html.RenderPartial("Create", new HomeManager.Models.Expense()); }
</p>
@section Scripts {
<script src="~/Scripts/HandMade/Dialogs.js"></script>
<script src="~/Scripts/HandMade/SideBar.js"></script>
}
这是我的编辑视图
@model HomeManager.Models.Expense
@{
ViewBag.Title = "Edit";
}
@using (Html.BeginForm("Edit", "Expense", FormMethod.Post, new { id = "editForm" }))
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
@Html.ValidationSummary(true)
@Html.HiddenFor(model => model.Id)
<div class="form-group">
@Html.LabelFor(model => model.Title, new { @class = "control-label col-md-3" })
<div class="col-md-9">
@Html.EditorFor(model => model.Title)
@Html.ValidationMessageFor(model => model.Title)
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Amount, new { @class = "control-label col-md-3" })
<div class="col-md-9">
@Html.EditorFor(model => model.Amount)
@Html.ValidationMessageFor(model => model.Amount)
</div>
</div>
@*<div class="form-inline">
<div class="col-md-offset-2 col-md-4">
<input type="submit" value="Save" class="btn btn-default" />
</div>
<div class="col-md-offset-2 col-md-4">
@Html.ActionLink("Cancel", "Index")
</div>
</div>*@
</div>
}
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
现在这里是我的JavaScript，它位于一个单独的.js文件中
$(".lnkEdit").click(function (e) {
url = $(this).attr('href');
$(".ui-dialog-title").html("Update Expense");
$("#dialog-edit").dialog('open');
return false;
});
$("#dialog-edit").dialog({
autoOpen: false,
resizable: false,
width: 400,
//show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
open: function (event, ui) {
$(".ui-dialog-titlebar-close").hide();
$(".ui-dialog-titlebar").css("background", "black");
$(".ui-dialog-titlebar").css("color", "white");
$(this).load(url);
},
buttons: {
"OK": function () {
$("#editForm").submit();
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
最后这些是我的编辑获取/发布操作
// GET: /Expense/Edit/5
public ActionResult Edit(int? id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
Expense expense = db.Expenses.Find(id);
if (expense == null)
{
return HttpNotFound();
}
//return View(expense);
return PartialView(expense);
}
// POST: /Expense/Edit/5
// To protect from overposting attacks, please enable the specific properties you want to bind to, for
// more details see http://go.microsoft.com/fwlink/?LinkId=317598.
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit([Bind(Include="Id,Title,Amount,ApplicationUserId")] Expense expense)
{
if (ModelState.IsValid)
{
db.Entry(expense).State = EntityState.Modified;
db.SaveChanges();
return RedirectToAction("Index");
}
//return View(expense);
return PartialView(expense);
}
我想要的是当我在编辑表单上输入错误的数据并单击“确定”按钮时，对话框未关闭，并且错误消息旁边会显示错误消息。
先谢谢。
答案 0 :(得分：0)
我最近遇到了一个非常类似的问题。我的解决方案是在ASPX页面上的表单中设置一个隐藏变量：
<input type="hidden" name="showDialogFlag" id="showDialogFlag" value="@VariableFromController" />
然后使用jQuery的ready函数检查隐藏字段中的值以决定是否显示对话框：
<script>
function showOopsDialog() {
$("#dialog-message").dialog({
modal: true,
title: 'Oops!',
width: '580px;'
});
}
$(document).ready(function () {
if ($("#showDialogFlag").val() === 'y') {
showOopsDialog();
}
});
</script>
答案 1 :(得分：0)
我找到了自己问题的答案：
我更新了帖子编辑操作，以便在没有错误时返回
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit([Bind(Include="Id,Title,Amount,ApplicationUserId")] Expense expense)
{
if (ModelState.IsValid)
{
db.Entry(expense).State = EntityState.Modified;
db.SaveChanges();
return Content("Update Successful"); // Here is the update
}
return PartialView(expense);
}
然后将对话框中的确定按钮更新为
buttons: {
"OK": function () {
//$("#editForm").submit();
$.post('/Expense/Edit', $("#editForm").serialize(), function (data) {
if (data == "Update Successful") {
$("#dialog-edit").dialog("close");
window.location = "/Expense/Index";
}
else {
$("#dialog-edit").html(data);
}
}, "html");
},
"Cancel": function () {
$(this).dialog("close");
}
}