從MVC剃鬚刀模型調用Bootstrap 3 Modal？

Question

目前我使用的模型，從窗體回來後，我看着一個模型屬性顯示警報。不過，我現在需要有一個Modal顯示。我知道我需要在我的頁面底部顯示一個Modal div，但我無法弄清楚如何從Razor模型中調用它。

所有我發現的研究思路是按鈕點擊或某個點擊事件會調用一些JS並顯示模式。我無法找到任何關於如何從視圖中打開它的任何信息。

這個概念是，最終用戶將點擊一個按鈕做基本做一個時間戳到數據庫中。在控制器中，我設置了一個MessageType屬性，然後基於該屬性，如果出現錯誤或成功提醒，如果一切正常，我會顯示引導程序錯誤警報。現在，而不是調用成功警報，我需要打開一個Modal。

下面是我現在用警報進行操作的方法。這是在我的MVC視圖。有沒有辦法做同樣的事情，而不是Alert打開Modal？

@if (Model.MessageType == "PUNCH") 
{ 
    <div class="alert alert-success"> 
     <h3>Punch accepted at <strong>@Model.CurrentTime.</strong></h3> 
    </div> 
} 

Answer 1

與您所做的相似，您可以執行顯示模式對話框的JavaScript代碼。

假設你已經加載到你的頁面了必需的引導文件，

<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
                 aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <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" id="myModalLabel">Modal title</h4> 
      </div> 
      <div class="modal-body"> 
       ... 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn" data-dismiss="modal">Close</button> 
       <button type="button" class="btn btn-primary">Save changes</button> 
      </div> 
     </div> 
    </div> 
</div> 

@section Scripts 
{ 
@if (Model.MessageType == "PUNCH") 
{ 
    <script> 
     $('#myModal').modal(); 
    </script> 
} 
}