Asp.Net MVCのブートストラップモーダルポップアップ内にサーバーサイドのエラーメッセージを表示するには？

Question

Bootstrap Alertを使ってブートストラップモーダルポップアップ内に重複した名前のようなサーバ側のエラーメッセージを表示したいと思います。すべて動作しているようですが、メッセージはフォームの送信時に表示されません。 私のコントローラのコードは（一部のみを返す）である：

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がnullであるかどうかをチェックするときにこれを実行します。値を一度抽出し、変数に格納して後で使用することができます。もう1つの選択肢は、代わりにViewBagまたはViewDataを使用することです。あなたのメインページで

Answer 2

リンクに

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

を与え、

<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(""); 
     }) 


    }) 

をすべてクリア検証メッセージとコントロールデータのためのいくつかのスクリプトを記述し、いくつかのdivを定義します部分図のコード

@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'); 
    }); 
});