C#Ajax.begin FormValidation双重Post问题

将

formvalidation.io

库与

Ajax.BeginForm

一起使用时，

[HttpPost]

方法被调用两次

我可以确认我没有不止一次引用

jquery.unobtrusive ajax.js

，因为这是一个常见的错误，我也没有在BundleConfig中使用通配符引用

jquery.unobtrusive ajax.js

，我相信这也会引起同样的问题

我还使用了

PartialViewResult

和not

ActionResult

来确保我没有通过

\u Layout.cshtml

重新包含

jquery.unobtrusive ajax.js

通过广泛的测试，试图消除这个问题，我发现删除初始化formvalidation的代码可以消除双重post问题。原因是，初始化formvalidation时会将

novalidate=“novalidate”

添加到表单中

但是，我希望保留formvalidation功能，以防止在未输入正确数据的情况下发布表单，同时也防止不必要的额外HttpPost调用

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

RouteConfig.cs

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

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

public class Test
{
    public int Id { get; set; }

    //[Required]
    public string Description { get; set; }
}

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);
} 

$(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;
                        }
                    }
                }
            }
        }
    });
});

BundleConfig.cs

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

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

public class Test
{
    public int Id { get; set; }

    //[Required]
    public string Description { get; set; }
}

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);
} 

$(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;
                        }
                    }
                }
            }
        }
    });
});

测试.cs

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

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

public class Test
{
    public int Id { get; set; }

    //[Required]
    public string Description { get; set; }
}

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);
} 

$(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;
                        }
                    }
                }
            }
        }
    });
});

HomeController.cs

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

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

public class Test
{
    public int Id { get; set; }

    //[Required]
    public string Description { get; set; }
}

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);
} 

$(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;
                        }
                    }
                }
            }
        }
    });
});

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>

@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")

@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>

\u Test.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>

@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")

@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>

@model WebApplication1.Models.Test
@Model.Id
@型号.说明
@ActionLink（“编辑测试”、“测试”、“主页”、新的{id=Model.id，form=true}、新的AjaxOptions{UpdateTargetId=“TestBody”}、新的{title=“单击以编辑测试”}）

经过更多的研究、大量的尝试和错误，最终只需添加少量代码，即可防止第二次表单发布。请参阅下面我修订的

\u 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;
});