0
こんにちは、MVCのポストアクションからjQueryダイアログに戻る方法は？
私は、単純なWebアプリケーションの開発を通じてMVCを学んでいます。 jQueryダイアログの使用に問題があります。
インデックスと作成/編集ビューとアクションを持つモデルがあります。編集は、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")
}は今ここに、これらは/私の編集が取得されているポストアクション最後に、別の.jsである私のJavaScriptファイル
$(".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);
}
間違ったデータを入力すると、編集フォームをクリックして[OK]ボタンをクリックするとダイアログが閉じず、エラーのあるフィールドの横にエラーメッセージが表示されます。
ありがとうございました。
ようになり、ダイアログの[OK]ボタンを更新します。submit（）; '）ので、直ちにページを離れて' Index（） 'メソッドにリダイレクトするか、' ModelState'が無効であれば新しいビューを返します。私は、あなたがajaxを使ってフォームを提出し、同じページにとどまりたいと思っていますか？ –
DOMを更新した後にバリデータを再解析しない限り、フォームを動的にロードするため、クライアント側の検証は行われません。 –