Hi makumbi,
Please refer below sample code.
Database
For this example I have used of Northwind database that you can
download using the link given below.
Download Northwind Database
HTML
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<div class="container">
<div class="table-responsive">
<asp:GridView ID="GridView1" AutoGenerateColumns="False" runat="server" CssClass="table table-bordered table-hover table-striped thead-dark GridCustomers">
<Columns>
<asp:BoundField DataField="CustomerID" HeaderText="Customer ID" />
<asp:BoundField DataField="CompanyName" HeaderText="Company Name" />
<asp:BoundField DataField="ContactName" HeaderText="Contact Name" />
<asp:BoundField DataField="ContactTitle" HeaderText="Contact Title" />
<asp:BoundField DataField="Address" HeaderText="Address" />
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="lnkEdit" runat="server">Edit</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</div>
<div id="MyPopup" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×</button>
<h4 class="modal-title">
Update Payments
</h4>
</div>
<div class="modal-body">
<table class="table table-bordered table-hover table-striped thead-dark">
<tr>
<td>
admno
</td>
<td>
<asp:TextBox runat="server" ID="admno" ReadOnly="true" CssClass="form-control" />
</td>
</tr>
<tr>
<td>
Name
</td>
<td>
<asp:TextBox runat="server" ID="txtName" CssClass="form-control" />
</td>
</tr>
<tr>
<td>
Country
</td>
<td>
<asp:TextBox runat="server" ID="txtCountry" CssClass="form-control" />
</td>
</tr>
<tr>
<td>
Date
</td>
<td>
<asp:TextBox runat="server" ID="Date" CssClass="form-control" />
</td>
</tr>
<tr>
<td>
Cash
</td>
<td>
<asp:TextBox runat="server" ID="Pay" CssClass="form-control" />
</td>
</tr>
<tr>
<td>
Category
</td>
<td>
<asp:DropDownList ID="Categoryddl" runat="server" CssClass="form-control">
<asp:ListItem>NONE</asp:ListItem>
<asp:ListItem>SATURDAY</asp:ListItem>
<asp:ListItem>CLUBS</asp:ListItem>
<asp:ListItem>TRIPS</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<asp:Button ID="btnUpdate" Text="Update" runat="server" CssClass="btn btn-primary"
OnClick="OnUpdate" />
<input type="button" value="Close" class="btn btn-danger" data-dismiss="modal" />
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css" rel="stylesheet"
type="text/css" />
<script type="text/javascript">
$(function () {
$(".GridCustomers").DataTable({
bLengthChange: true,
lengthMenu: [[5, 10, -1], [5, 10, "All"]],
bFilter: true,
bSort: true,
bPaginate: true
});
$("[id*=lnkEdit]").click(function () {
$('[id*=admno]').val($(this).closest('tr').find('td').eq(0).html());
$('[id*=txtName]').val($(this).closest('tr').find('td').eq(1).html());
$('[id*=txtCountry]').val($(this).closest('tr').find('td').eq(2).html());
$('#MyPopup').modal('show');
return false;
});
});
</script>
</asp:Content>
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As New SqlConnection(constr)
Using cmd As New SqlCommand("SELECT * FROM Customers", con)
Using sda As New SqlDataAdapter(cmd)
cmd.CommandType = CommandType.Text
Dim dt As New DataTable()
sda.Fill(dt)
GridView1.DataSource = dt
GridView1.DataBind()
GridView1.UseAccessibleHeader = True
GridView1.HeaderRow.TableSection = TableRowSection.TableHeader
End Using
End Using
End Using
End If
End Sub
Protected Sub OnUpdate(ByVal sender As Object, ByVal e As EventArgs)
' Code to update the record.
Dim id As String = Request.Form("txtId")
Dim name As String = Request.Form("txtName")
Dim country As String = Request.Form("txtCountry")
' Dim category As String = Request.Form("Categoryddl")
' Categorym.Text = Request.Form("Categoryddl")
' Names.Text = name
' Countrys.Text = country
GridView1.UseAccessibleHeader = True
GridView1.HeaderRow.TableSection = TableRowSection.TableHeader
End Sub
Screenshot
