使用 JavaScript 在 AJAX beginform 上中止表单提交答案

【问题标题】：Abort form submission on AJAX beginform with JavaScript使用 JavaScript 在 AJAX beginform 上中止表单提交
【发布时间】：2018-02-15 15:23:33
【问题描述】：

我正在使用 .NET MVC。我的问题是，如果 JavaScript 语句为真，我需要从调用中止 AJAX 开始。

<div class="Filter_inner_title white_unifrom out-of-grid">
            @using (Ajax.BeginForm("Search", "Protocol", new AjaxOptions
        {
            HttpMethod = "GET",
            UpdateTargetId = "ajax-content"
        }, new { id = "form" }))
            {
                <div class="head-sys-content dotted-gray-bg white-unifrom-small">
                    <ul class="table-head-branch">
                        <li>
                            <ul class="Select_box_white_bg">
                                <li>
                                    <label class="label">@Html.DrawLabel("BoxNr")</label>
                                    @Html.TextBoxFor(model => Model.Search.BoxNumber, new { @class = "text", @style = "width: 70px" })
                                </li>
                                <li id = "FromDateContainer">
                                    <label class="label">@Html.DrawLabel("from")</label>
                                    @Html.TextBoxFor(model => Model.Search.FromDate, new { @class = "text datePicker" })
                                    <div class="validation-protocol-message">
                                        @Html.ValidationMessageFor(model => Model.Search.FromDate)
                                    </div>                                    
                                </li>
                                <li>
                                    <label class="label">@Html.DrawLabel("to")</label>
                                    @Html.TextBoxFor(model => Model.Search.ToDate, new { @class = "text datePicker" })                                                                        
                                    @Html.ValidationMessageFor(model => Model.Search.ToDate)
                                </li>
                                <li>
                                    <div class="medium-chosen left">
                                        <label class="label">@Html.DrawLabel("protocolType")</label>
                                        @Html.DropDownListFor(model => Model.Search.ProtocolType, new SelectList(Model.ProtocolTypeList, "ID", "Label.Text", Model.Search.ProtocolType), Html.DrawLabel("all"), new { @class = "chosen-select" })
                                    </div>
                                </li>
                            </ul>
                            @Html.HiddenFor(model => Model.Search.PageIndex, new { @class = "PageIndex", @id = "PageIndex" })
                            @Html.HiddenFor(model => Model.Search.ContractId)
                            @Html.HiddenFor(model => Model.Search.IsFromContract)
                            <div class="big-button search left">
                                <input type="submit" value="@Html.DrawLabel("search")" id="SubmitButton" class="arrow-search" />
                            </div>
                        </li>
                    </ul>
                </div>     
            }

这是表格。

$("#form").on("submit", function (e) {
    debugger;

    var FromDate = $("#Search_FromDate").val();
    var ToDate = $("#Search_ToDate").val();
    var FromDateConvert = Globalize.parseDate(FromDate, datePattern);
    var ToDateConvert = Globalize.parseDate(ToDate, datePattern);
    var fromYear = FromDateConvert.getFullYear();
    var toYear = ToDateConvert.getFullYear();
    if (fromYear < 1970) {          
        $("#FromDateContainer span.field-validation-valid").html("@String.Format(Html.DrawLabel("DateOutOfBounds"),Model.Search.FromDate)");
        $("#FromDateContainer span.field-validation-valid").attr("class", "field-validation-error");
        //$(".field-validation-error").css("position", "absolute");
    }
});

如果 if 语句为真，我需要中止 begin 表单调用。有没有办法停止该特定呼叫的每个呼叫？

【问题讨论】：

“这是我的样子。”？
我编辑了它...
可以在Ajax.BeginForm()的OnBegin选项中测试条件，返回false取消提交。但是你对这一切都错了。使用条件验证属性（例如 foolproof [GreaterThan] 属性，以便您获得客户端和服务器端验证。或者如果您想编写自己的，请参阅 The Complete Guide To Validation In ASP.NET MVC 3 - Part 2
@StephenMuecke 谢谢你，你帮了我很多，你的评论很有帮助。

标签： javascript .net asp.net-mvc asp.net-ajax

【解决方案1】：

我通过使用简单的 from 并在前端验证后进行 ajax 调用解决了这个问题

var datePattern = '@(Thread.CurrentThread.CurrentUICulture.DateTimeFormat.ShortDatePattern)';

$("#form").on("submit", function (e) {
    debugger;
    e.preventDefault();
    var FromDate = $("#Search_FromDate").val();
    var ToDate = $("#Search_ToDate").val();
    var FromDateConvert = Globalize.parseDate(FromDate, datePattern);
    var ToDateConvert = Globalize.parseDate(ToDate, datePattern);
    var fromYear = FromDateConvert.getFullYear();
    var toYear = ToDateConvert.getFullYear();

    if (fromYear < 1970 && toYear < 1970) {

        $("#ToDateContainer span.field-validation-error").html("@String.Format(Html.DrawLabel("DateOutOfBounds"),Model.Search.FromDate)");

        $(".field-validation-error").html("");
        $("#ToDateContainer span.field-validation-valid").addClass("field-validation-error");
        $("#FromDateContainer span.field-validation-valid").html("@String.Format(Html.DrawLabel("DateOutOfBounds"),Model.Search.FromDate)");
        $("#FromDateContainer span.field-validation-valid").attr("class", "field-validation-error");
        $("#ToDateContainer span.field-validation-valid").html("@String.Format(Html.DrawLabel("DateOutOfBounds"),Model.Search.FromDate)");
        $("#ToDateContainer span.field-validation-valid").attr("class", "field-validation-error");
        $(".field-validation-error").show();

    }
    else if (fromYear < 1970) {
        $(".field-validation-error").html("");
        $("#FromDateContainer span.field-validation-valid").html("@String.Format(Html.DrawLabel("DateOutOfBounds"),Model.Search.FromDate)");
        $("#FromDateContainer span.field-validation-valid").attr("class", "field-validation-error");
        $(".field-validation-error").show();
    }
    else if (toYear < 1970) {
        $(".field-validation-error").html("");
        $("#ToDateContainer span.field-validation-valid").html("@String.Format(Html.DrawLabel("DateOutOfBounds"),Model.Search.FromDate)");
        $("#ToDateContainer span.field-validation-valid").attr("class", "field-validation-error");
        $(".field-validation-error").show();
    }


    else {
        $(".field-validation-error").html("");
        $.ajax({
            url: '@Url.Action("Search", "Protocol")',
            contentType: "application/json; charset=utf-8",
            data: $(this).serialize(),
            success: function (data) {
                $('#ajax-content').html(data);
            }
        });

    }

【讨论】：