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按钮后，我从页面上看到了这个弹出式下载对话框：

Screenshot A

有人可以帮帮我吗？我有预感，因为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);

因为没有评论它们会在运行时给我下面的错误： enter image description here

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

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

Answer 1

我在尝试找到一个易于重复使用弹出窗口的约定时遇到了类似的问题，有些则没有。我没有在每个页面上包含验证脚本，而是在我的布局中添加了一个名为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中处理。

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

4 个答案: