Load and Save Data in Bootstrap popup modal in ASP.NET - asp.net

Question

I'm using master page for my web application there is a content page we can call it Banks data has a GridView displays all banks and has an Edit,Add,Delete buttons
I wand display a bootstrap modal with input data to edit or add new bank and to validate using asp RequiredFieldValidator
this is the ASPX Code
<Columns>
<asp:BoundField DataField="bankCode" HeaderText="Bank Code" />
<asp:BoundField DataField="bankName" HeaderText="Bank Name" />
<asp:TemplateField >
<ItemTemplate >
<asp:LinkButton ID="lb_Edit" runat="server" CssClass="btn btn-sm btn-default" data-toggle="modal" data-target="#AddBankModal" CommandName="BankEdit" CommandArgument='<%#Eval("bankCode") %>' OnClick="lb_Edit_Click"><strong>Edit</strong></asp:LinkButton>
<asp:LinkButton ID="LB_Delete" runat="server" CssClass="btn btn-sm btn-danger" CommandName="BankDelete" CommandArgument='<%#Eval("bankCode") %>'><strong>Delete</strong></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<RowStyle Height="15px" HorizontalAlign="Right" VerticalAlign="Middle" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnStringDb1 %>" SelectCommand="SELECT [bankCode], [bankNameAr], [bankNameEng] FROM [Bank]"></asp:SqlDataSource>
<!-- Modal -->
<div id="AddBankModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="text-align:right">Bank Data </h4>
</div>
<div class="modal-body">
<asp:Label ID="lblBankCode" runat="server" Text="Bank Code" CssClass="label" style="text-align:right;font-weight:bold"></asp:Label>
<asp:TextBox ID="txtBankCode" runat="server" CssClass="form-control"></asp:TextBox>
<asp:Label ID="lblBankNameAr" runat="server" Text="Bank Name" CssClass="label" style="text-align:right;font-weight:bold"></asp:Label>
<asp:TextBox ID="txtBankNameAr" runat="server" CssClass="form-control"></asp:TextBox>
<div class="row" >
<div class="col-lg-12">
<asp:Button ID="btnUpdateBank" runat="server" Text="Save Data" CssClass="btn btn-outline btn-primary" style="width:100px" OnClick="btnUpdateBank_Click" />
<button type="button" class="btn btn-outline btn-primary" data-dismiss="modal" style="width:100px">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
Does any one have any Ideas to do this using ASP code behind without using Jquery

Answer 1

May be you need some thing like this.Remember two things
1.Dont forget to add ClientIDMode="Static" to asp.net control
2.Postback is prevented by e.preventDefault() to add jQuery functionality in click event
<asp:GridView ID="GridView1" runat="server" ClientIDMode="Static">
<Columns>
<asp:TemplateField >
<ItemTemplate >
<asp:LinkButton ID="lb_Edit" runat="server" CssClass="btn btn-sm btn-default" data-toggle="modal" data-target="#AddBankModal" ClientIDMode="Static"><strong>Edit</strong>
</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<div id="AddBankModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×</button>
<h4 class="modal-title" style="text-align: right">
Bank Data
</h4>
</div>
<div class="modal-body">
<asp:Label ID="lblBankCode" runat="server" Text="Bank Code" CssClass="label" Style="text-align: right;
font-weight: bold"></asp:Label>
<asp:TextBox ID="txtBankCode" runat="server" CssClass="form-control"></asp:TextBox>
<asp:Label ID="lblBankNameAr" runat="server" Text="Bank Name" CssClass="label" Style="text-align: right;
font-weight: bold"></asp:Label>
<asp:TextBox ID="txtBankNameAr" runat="server" CssClass="form-control"></asp:TextBox>
<div class="row">
<div class="col-lg-12">
<asp:Button ID="btnUpdateBank" runat="server" Text="Save Data" ClientIDMode="Static" CssClass="btn btn-outline btn-primary"
Style="width: 100px" />
<button type="button" class="btn btn-outline btn-primary" data-dismiss="modal" style="width: 100px">
Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(function () {
$('.btn').on('click', function (e) {
e.preventDefault();
var buttonid = $(this).attr('id');
console.log(buttonid);
if (buttonid == "lb_Edit") {
$('#AddBankModal').modal({
show: true,
backdrop: 'static'
});
}
if (buttonid == "btnUpdateBank") {
//
alert('Do some ajax to send data to Backend');
}
//currentRow.remove();
});
})
</script>