如何在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（ “〜/捆綁/ 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');
    });
});