c# - 验证 Ajax 加载的表单 - 返回验证摘要

Question

我正在尝试验证单独加载到页面其余部分的已提交表单。我一直对正常的非 ajax 加载内容使用验证。我坚持这个原则:

1. 提交表格
2. 将请求从我的 Controller 传递到我的服务
3. 验证服务中的对象
4. 根据验证状态将 bool 值传回 Controller
5. 如果存在验证错误，请出示带有验证摘要的原始表单
6. 如果没有验证错误，则显示成功页面

这在非 ajax 内容上运行良好。

现在让我们考虑一下我的问题。我有这种结构:

<div id="mainContent">
   <div id="leftContent"></div>
   <div id="rightContent"></div>
</div>

<script>
      $.ajax({
            url: baseUrl + "home/newApplicationForm/",
            type: "GET",
            success: function (data) {
                $("#rightContent").html(data);                  
            },
            error: function (xhr, ajaxOptions, thrownError) {                 
                alert("Error displaying content");
            }
        });

</script>

这会将我的空白申请表放在页面的右侧。页面上的其他所有内容均未被该 ajax 保持不变。

所以 home/newapplicationform 现在显示包裹着的表单:

@model homelessRentals.Model.Application
@{
AjaxOptions options = new AjaxOptions{
    HttpMethod = "Post",
    UpdateTargetId = "AddApplication"        
};        

}

@using (Ajax.BeginForm(options)) { 
@Html.ValidationSummary(true)
     <div class="editor-field">
        @Html.EditorFor(model => model.YourName)
        @Html.ValidationMessageFor(model => model.YourName)
    </div>
<input type="submit" value="Add Application" id="saveMe"/>
}

此表单现在 ping 回我的 Controller :

    [HttpPost]
    public ActionResult AddApplication(Application app)
    {
        bool validated = _service.AddApplication(app);

        if(validated)
        {
             return PartialView("SuccessApp");
        }
        return PartialView(app);
    }

这将使我返回到我的表单并显示验证错误，或者将我引导到我的成功页面。这在逻辑正确的范围内有效，但我得到的是部分 View 而不是整个页面——它没有返回到“rightContent”div 中。

我已经尝试提交表单并在 jquery 中捕获提交，然后运行类似这样的东西但我得到了相同的行为:

      $.ajax({
            url: baseUrl + "home/AddApplication/",
            data: "{'app':" + JSON.stringify(newApp) + "}",
            type: "POST",
            success: function (data) {
                $("#rightContent").html(data);                  
            },
            error: function (xhr, ajaxOptions, thrownError) {                 
                alert("Error displaying content");
            }
        });

任何人都可以帮助我以更好的方式实现此验证吗？

非常感谢

Answer 1

UpdateTargetId不正确，需要指向rightContent而不是AddApplication。

@{
AjaxOptions options = new AjaxOptions{
    HttpMethod = "Post",
    UpdateTargetId = "rightContent"        
};

没有id为AddApplication的dom元素。