在 Ajax 之后单击按钮后禁用按钮 - ASP.NET MVC5

Question

我在 ASP.NET MVC5 中有一个使用 FormMethod.Post 的表单禁用按钮。我试过了：

onclick="this.disabled = true"

然后表单没有提交，但是当它被删除时，它允许您在单击创建时添加多个记录

这是我的表单代码：

    @section scripts {
    @Scripts.Render("~/bundles/jqueryajaxval")
    @Scripts.Render("~/bundles/jqueryval")

    <script language="javascript" type="text/javascript">
        // cancel
        $(document).on("click",
            "#CancelForm",
            function(e) {
                var uri = '@Html.Raw(Url.Action("Index", "Membership"))';
                window.location = uri;
                e.preventDefault();
            });

        // submit
        $(document).on("click", "#submitMembership", function(e) {
                // Perform Ajax request to check if CAE/IPI Number is unique.
                var caeipinumber = $('#addMembershipCAEIPINumber').val();
                if (caeipinumber) {
                    $.ajax({
                        url: '@Url.Action("IsCAEIPINumberUnique", "Membership")',
                        data: ({ 'caeipinumber': caeipinumber, 'personaIdToIgnore': null }),
                        type: 'POST',
                        async: false,
                        cache: false,
                        success: function(result) {
                            if (result.toLowerCase() == "false") {
                                // Number is not unique and already exists, so display validation error to the user.
                                e.preventDefault();
                                $('#addMembershipForm').validate().showErrors({ 'CAEIPINumber': 'CAE / IPI Number already exists!' });
                                return false;
                            }
                            return true;
                        },
                        error: function(xhr, status, error) {
                        }
                    });
                }
            });
    </script>
}

@section additionalStyles {

}

@section modal {

}

<article class="row">
    <h1 class="pageTitle artistHeader fw200 mb20 mt10">@ViewBag.Title</h1>

    <div class="col-md-1"></div>
    <div id="createMembership" class="col-md-10 formContainer">
        <div class="panel">
            <div class="panel-heading">
                <span class="panel-title">
                    <i class="glyphicon glyphicon-pencil"></i>&nbsp;Details of New Membership
                </span>
            </div>

            @using (Html.BeginForm("AddMembership", "Membership", FormMethod.Post, new { id = "addMembershipForm", role = "form", @class = "theme-primary form-horizontal" }))
            {
                <fieldset>
                    <legend style="display: none">Add Membership Form</legend>
                    @Html.AntiForgeryToken()
                    @Html.ValidationSummary(true)
                    <div class="panel-body p25 fill bt0 pbn">
                        <div class="form-group">
                            @Html.LabelFor(x => x.MembershipName, new { @class = "control-label col-md-3" })
                            <div class="col-md-8">
                                @Html.TextBoxFor(x => x.MembershipName, new { id = "addMembershipName", @class = "form-control", placeholder = "Enter Membership Name..." })
                                @Html.ValidationMessageFor(x => x.MembershipName, string.Empty, new { @class = "text-danger" })
                            </div>
                        </div>
                        <div class="form-group">
                            @Html.LabelFor(x => x.CAEIPINumber, new { @class = "control-label col-md-3" })
                            <div class="col-md-8">
                                @Html.TextBoxFor(x => x.CAEIPINumber, new { id = "addMembershipCAEIPINumber", @class = "form-control", placeholder = "Enter CAE / IPI Number..." })
                                @Html.ValidationMessageFor(x => x.CAEIPINumber, string.Empty, new { @class = "text-danger" })
                            </div>
                        </div> 
                    </div>
                    <div class="panel-footer">
                        <div class="text-center">
                            <input type="button" class="btn btn-primary" id="CancelForm" value="Cancel" />
                            <input id="submitMembership" type="submit" class="btn btn-primary" value="Create" />
                        </div>
                    </div>
                </fieldset>
            }
        </div>
    </div>
    <div class="col-md-1"></div>
</article>

Answer 1

你应该监听表单提交事件，使用的提交输入触发表单提交事件，当事件被触发时你可以禁用你点击的按钮。

$("#form1").submit(function (){
   $("#submitbtn").prop ("disabled",true);
   $.ajax({requestprops,success:function(){
             $("#submitbtn").prop ("disabled",false);
    }});
});

Answer 2

这应该可行：

<script>
function setDisable(id) {
    document.getElementById(id).disabled=true;
};
</script>

 <input id="submitMembership" type="submit" onclick="setDisable(this.id)" class="btn btn-primary" value="Create" />

Answer 3

首先，我将删除单击提交按钮时的绑定，而是绑定提交事件。

将您的提交按钮功能替换为以下内容：

$("#addMembershipForm").submit(function (e) {
            var submitButton = $(this).find(':input[type=submit]').prop('disabled', true); // Find and disable the submit button
            // Perform Ajax request to check if CAE/IPI Number is unique.
            var caeipinumber = $('#addMembershipCAEIPINumber').val();
            if (caeipinumber) {
                $.ajax({
                    url: '@Url.Action("IsCAEIPINumberUnique", "Membership")',
                    data: ({ 'caeipinumber': caeipinumber, 'personaIdToIgnore': null }),
                    type: 'POST',
                    async: false,
                    cache: false,
                    success: function(result) {
                        if (result.toLowerCase() == "false") {
                            // Number is not unique and already exists, so display validation error to the user.
                            submitButton.prop('disabled', false); // Enable submit button
                            e.preventDefault(); // Do not submit form
                            $('#addMembershipForm').validate().showErrors({ 'CAEIPINumber': 'CAE / IPI Number already exists!' });
                        }
                    },
                    error: function(xhr, status, error) {
                    }
                });
            }
      });

var submitButton = $(this).find(':input[type=submit]').prop('disabled', true);用于查找然后禁用按钮。

然后它将像您在原始问题中一样进行唯一检查。但是，如果提交按钮返回 false，我们将启用提交按钮，以便用户重新提交。