返回

jquery-引导模式在ajax错误响应时消失

发布时间:2022-08-23 13:54:48 250
# react.js

我使用引导模式上的表单通过 AJAX 将数据从模式发送到 ASP.NET MVC 平台中的控制器。此控制器将数据保存在数据库中并发送回json数据以报告此活动的成功或失败。

以下代码在 ajax 上按预期工作,success response但在 上error response,引导模式只是消失,而没有按预期在模式上显示错误消息。

.ajax

<script>

    $("#actionButton").click(function () {

        $.ajax({

            url: '@Url.Action("Action","Home")',

            type: "post",

            data: $("#actionForm").serialize()

        })

            .done(function (response) {

                if (response.Success) {

                    //data is saved. 

                    $(".alert-success").show();

                    $("#actionForm").hide();

                }

                else {

                    $(".errorDiv").html(response.Message);

                }

            });

    });

</script>

在 AJAX 成功响应中,模态的行为与预期一样,即$(".alert-success")显示(最初隐藏),并且$("#actionForm")正在隐藏。

HTML

<div class="modal-content">

        <div class="modal-header">

            <h5 class="modal-title">Get Your Survey</h5>

            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">

                <span aria-hidden="true">&times;</span>

            </button>

        </div>

        <div class="modal-body">

            <div class="alert alert-success collapse">

                  <span>

                      Success

                  </span>

            </div>

            <form id="actionForm">

                <div class="form-group">

                    @Html.TextBoxFor(m => m.firstName, new { placeholder = "First Name", @class = "form-control form-control-sm" })                    

                </div>

                <div class="form-group">

                    @Html.TextBoxFor(m => m.lastName, new { placeholder = "Last Name", @class = "form-control form-control-sm" })                    

                </div>

                <button id="actionButton" class="data-btn btn btn-outline-success" type="submit">

                    <i class='fa fa-paper-plane'></i>

                    Send

                </button>

            </form>

            <div class="errorDiv">

            </div>

        </div>

        <div class="modal-footer">

            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>

        </div>

    </div>

MVC 控制器内的代码:

[HttpPost]

        public JsonResult Action([Bind(Include = "Id,firstName,lastName")] InqueryViewModel model)

        {

            JsonResult json = new JsonResult();

 

            if (ModelState.IsValid)

            {

                Inquery inquery = new Inquery();

                inquery.firstName = model.firstName;

                inquery.lastName = model.lastName; 

                var result = SaveInqueries(inquery);               

                json.Data = new { Success = true }; 

            }

            else

            {

                json.Data = new { Success = false, Message = "Unable to perform an action on sending" };

            }

            return json;

        }

那么,是什么导致该代码在 ajax 响应成功时表现出预期的行为,而当 ajax 响应为负时则无法正常工作。

特别声明:以上内容(图片及文字)均为互联网收集或者用户上传发布,本站仅提供信息存储服务!如有侵权或有涉及法律问题请联系我们。
举报
评论区(0)
按点赞数排序
用户头像