Ajax 不显眼表单的问题,有时在 .net core razor 中提交两次

Issue with Ajax Unobtrusive form submitting twice sometimes in .net core razor

提问人:Nayas Subramanian 提问时间:10/29/2021 最后编辑:SuperStormerNayas Subramanian 更新时间:11/4/2021 访问量:128

问:

有时表单在剃须刀页面中多次提交。我正在使用不起眼的ajax的3.2.6版本。我仔细检查了 viewpagesource,以确保只有一个不起眼的 ajax 库。有两种形式,一种接一排,一种形式enter image description here

 <form method="post" id="loginForm" data-ajax="true" data-ajax- 
method="post" data-ajax-success="success" data-ajax-failure="failure" 
data-ajax-loading="#spinner">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-check mb-2 mt-3 form-check-inline">
                                    <input class="form-check-input" type="radio" value="C" id="customradio1" checked name="Input.UserType" />
                                    <label class="form-check-label" for="customradio1">Complainant  <strong class="text-danger" title="A Complainant is a registered company who can blacklist an individual or a company for doing an un ethical act." data-plugin="tippy" data-tippy-placement="top">(?)</strong></label>
                                </div>

                                <div class="form-check mb-2 form-check- 
             inline">
                                    <input class="form-check-input" 
 type="radio" value="S" id="customradio2" name="Input.UserType">
                                    <label class="form-check-label" for="customradio2">Defender <strong class="text-danger" title="A defender can be a registered company who is blacklisted by a one or more registered companies for the unethical act the defender has committed." data-plugin="tippy" data-tippy-placement="top">(?)</strong></label>
                                </div>
                            </div>

                            <div class="mb-1">
                                <input class="form-control" type="email" 
placeholder="Enter your email" data-val="true" data-val-email="The Email Address field is not a valid e-mail address." data-val-length="The field Email Address must be a string with a maximum length of 100." data-val-length-max="100" data-val-required="The Email Address field is required." id="Input_EmailAddress" maxlength="100" name="Input.EmailAddress" value="">
                                <span class="text-danger field-validation-valid" data-valmsg-for="Input.EmailAddress" data-valmsg-replace="true"></span>

                            </div>

                            <div class="text-center d-grid ">
                                <button class="btn btn-primary" id="submit">
                                    <span id="spinner" style="display:none" class="spinner-border none spinner-border-sm me-1" role="status" aria-hidden="true"></span>
                                    Get OTP
                                </button>
                            </div>

                            <div class="mt-2">
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input" data-val="true" data-val-required="The RememberMe field is required." id="Input_RememberMe" name="Input.RememberMe" value="true">
                                    <label class="form-check-label" for="checkbox-signin">Remember me</label>
                                </div>
                            </div>


                        </div>
                    <input name="__RequestVerificationToken" type="hidden" value="CfDJ8B6q7jZs13JIkQu_1n_ifmNU_1JgrC4zKposynPlBGSNh7wOgcIegryz4qwyZPVeM0D2jQK6K6Y84GCOrY5gfi6p8MThPAnzCvRy5s44vwvip5C7BZxYe6qvO3yKYg2wLcAY2MsQFpi2BsJw3_V2rQ0" /><input name="Input.RememberMe" type="hidden" value="false"></form>

                    <form method="post" class="needs-validation" enctype="multipart/form-data" id="otpForm" data-ajax="true" data-ajax-success="otpSuccess" data-ajax-method="post" data-ajax-failure="otpFailure" data-ajax-loading="#spinner1" novalidate action="/Login?handler=OtpVerification">
                        <div class="mb-3 mt-2">

                            <input type="hidden" id="mobile" name="mobile" />
                            <input type="hidden" id="userType" name="userType" />
                            <input type="hidden" id="rememberme" name="rememberme" />
                            <input class="form-control" required name="otp" type="text" maxlength="5" min="5" placeholder="Enter the OTP" style="text-align:center">
                            <div class="invalid-feedback">
                                Enter the OTP
                            </div>
                        </div>
                        <div class="login-button mb-3">
                            <button class="btn btn-primary btn-sm float-sm-end" type="submit">
                                <span id="spinner1" style="display:none" class="spinner-border none spinner-border-sm me-1" role="status" aria-hidden="true"></span>
                                Login
                            </button>

                        </div>
                        

                    <input name="__RequestVerificationToken" type="hidden" value="CfDJ8B6q7jZs13JIkQu_1n_ifmNU_1JgrC4zKposynPlBGSNh7wOgcIegryz4qwyZPVeM0D2jQK6K6Y84GCOrY5gfi6p8MThPAnzCvRy5s44vwvip5C7BZxYe6qvO3yKYg2wLcAY2MsQFpi2BsJw3_V2rQ0" /></form>

第二种形式enter image description here

enter image description here

jquery ajax asp.net-core razor unobtrusive-javascript

评论


答: 暂无答案