ASP.NET 局部视图上的 MVC 表单

Question

我的页面有一个 table 和一个按钮。当我按下按钮时，部分视图加载到 div 中。在局部视图上有一个 ajax 表单，如果表单数据错误，它会发回带有验证错误的局部视图，但我想删除局部视图并在成功插入的情况下刷新 table 。形式 header:

@using (Ajax.BeginForm("RequestInsert", "Home", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "requestForm" }, new { id = "reqins" }))

主机页面上的 jQuery 提交事件处理程序：

$(document).on('submit', '#reqins', function (e) { 
            e.preventDefault();  
            let data = $("form :input").serializeArray();
            $.ajax({
                url: '@Url.Action("RequestInsert", "Home")'
                ,type: "POST"
                ,data: { "__RequestVerificationToken": token, "model": data }
            })
                .done(function (data) {
                    $("#requestForm").html("");
                    table.search('').columns().search('').draw();
            })
            .fail(function (jqXHR, textStatus) {
                alert("fail");
            }); 
        });

我对部分视图和 ajax 形式有点困惑。

Answer 1

试试这个并删除 Ajax 助手

$('#reqins').on('click', function () { 

            let data = $("form :input").serializeArray();

            $.ajax({
                url: '@Url.Action("RequestInsert", "Home")'
                ,type: "POST"
                ,data: data 
                ,success:function (result) {
                          $("#requestForm").html(result);
                        }});

                });

将您的操作修改为

public JsonResult RequestInsert()
        {
            try
            {
                return Json(new { success = true, result = PartialView("Prtialview") });
            }
            catch (Exception ex)
            {
                return Json(new { success = false, result = ex.ErrorMessage });
            }
        }

然后修改客户端如下

$('#reqins').on('click', function () { 

            let data = $("form :input").serializeArray();

            $.ajax({
                url: '@Url.Action("RequestInsert", "Home")'
                ,type: "POST"
                ,data: data 
                ,success:function (result) {
                          if(result.succuss)
                          {
                             $("#requestForm").html(result);
                          }
                          else
                          {
                             alert("Error");
                           }
                        }});

                });

Answer 2

由于您的 objective 正在检查 AJAX 响应的验证状态，您可以使用 if 条件来对抗 AJAX 响应，如下所示：

$('#reqins').submit(function (e) {
    e.preventDefault();

    let data = $('form :input').serializeArray();

    $.ajax({
        url: '@Url.Action("RequestInsert", "Home")',
        type: 'POST',
        data: { "__RequestVerificationToken": token, "model": data },
        success: function (result) {
            // check valid response
            if (result.invalid) {
                $('#requestForm').html(result.form);
            }
            else {
                $('#requestForm').html(result);
                table.search('').columns().search('').draw();
            }
        },
        error: function (jqXHR, textStatus) {
            alert("fail");
        }
    });
});

然后在控制器操作中，您可以 return 使用 Controller.Json() 验证状态和部分视图，提供 RenderViewToString() 扩展方法 here:

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult RequestInsert(ViewModel model)
{
    // perform validation here

    // assume IsValid is a boolean returned from validation status
    if (IsValid)
    {
        // successful validation, return empty form
        return PartialView("FormPartialView");
    }
    else
    {
        // validation failed, return failure status and previously-filled form
        return Json(new { invalid = true, form = RenderViewToString(PartialView("FormPartialView", model)) });
    }
}

ASP.NET 局部视图上的 MVC 表单

ASP.NET MVC form on a Partial View

asp.net-mvc

partial-views

ajax.beginform