如何在 Asp.Net MVC 的引导模式弹出窗口中显示服务器端错误消息？

Question

我想使用引导警报在引导模式弹出窗口中显示服务器端错误消息，例如重复名称。一切似乎都有效，但提交表单上没有显示消息。 我的控制器的代码是（仅返回部分）：

TempData["Msg"] = "There are a record with the same description";                        
return PartialView("_Create", state);

在部分视图中，我在标题部分有以下代码：

@{
   var errorMessage = "";
   if (TempData["Msg"] != null)
   {
       errorMessage = @TempData["Msg"].ToString();
   }

}

<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-     label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title"><b>State</b></h4>
</div>

@if (errorMessage != "")
{

  <div class="alert alert-dismissable alert-danger" id="success-alert">
    <button type="button" class="close" data-dismiss="alert">×</button>
    @errorMessage
  </div>

}
else
{
  <div class="alert alert-dismissable alert-danger" id="success-alert">
    <button type="button" class="close" data-dismiss="alert">×</button>
  </div>
}

Answer 1

据我所知，TempData 中的值仅在您从 TempData 中提取之前存储。当您执行检查 Msg 是否为空时，您正在执行此操作。您可以提取一次值并将其存储在变量中以供以后使用。另一种选择是改用 ViewBag 或 ViewData。

Answer 2

在您的主页上提供链接

<a href="#myModal" id="modalLink" role="button" data-toggle="modal" data-target="#myModal">Change Password</a>

并定义一些 div

<div id="myModal" class="modal fade" role="dialog" data-backdrop="static" data-keyboard="false">
    <div class="vertical-alignment-helper">
        <div class="modal-dialog vertical-align-center">
            <div class="modal-content" style="height:400px;width:350px;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Change Password</h4>
                </div>
                <div class="modal-body">
                    @Html.Partial("_ChangePassword", Model.ObjChangePasswordModel)
                </div>
            </div>
        </div>
    </div>
</div>

编写一些脚本以清除所有验证消息并在关闭弹出窗口时控制数据

 $('#myModal').on('hidden.bs.modal', function (e) {
        $(this)
          .find("input,textarea,select,span")
             .val('')
             .end()
          .find("input[type=checkbox], input[type=radio]")
             .prop("checked", "")
             .end();

        $('.field-validation-error').each(function () {
            $(this).html("");
        })


    })

局部视图代码

@model CAT_MVC.Models.ChangePasswordModel

@Scripts.Render("~/bundles/jqueryval")

<div style="height:400px;width:350px;">
@using (Html.BeginForm("ChangePassword", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
    <div class="row-fluid">
        <label for="CurrentPassword" class="form-control-label">Enter Current Password:</label>
        @Html.PasswordFor(m => m.CurrentPassword, new { @class = "form-control", @id = "txtCurrentPassword", style = "width: 300px;padding-bottom:1px;" })
        @Html.ValidationMessageFor(m => m.CurrentPassword, "", new { @class = "message" })
    </div>
    <div class="row-fluid">
        <label for="NewPassword" class="form-control-label">Enter New Password:</label>
        @Html.PasswordFor(m => m.NewPassword, new { @class = "form-control", style = "width: 300px;" })
        @Html.ValidationMessageFor(m => m.NewPassword, "", new { @class = "message" })
    </div>
    <div class="row-fluid">@*  *@
        <label for="ConfirmPassword" class="form-control-label">Confirm Password:</label>
        @Html.PasswordFor(m => m.ConfirmPassword, new { @class = "form-control", style = "width: 300px;" })
        @Html.ValidationMessageFor(m => m.ConfirmPassword, "", new { @class = "message" })
        @Html.ValidationSummary(true, "", new { @class = "message" })
    </div>
    <div style="height:30px;vertical-align:top;">
        <div class="message lblmsg field-validation-error"></div>
    </div>
    <div class="row-fluid">
        <div class="col-md-8 col-md-offset-3">
            <button type="button" id="btnCancel" class="btn btn-sm btn-secondary" data-dismiss="modal">Close</button>&nbsp;
            <button type="submit" id="btnSave" class="btn btn-sm btn-primary">Change Password</button>
        </div>
    </div>
}

编写验证服务器端的脚本并显示错误消息，如果没有错误则调用服务器端提交

<script type="text/javascript">
$(function () {
    $('#btnSave').click(function (e) {
        e.preventDefault();
        var element = this;
        $.ajax({
            type: "POST",
            url: '@Url.Action("VerifyOldPassword", "Account")',
            data: {
                CurrentPassword: $('#txtCurrentPassword').val(),
            },
            dataType: 'json',
            success: function (response) {
                if (response != null && response.success) {
                    $(element).closest("form").submit();
                   // alert("Password changed successfully.");
                } else {
                    $('.lblmsg').html(response.responseText);
                }
            },
            error: function (response) {
                alert("error!");  //
            }
        });
    });
    $('#btnCancel').click(function () {
        $('#modal-container').modal('hide');
    });
});