Question

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

提交表格
将请求从我的控制器传递到我的服务
验证服务中的对象
根据验证状态向控制器传回bool
如果存在验证错误，则使用验证摘要显示原始表单
如果没有验证错误，则显示成功页面

在非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>

这会将我的空白申请表格放在页面的右侧..页面上的其他内容都保持不变.a / a>

所以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"/>
}

这个表格现在回到我的控制器：

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

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

这会将我返回到显示验证错误的表单，或者将我转到我的成功页面。这在逻辑正确的程度上起作用，但我得到部分视图以替换整个页面 - 它不会在'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元素。

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

1 个答案: