0

First of all, I am newbie in web programming. Now I am maintaining an ASP.NET MVC application. I have a view (cshtml) from which I would like to show a modal window in the center of the screen. I would like a modal window like typical confirm dialog in javascript, but I want to put a title, a text, and two buttons, ok and cancel. From my javascript function (which is placed in my ASP.NET MVC view (cshtml)), in this case, onInvoice, I need to do some things depending on the button clicked on the modal window.

For example:

function onInvoice() {
 if (some_condition_happens){

   // At this point I want to show/call modal window by passing title and text

   // Now I read which button was clicked in the modal window
   if (ok_button_is_pressed)
   {
      // Do something when button ok is clicked in the modal window
   }
   else if (cancel_button_is_pressed) {
      // Do something when button cancel is clicked in the modal window
   }
 }
}

I have searched in the web and I have found an example using bootstrap here. Also posted here. I post here:

Javascript code:

$('button[name="remove_levels"]').on('click', function(e) {
  var $form = $(this).closest('form');
  e.preventDefault();
  $('#confirm').modal({
      backdrop: 'static',
      keyboard: false
  })
  .on('click', '#delete', function(e) {
      $form.trigger('submit');
    });
});

view:

<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<form action="#" method="POST">
  <button class='btn btn-danger btn-xs' type="submit" name="remove_levels" value="delete"><span class="fa fa-times"></span> delete</button>
</form>

<div id="confirm" class="modal hide fade">
  <div class="modal-body">
    Are you sure?
  </div>
  <div class="modal-footer">
    <button type="button" data-dismiss="modal" class="btn btn-primary" id="delete">Delete</button>
    <button type="button" data-dismiss="modal" class="btn">Cancel</button>
  </div>
</div>

But I do not know where to put above code, javascript function and view within my ASP.NET MVC project structure. My ASP.NET MVC project is organized in areas as well. I would like to put the above view code in somewhere accessible from other views (cshmtl).Furthermore I would like above modal window to be parametrized, title and text basically. Also I do not know how to read response from modal window back to my javascript function onInvoice, and then depending on which button, ok or cancel was clicked do one thing or another. Finally,since modal window will be parametrized, how can I pass title and text to?

Willy
  • 9,848
  • 22
  • 141
  • 284
  • Does this answer your question? [Creating a modal with bootstrap in ASP.NET MVC](https://stackoverflow.com/questions/37157751/creating-a-modal-with-bootstrap-in-asp-net-mvc) – Heretic Monkey Mar 31 '20 at 13:00
  • @HereticMonkey well... not at all.... anyway it is a good example but I continue having doubts. Where do I place the bootstrap modal window? I place it within my view (cshtml) as hide and then I show when I call it from the javascript function? Also, how can i call this bootstrap modal window from javascript function? In the example bootstrap modal window is shown when action link is clicked. I need to show modal window by calling it from a javascript function, not when clicking on any button, action link, etc. – Willy Mar 31 '20 at 14:04
  • You're asking a lot of questions, which makes this question too broad. I was going to close it as such, but decided that showing how to use bootstrap modals in an ASP.NET MVC context would be a better outcome. Basically, the modal is already hidden by default It doesn't matter where you place the modal HTML because it's removed and attached to the body using JS. [The documentation tells you how to show the dialog independent of any user interaction](https://getbootstrap.com/docs/4.4/components/modal/#modalshow). – Heretic Monkey Mar 31 '20 at 14:11

0 Answers0