C# Ajax.BeginForm FormValidation Dual Post Issue

Question

当将formvalidation.io库与Ajax.BeginForm一起使用时，[HttpPost]方法被调用两次。

我可以确认我没有多次引用jquery.unobtrusive-ajax.js因为这是一个常见的错误，也没有使用通配符来引用我的 BundleConfig 中的jquery.unobtrusive-ajax.js，我相信这也会带来同样的问题。

我也在使用PartialViewResult而不是ActionResult，以确保我不会通过_Layout.cshtml重新包含jquery.unobtrusive-ajax.js

从广泛的测试中，试图消除这个问题，我发现删除初始化表单验证的代码可以消除双重发布问题。这样做的原因是，初始化时的表单验证会向表单添加novalidate="novalidate"。

但是，我想保留表单验证功能，以防止在没有输入正确数据的情况下发布表单，但也要防止不必要的额外 HttpPost 调用。

请参阅下面的代码，以演示该问题：

路由配置.cs

routeCollection.MapRoute("Test", "Home/Test/{id}/{form}", new { controller = "Home", action = "Test", id = UrlParameter.Optional, form = UrlParameter.Optional });

捆绑配置.cs

bundleCollection.Add(new ScriptBundle("~/scriptBundle/_test").Include("~/Scripts/_test.js"));

测试.cs

public class Test
{
public int Id { get; set; }
//[Required]
public string Description { get; set; }
}

首页控制器.cs

public PartialViewResult Test(int id, bool form)
{
var test = new WebApplication1.Models.Test
{
Id = id,
Description = "Blah"
};
return PartialView(!form ? "_Test" : "_TestForm", test);
}
[HttpPost]
public PartialViewResult Test(WebApplication1.Models.Test model)
{
return PartialView(!ModelState.IsValid ? "_TestForm" : "_Test", model);
} 

Index.cshtml

<div class="row">
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">Test</div>
<div class="panel-body" id="TestBody">
<table class="table table-bordered no-margin-bottom">
<tr>
<td>@Model.Id</td>
</tr>
<tr>
<td>@Model.Description</td>
</tr>
<tr>
<td colspan="4">@Ajax.ActionLink("Edit Test", "Test", "Home", new { id = Model.Id, form = true }, new AjaxOptions { UpdateTargetId = "TestBody" }, new { title = "Click to Edit Test" })</td>
</tr>
</table>
</div>
</div>
</div>
</div>

_TestForm.cshtml

@using WebApplication1.Helpers
@model WebApplication1.Models.Test
@{
Layout = null;
}
@using (Ajax.BeginForm("Test", "Home", null, new AjaxOptions { UpdateTargetId = "TestBody" }, new { @class = "form-horizontal", Id = "TestForm" }))
{
@Html.AntiForgeryToken()
@Html.HiddenFor(model => model.Id)
<fieldset>
<div class="col-sm-12">
<div class="input-group">
<span class="input-group-addon">Description</span>
@Html.TextBoxForExt(model => model.Description)
<p class="help-block">@Html.ValidationMessageFor(model => model.Description)</p>
</div>
</div>
<div class="form-group" style="margin-bottom: -15px">
<div class="col-sm-12">
<div style="float: left">
<button type="submit" name="submitButton" class="btn btn-primary" title="Click to Update">Update</button>
</div>
<div style="float: right">
@Ajax.ActionLink("Cancel", "Test", "Home", new { Model.Id, form = false }, new AjaxOptions { UpdateTargetId = "TestBody" }, new { @class = "btn btn-primary", title = "Click to Cancel" })
</div>
</div>
</div>
</fieldset>
}
@Scripts.Render("~/scriptBundle/_test")

_test.js

$(document).ready(function() {
$("#TestForm").formValidation({
framework: "bootstrap",
fields: {
'Description': {
validators: {
callback: {
callback: function(value) {
debugger;
var id = parseInt($("#Id").val(), 0) || 0;
if (value === "" && id === 0) {
return {
valid: false,
message: "Please enter a Description"
};
}
return true;
}
}
}
}
}
});
});

_Test.cshtml

@model WebApplication1.Models.Test
<table class="table table-bordered no-margin-bottom">
<tr>
<td>@Model.Id</td>
</tr>
<tr>
<td>@Model.Description</td>
</tr>
<tr>
<td colspan="4">@Ajax.ActionLink("Edit Test", "Test", "Home", new { id = Model.Id, form = true }, new AjaxOptions { UpdateTargetId = "TestBody" }, new { title = "Click to Edit Test" })</td>
</tr>
</table>

Answer 1

经过更多的研究，大量的试验和错误，它归结为少量添加代码以防止第二个表单帖子。请参阅下面的修订_test.js。

$(document).ready(function() {
$("#TestForm").formValidation({
framework: "bootstrap",
fields: {
'Description': {
validators: {
callback: {
callback: function(value) {
debugger;
var id = parseInt($("#Id").val(), 0) || 0;
if (value === "" && id === 0) {
return {
valid: false,
message: "Please enter a Description"
};
}
return true;
}
}
}
}
}
});
}).on("success.form.fv", function(e) {
e.preventDefault(); 
return false;
});