如何从 MVC 中的发布操作返回到 jQuery 对话框？

Question

你好，

我正在通过开发一个简单的网络应用程序来学习 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);
    }

我想要的是当我在编辑表单上输入错误的数据并单击“确定”按钮时，对话框不会关闭，并且错误消息会出现在有错误的字段旁边。

提前致谢。

Answer 1

我最近遇到了一个非常相似的问题。我的解决办法是在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>

Answer 2

我找到了我自己的问题的答案：

我更新了帖子编辑操作以在没有错误时返回此操作

    [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");
            }
        }