如何在ASP.NET MVC中創建簡單的引導模式對話框

Question

在我的登錄頁面上，用戶單擊ForgotPassword鏈接，然后轉到該頁面填寫表格並請求新密碼

http://localhost:2350/Account/ForgotPassword

現在，當他們在該頁面中單擊“ 保存 ”時，他們的請求已創建。 因此，我只需要彈出一個Bootstrap Modal對話框，並說出“您的請求已提交”和上面的“ OK”按鈕 ，當他們單擊OK時，它們將返回登錄頁面。

我從來沒有做過Ajax ，彈出對話框等。 您能指出一些不太復雜的教程代碼嗎？ 因為我的模態非常簡單，不包含任何數據，只有一個靜態文本和一個確定按鈕，可以重定向到其登錄頁面。

Answer 1

您可以這樣設置Bootstrap Modal ：

<div class="container">

  <h3>Modal Example</h3>

  <!-- Button to trigger modal -->
  <div>
    <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch Modal</a>
  </div>

  <!-- Modal -->
  <div id="myModal" class="modal hide" tabindex="-1" role="dialog">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h3>Modal Example</h3>
    </div>
    <div class="modal-body">

      <p>
        This is your body
      </p>

    </div>
    <div class="modal-footer">
      <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
      <button id="submitButton" class="btn btn-primary">OK</button>
    </div>
  </div>

</div>

在您的JavaScript代碼中，您捕獲了OK按鈕的click事件。 然后，調用ajax並重定向到登錄頁面。

$('#submitButton').click(function() {

  // Call AJAX here
  $.ajax({
    method: "POST",
    url: "", // Your URL here
    data: "" // Your data here
  });

  // Redirect here
});

請檢查此jsfiddle了解更多詳細信息。