CODEWITHSUNDEEP
asp.net-mvctwitter-bootstrap
DevSa
DevSa

Reputation: 198

How to open bootstrap modal without posting back?

In a View, there is a file upload control(excluded from below code), two buttons, one for saving and other for displaying the modal.

@using (Html.BeginForm("Display", "Home", FormMethod.Post, 
new {enctype = "multipart/form-data"}))
{ 
    <div id="myModal" class="modal fade" role="dialog"> 
        <div class="modal-dialog">
            <div class="modal-content">
               <div class="modal-body">
               </div>
            </div>
         </div>
    </div><button id="btn1" name="update" class="btn btn-danger" type="submit">Save</button><br />
    <button id="btn2" name="savenadd" class="btn btn-danger" data-toggle="modal" data-target="#myModal">Display Modal</button>
}

How do I prevent the page from posting back when btn2 is clicked? I don't mind posting back when modal is closed. Thanx

Upvotes: 2

Views: 202

Answers (1)

user3559349
user3559349

Reputation:

The WC3 standards specify that the default type for a <button> in a <form> is type="submit". To prevent the default behavior, make it type="button" (note the name attribute is not necessary)

<button id="btn2" type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModal">Display Modal</button>

Alternatively, you could move the button outside the <form> element.

Upvotes: 3

Related Questions