How to create a simple bootstrap modal dialog in ASP.NET MVC

Question

From my login page user clicks on a ForgotPassword link and goes to this page to fill up a form and request a new password

http://localhost:2350/Account/ForgotPassword

Now when they click Save in that page, their request has been created. So All I need is just a Bootstrap Modal dialog to pop up and say "Your Request Has Been Submitted" and a "OK" button on it, when they click OK it takes them back to login page.

I have never doen Ajax ,Popup dialog, etc.. like this. Can you point me to some tutorial code that is not too complex to follow and reproduce? because my modal is really simple, contains no data, just has a static text and an OK button that redirects to login page on it.

Answer 1

You can setup your Bootstrap Modal like this:

<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>

And in your JavaScript code, you catch the click event of the OK button. Then, call ajax and redirect to login page.

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

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

  // Redirect here
});

Please check this jsfiddle for more detail.