添加表单（CRUD）问题的 ASP.NET MVC 弹出部分视图

Question

我正在创建一个 MVC 网站，它利用弹出窗口的部分视图来处理我的所有 CRUD 事务。请注意，我的应用程序已经可以完美地处理这些 CRUD 操作（LINQ-To-Entity）。但是，我的弹出表单有问题。

下面是我_Add.cshtml的代码：

@model MyStore.Models.MyModels.ProductsModel

@{
    Layout = null;
}

@using (Ajax.BeginForm("_Add", "Products", new AjaxOptions
{
    InsertionMode = InsertionMode.Replace,
    HttpMethod = "POST",
    OnSuccess = "addSuccess"
}, new { @id = "addForm" }))
{
    @Html.ValidationSummary(true)      
    <div id="add-message" class="error invisible"></div>

    <fieldset>
        <legend>Products</legend>

        @Html.HiddenFor(m => Model.ProductCode)

        <div class="editor-label">
            @Html.LabelFor(model => model.ProductName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ProductName)
            @Html.ValidationMessageFor(model => model.ProductName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Price)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.Price)
            @Html.ValidationMessageFor(model => model.Price)
        </div>
    </fieldset>
} 

下面是我Controller的代码：

[HttpGet]
public ActionResult _Add(string productCode)
{
    ProductsModel model = newProductsModel();
    model.ProductCode = ProductCode ;
    return PartialView(model);
}

[HttpPost]
public JsonResult _Add(ProductsModel model)
{
    if (ModelState.IsValid)
    {
        ProductsManager prod = new ProductsManager();
        Products pa = new Products();

        pa.ProductCode = model.ProductCode;
        pa.ProductName = model.ProductName;
        pa.Price = model.Price;

        prod.AddProduct(pa);

        return Json(HelperClass.SuccessResponse(pa), JsonRequestBehavior.AllowGet);
    }
    else
    {
        return Json(HelperClass.ErrorResponse("Please review your form"), JsonRequestBehavior.DenyGet);
    }
}

请注意，_Add.cshtml 是通过我在互联网上找到的 Popup.js 呈现的部分视图。它是通过这段代码呈现的：

@Html.ActionLink("[Add Product]", "_Add", new { ProductCode = @ViewData["ProductCode"] }, new { @class = "editLink" })

这工作正常。我的意思是它将产品添加到我的数据库中。但我的问题是在单击Proceed 按钮时，我会从页面弹出下载对话框：

有人可以帮我解决这个问题吗？我有一种预感，这是因为我正在使用HttpMethod（POST、PUT、GET、DELETE），但我不确定哪个是正确的，或者它是否真的是问题所在。

任何帮助将不胜感激！ PS。 抱歉，帖子太长了。

---

编辑：

这是我为这个项目遵循的教程：http://ricardocovo.com/2012/04/06/asp-mvc3-editing-records-with-jqueryui-dialogs-and-ajaxforms-razor-version/

---

编辑：

下面是我正在使用的 jscript 代码。它与我遵循的教程中的基本相同。我只需要在最后一种方法上注释掉几行。

另外，我正在使用 MVC 4。希望这会有所帮助！谢谢！

var linkObj;
$(function () {
    $(".addLink").button();

    $('#addDialog').dialog({
        autoOpen: false,
        width: 400,
        resizable: false,
        modal: true,
        buttons: {
            "Update": function () {
                $("#add-message").html(''); //make sure there is nothing on the message before we continue                         
                $("#addForm").submit();
            },
            "Cancel": function () {
                $(this).dialog("close");
            }
        }
    });

    $(".addLink").click(function () {
        //change the title of the dialog
        linkObj = $(this);
        var dialogDiv = $('#addDialog');
        var viewUrl = linkObj.attr('href');
        $.get(viewUrl, function (data) {
            dialogDiv.html(data);
            //validation
            var $form = $("#addForm");
            // Unbind existing validation
            $form.unbind();
            $form.data("validator", null);
            // Check document for changes
            //$.validator.unobtrusive.parse(document);
            // Re add validation with changes
            //$form.validate($form.data("unobtrusiveValidation").options);
            //open dialog
            dialogDiv.dialog('open');
        });
        return false;
    });

});


function addSuccess(data) {
    if (data.Success == true) {
        //we update the table's info
        //var parent = linkObj.closest("tr");
        //parent.find(".carName").html(data.Object.Name);
        //parent.find(".carDescription").html(data.Object.Description);
        //now we can close the dialog
        $('#addDialog').dialog('close');
        //twitter type notification
        $('#commonMessage').html("Add Complete");
        $('#commonMessage').delay(400).slideDown(400).delay(3000).slideUp(400);
    }
    else {
        $("#add-message").html(data.ErrorMessage);
        $("#add-message").show();
    }
}

我注释掉了这两行：

$.validator.unobtrusive.parse(document);
$form.validate($form.data("unobtrusiveValidation").options);

因为不评论它们会在运行时给我以下错误：

这使我认为这个问题是由于不显眼的验证造成的。就像下面 Xnake 发布的链接一样，我也遇到了同样的问题。唯一不同的是，Thread Opener 必须在他的 Web.config 文件上禁用不显眼的验证来解决问题，而我不能这样做，因为我的代码正在使用不显眼的验证。

这里非常感谢任何帮助。非常感谢！

Answer 1

我在尝试找到一种易于重复使用的弹出窗口的约定时遇到了类似的问题，有些 CRUD 有些没有。我没有在每个页面上都包含验证脚本，而是在我的布局中添加了一个名为 scripts 的部分，并让每个页面添加他们需要的脚本（在这种情况下，如果我的页面上有表单元素，则输入验证脚本）。请注意，我将 Unobtrusive Ajax 脚本保留在默认布局中，因为它与验证无关，并且在我的足够多的页面中使用以保证将其保留在默认布局中。

<html>
<head></head>
</body>
    @RenderBody()
    @RenderSection("Scripts", required: false)
</body>
</html>

对于 Partials，我创建了一个新布局，仅用于定义了相同部分但没有其他周围 HTML 的部分。

@RenderBody()
@RenderSection("Scripts", required: false)

这是一个非常原始的示例（尤其是因为它没有可见的表单元素），但你明白了。

@model Product
@{
    Layout = "~/Views/Shared/_ModalLayout.cshtml";
}
@section Scripts
{
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
}
<section>
    <header><h3>Remove Product?</h3></header>
    Are you sure you wish to remove @Model.Name?
    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()
        @Html.HiddenFor(x => x.ProductId)
        <input type="submit" value="Remove" />
    }
</section>

Answer 2

我已经解决了我的问题！显然，我必须在我的 MasterPage 中包含以下 js 文件。希望这会有所帮助！

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

Answer 3

这是因为您在 _Add (post) 中返回 JSON 数据，因此浏览器会尝试下载它而不是渲染它。尝试在 _Add (post) 中返回与 ActionResult 相同的 PartialView。希望对您有所帮助。

Answer 4

这可能是因为 javascript 事件未正确绑定或结果未在 JS 中处理。