0
Hello,Как вернуться в диалог jQuery из post action в MVC?
Я изучаю 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")
}Теперь вот мой 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);
}
Я хочу, когда я ввожу неправильные данные о формы редактирования и нажмите кнопку ОК, диалог не закрывается, и сообщения об ошибках появляются рядом с полями с ошибками.
Спасибо заранее.
Ваш код представившего форму ('$ ("# editForm").submit(); '), поэтому вы сразу же покидаете страницу и перенаправляете метод' Index() 'или возвращаете новое представление, если' ModelState' является недопустимым. Я предполагаю, что вы хотите отправить форму с помощью ajax и остаться на одной странице? –
И поскольку вы динамически загружаете форму, вы не получите никакой проверки на стороне клиента, если не повторите проверку валидатора после обновления DOM. –