asp.net | Open Bootstrap modal in Grid View

Step 1

The grid view

<asp:TemplateField><ItemTemplate>

<asp:Button runat="server" ID="btn_edit_payment" Text="Edit" CssClass="btn btn-info btn-sm" OnClick="btn_edit_payment_Click" />

<asp:Label runat="server" ID="lblpayid" Text='<%# Bind("SubPayID") %>' Visible="false" />

</ItemTemplate></asp:TemplateField>

Step 2

Code Behind

Protected Sub btn_edit_payment_Click(sender As Object, e As EventArgs)

ScriptManager.RegisterStartupScript(Me, Me.[GetType](), "Pop", "openModal();", True)

Dim clickedRow As GridViewRow = TryCast(DirectCast(sender, Button).NamingContainer, GridViewRow)

Session("payid") = DirectCast(clickedRow.FindControl("lblpayid"), Label).Text

get_payment_data_to_edit(Session("payid"))

End Sub

Step 3

Add the following at the end of the document
One for show and the other for hide, if you needed to hide the popup by the code behind

<script type="text/javascript">function openModal() {$('#modal_basic').modal('show');}</script>

<script type="text/javascript">function closeModal() { $('#modal_basic').modal('hide'); }</script>

Step 4

And ofcurce adding your modal html code

<!-- Classic Modal -->
<div class="modal fade" id="modal_basic" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <h4 class="modal-title">Modal title</h4>
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            <i class="material-icons">clear</i>
            </button>
         </div>
         <div class="modal-body">
            ===== modeal content =====
            <div class="form-group bmd-form-group is-filled">
               <label class="label-control">Datetime Picker</label>
               <input type="text" class="form-control datetimepicker" value="07/02/2018">
               <span class="material-input"></span>
               <span class="material-input"></span>
            </div>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-link">Nice Button</button>
            <button type="button" class="btn btn-danger btn-link" data-dismiss="modal">Close</button>
         </div>
      </div>
   </div>
</div>
<!--  End Modal -->

Leave a Reply

Your email address will not be published. Required fields are marked *