jquery - Bootstrap 4 响应模式 ASP.NET MVC 5 - 如何在不单击按钮的情况下显示

Question

我有一个 ASP.NET MVC 5 应用程序，其中包含主页上的部分视图。在局部视图中，当输入长度为 == 6 个字符时自动提交的表单。一切正常，但我需要显示 2 个模态 - 1 个成功和 1 个错误 - 基于 TempData 中的值。我已经尝试了几件事，但似乎都没有奏效。任何帮助表示赞赏...

_RegistrationPartial查看（从此处提交的表单）

@using (Ajax.BeginForm("BarcodeRecord", "Attendance", null, new AjaxOptions() { HttpMethod = "POST" }, new { @class = "form-group", id = "barcodeform", autocomplete = "off" }))
    {
        <div class="input-group mt-sm-3">
            @Html.TextBox("query", null, new { placeholder = "Barcode", @class = "form-control-sm col-sm-12 mw-100", id = "barcode" })
        </div>
    }

jQuery 自动提交表单（主视图中的脚本 - 索引）：

$(document).ready(function () {
        $('#barcode').on('input', function (e) {
            var val = $(this).val();
            var len = val.length;

            if (len === 6) {
                $('#barcodeform').submit();
                $('#barcode').val('');
            }
            e.preventDefault();
        });
        $('#barcode').focus();
    });

要显示的模态（_RegistrationPartial视图中）

<!--Free Book Modal-->
<div class="modal fade" id="freeBookModal" tabindex="-1" role="dialog" aria-labelledby="freeBookModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg text-white" role="document">
        <div class="modal-content transparent-success">
            <div class="modal-header">
                <h6 class="modal-title" id="freeBookModalLabel">Free Book!</h6>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">@Ajax.ActionLink(@"Close", "Replace", "Registration", new AjaxOptions(), new { @class = "text-white" })</button>
            </div>
        </div>
    </div>
</div>

<!--Error Message Modal-->
<div class="modal fade" id="errorMessageModal" tabindex="-1" role="dialog" aria-labelledby="errorMessageModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg text-white" role="document">
        <div class="modal-content transparent-danger">
            <div class="modal-header">
                <h6 class="modal-title" id="errorMessageModalLabel">Error Message:</h6>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">@Ajax.ActionLink(@"Close", "Replace", "Registration", new AjaxOptions(), new { @class = "text-white" })</button>
            </div>
        </div>
    </div>
</div>

表单 POST 的控制器操作：

public async Task<ActionResult> BarcodeRecord(string query)
    {
        var familyMemberId = await _context.Barcodes.Where(b => b.BarcodeId == query).Select(b => b.FamilyMemberId).SingleAsync();

        if (familyMemberId == 0)
        {
            TempData["sErrMsg"] = "Barcode not found.";
            return Redirect("../Registration/RegistratonPartial");
        }

        var viewModel = Session["AttendedEvent"] as EventAttendanceViewModels;
        viewModel.FamilyMemberId = familyMemberId;

        var model = new EventAttendance
        {
            LocationId = viewModel.LocationId,
            FamilyMemberId = viewModel.FamilyMemberId,
            EventId = viewModel.EventId,
            EventDate = viewModel.EventDate,
            EventTime = viewModel.EventTime,
            StaffMemberId = viewModel.StaffMemberId
        };

        var familyMemberInDb = await _context.FamilyMembers.SingleAsync(fm => fm.Id == familyMemberId);

        if (familyMemberInDb.IsActive != true)
        {
            TempData["sErrMsg"] = familyMemberInDb.FirstName + " " + familyMemberInDb.LastName +
                                  " is more than 5 years old, and no longer eligible.";

            return Redirect("../Registration/RegistratonPartial");
        }

        if (familyMemberInDb.AttendanceYear != viewModel.AttendanceYear)
        {
            familyMemberInDb.AttendanceYear = viewModel.AttendanceYear;
            familyMemberInDb.NumberOfEventsAttendedCurrentYear = 0;
        }

        familyMemberInDb.NumberOfEventsAttendedCurrentYear++;
        familyMemberInDb.NumberOfEventsAttendedOverall++;

        if (familyMemberInDb.NumberOfEventsAttendedCurrentYear == 6 && DateTime.Today.DayOfYear > 92)
        {
            //send survey via email
        }

        if (familyMemberInDb.NumberOfEventsAttendedOverall % 10 == 0)
        {
            TempData["sBokMsg"] = familyMemberInDb.FirstName + " " + familyMemberInDb.LastName +
                                  " has earned a free book today with a total of " +
                                  familyMemberInDb.NumberOfEventsAttendedOverall + " visits!";

        }

        _context.EventAttendances.Add(model);

        await _context.SaveChangesAsync();

        TempData["sSucMsg"] = familyMemberInDb.FirstName + " " + familyMemberInDb.LastName +
                              " attendance recorded successfully.";

        return Redirect("../Registration/RegistrationPartial");
    }

标签： jqueryasp.netajaxasp.net-mvc-5bootstrap-4

Answer 1

那么 tempDataResult 获取包含您的临时数据值的隐藏输入字段的值呢：

 $(document).ready(function () {

       var tempDataResult = $('#tempDataField').val();

       if (tempDataResult == 1) 
       {
          $('#freeBookModal').modal('show');
       }
       else
       {
          $('#errorMessageModal').modal('show');
       }

    });
});