Hi Fresher,
I have created sample that full fill your requirement. So ypu need to change as per your html.
If you want more customization with bootstrap then you have to use custom paging. For this you can refer below article.
For this sample I have used of Northwind database that you can download using the link given below.
Download Northwind Database
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
table th
{
background-color: #F7F7F7;
color: #333;
font-weight: bold;
}
table th, table td
{
padding: 5px;
border-color: #ccc;
}
.pagination-ys
{
padding-left: 0;
margin: 20px 0;
border-radius: 4px;
}
.pagination-ys table > tbody > tr > td
{
display: inline;
}
.pagination-ys table > tbody > tr > td > a, .pagination-ys table > tbody > tr > td > span
{
position: relative;
float: left;
padding: 8px 12px;
line-height: 1.42857143;
text-decoration: none;
color: #009BEE;
background-color: #ffffff;
border: 1px solid #dddddd;
margin-left: -1px;
}
.pagination-ys table > tbody > tr > td > span
{
position: relative;
float: left;
padding: 8px 12px;
line-height: 1.42857143;
text-decoration: none;
margin-left: -1px;
z-index: 2;
color: #aea79f;
background-color: #009BEE;
border-color: #dddddd;
cursor: default;
}
.pagination-ys table > tbody > tr > td:first-child > a, .pagination-ys table > tbody > tr > td:first-child > span
{
margin-left: 0;
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
}
.pagination-ys table > tbody > tr > td:last-child > a, .pagination-ys table > tbody > tr > td:last-child > span
{
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
}
.pagination-ys table > tbody > tr > td > a:hover, .pagination-ys table > tbody > tr > td > span:hover, .pagination-ys table > tbody > tr > td > a:focus, .pagination-ys table > tbody > tr > td > span:focus
{
color: #FFFFFF;
background-color: #eeeeee;
border-color: #dddddd;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
if ($('tr[class="pagination-ys"]').find('tr').find($('td:first-child')).find('a').html() == '...') {
$('tr[class="pagination-ys"]').find('tr').find($('td:first-child')).find('a').html('Previous');
}
if ($('tr[class="pagination-ys"]').find('tr').find($('td:last-child')).find('a').html() == '...') {
$('tr[class="pagination-ys"]').find('tr').find($('td:last-child')).find('a').html('Next')
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:FormView ID="fvCustomers" runat="server" DataKeyNames="CustomerID" AllowPaging="true"
OnItemDeleting="OnItemDeleting" OnPageIndexChanging="OnPageIndexChanging" OnItemUpdating="OnItemUpdating"
OnItemInserted="OnItemInserted" OnItemInserting="OnItemInserting" OnItemUpdated="OnItemUpdated"
OnModeChanging="OnModeChanging">
<ItemTemplate>
<table>
<tr>
<td align="right">
<b>Customer ID:</b>
</td>
<td>
<%# Eval("CustomerID")%>
</td>
</tr>
<tr>
<td align="right">
<b>Company Name:</b>
</td>
<td>
<%# Eval("CompanyName")%>
</td>
</tr>
<tr>
<td align="right">
<b>Contact Name:</b>
</td>
<td>
<%# Eval("ContactName")%>
</td>
</tr>
<tr>
<td align="right">
<b>Address:</b>
</td>
<td>
<%# Eval("Address")%>
</td>
</tr>
<tr>
<td align="right">
<b>City:</b>
</td>
<td>
<%# Eval("City")%>
</td>
</tr>
<tr>
<td colspan="2">
<asp:LinkButton ID="btnEdit" Text="Edit" CommandName="Edit" runat="server" />
<asp:LinkButton ID="btnNew" Text="New" CommandName="New" runat="server" />
<asp:LinkButton ID="btnDelete" Text="Delete" CommandName="Delete" runat="server" />
</td>
</tr>
</table>
</ItemTemplate>
<EditItemTemplate>
<table>
<tr>
<td align="right">
<b>Customer ID:</b>
</td>
<td>
<asp:Label ID="txtCustomerID" Text='<%# Bind("CustomerID") %>' runat="Server" />
</td>
</tr>
<tr>
<td align="right">
<b>Company Name:</b>
</td>
<td>
<asp:TextBox ID="txtCompanyName" Text='<%# Bind("CompanyName") %>' runat="Server" />
</td>
</tr>
<tr>
<td align="right">
<b>Contact Name:</b>
</td>
<td>
<asp:TextBox ID="txtContactName" Text='<%# Bind("ContactName") %>' runat="Server" />
</td>
</tr>
<tr>
<td align="right">
<b>Address:</b>
</td>
<td>
<asp:TextBox ID="txtAddress" Text='<%# Bind("Address") %>' runat="Server" />
</td>
</tr>
<tr>
<td align="right">
<b>City:</b>
</td>
<td>
<asp:TextBox ID="txtCity" Text='<%# Bind("City") %>' runat="Server" />
</td>
</tr>
<tr>
<td colspan="2">
<asp:LinkButton ID="btnUpdate" Text="Update" CommandName="Update" runat="server" />
<asp:LinkButton ID="btnUpdateCancel" Text="Cancel" CommandName="Cancel" runat="server" />
</td>
</tr>
</table>
</EditItemTemplate>
<InsertItemTemplate>
<table>
<tr>
<td align="right">
<b>Customer ID:</b>
</td>
<td>
<asp:TextBox ID="txtCustomerID" Text='<%# Bind("CustomerID") %>' runat="Server" />
</td>
</tr>
<tr>
<td align="right">
<b>Company Name:</b>
</td>
<td>
<asp:TextBox ID="txtCompanyName" Text='<%# Bind("CompanyName") %>' runat="Server" />
</td>
</tr>
<tr>
<td align="right">
<b>Contact Name:</b>
</td>
<td>
<asp:TextBox ID="txtContactName" Text='<%# Bind("ContactName") %>' runat="Server" />
</td>
</tr>
<tr>
<td align="right">
<b>Address:</b>
</td>
<td>
<asp:TextBox ID="txtAddress" Text='<%# Bind("Address") %>' runat="Server" />
</td>
</tr>
<tr>
<td align="right">
<b>City:</b>
</td>
<td>
<asp:TextBox ID="txtCity" Text='<%# Bind("City") %>' runat="Server" />
</td>
</tr>
<tr>
<td colspan="2">
<asp:LinkButton ID="btnInsert" Text="Insert" CommandName="Insert" runat="server" />
<asp:LinkButton ID="btnInsertCancel" Text="Cancel" CommandName="Cancel" runat="server" />
</td>
</tr>
</table>
</InsertItemTemplate>
<PagerStyle CssClass="pagination-ys" />
<PagerSettings Visible="true" NextPageText="Next" PreviousPageText="Previous" Mode="Numeric"
PageButtonCount="5" Position="Bottom" />
</asp:FormView>
</form>
</body>
</html>
C#
string connStr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
SqlDataAdapter sqlda = new SqlDataAdapter();
SqlCommand com = new SqlCommand();
DataTable dt;
private void BindCustomers()
{
SqlConnection conn = new SqlConnection(connStr);
dt = new DataTable();
com.Connection = conn;
com.CommandText = "SELECT CustomerID,CompanyName,ContactName,Address,City FROM NorthwindCustomers";
sqlda = new SqlDataAdapter(com);
sqlda.Fill(dt);
fvCustomers.DataSource = dt;
fvCustomers.DataBind();
}
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindCustomers();
}
}
protected void OnItemInserting(object sender, FormViewInsertEventArgs e)
{
TextBox customerID = (TextBox)fvCustomers.FindControl("txtCustomerID");
TextBox companyName = (TextBox)fvCustomers.FindControl("txtCompanyName");
TextBox contactName = (TextBox)fvCustomers.FindControl("txtContactName");
TextBox address = (TextBox)fvCustomers.FindControl("txtAddress");
TextBox city = (TextBox)fvCustomers.FindControl("txtCity");
SqlConnection conn = new SqlConnection(connStr);
com.Connection = conn;
com.CommandText = "INSERT INTO NorthwindCustomers (CustomerID,CompanyName,ContactName,Address,City) Values('" + customerID.Text + "','" + companyName.Text + "', '" + contactName.Text + "', '" + address.Text + "', '" + city.Text + "')";
conn.Open();
com.ExecuteNonQuery();
Response.Write("Record inserted successfully");
BindCustomers();
conn.Close();
}
protected void OnItemInserted(object sender, FormViewInsertedEventArgs e)
{
fvCustomers.ChangeMode(FormViewMode.ReadOnly);
}
protected void OnItemUpdating(object sender, FormViewUpdateEventArgs e)
{
DataKey key = fvCustomers.DataKey;
TextBox companyName = (TextBox)fvCustomers.FindControl("txtCompanyName");
TextBox contactName = (TextBox)fvCustomers.FindControl("txtContactName");
TextBox address = (TextBox)fvCustomers.FindControl("txtAddress");
TextBox city = (TextBox)fvCustomers.FindControl("txtCity");
SqlConnection conn = new SqlConnection(connStr);
com.Connection = conn;
com.CommandText = "UPDATE NorthwindCustomers SET CompanyName ='" + companyName.Text + "',ContactName ='" + contactName.Text + "',Address ='" + address.Text + "',City ='" + city.Text + "' WHERE CustomerID = '" + key.Value.ToString() + "'";
conn.Open();
com.ExecuteNonQuery();
Response.Write("Record updated successfully");
BindCustomers();
conn.Close();
}
protected void OnItemUpdated(object sender, FormViewUpdatedEventArgs e)
{
fvCustomers.ChangeMode(FormViewMode.ReadOnly);
}
protected void OnItemDeleting(object sender, FormViewDeleteEventArgs e)
{
DataKey key = fvCustomers.DataKey;
SqlConnection conn = new SqlConnection(connStr);
com.Connection = conn;
com.CommandText = "DELETE FROM NorthwindCustomers WHERE CustomerID = '" + key.Value.ToString() + "'";
conn.Open();
com.ExecuteNonQuery();
conn.Close();
Response.Write("Record deleted successfully");
BindCustomers();
}
protected void OnPageIndexChanging(object sender, FormViewPageEventArgs e)
{
fvCustomers.PageIndex = e.NewPageIndex;
BindCustomers();
}
protected void OnModeChanging(object sender, FormViewModeEventArgs e)
{
fvCustomers.ChangeMode(e.NewMode);
BindCustomers();
}
VB.Net
Private connStr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Private sqlda As New SqlDataAdapter()
Private com As New SqlCommand()
Private dt As DataTable
Private Sub BindCustomers()
Dim conn As New SqlConnection(connStr)
dt = New DataTable()
com.Connection = conn
com.CommandText = "SELECT CustomerID,CompanyName,ContactName,Address,City FROM NorthwindCustomers"
sqlda = New SqlDataAdapter(com)
sqlda.Fill(dt)
fvCustomers.DataSource = dt
fvCustomers.DataBind()
End Sub
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not IsPostBack Then
BindCustomers()
End If
End Sub
Protected Sub OnItemInserting(sender As Object, e As FormViewInsertEventArgs)
Dim customerID As TextBox = DirectCast(fvCustomers.FindControl("txtCustomerID"), TextBox)
Dim companyName As TextBox = DirectCast(fvCustomers.FindControl("txtCompanyName"), TextBox)
Dim contactName As TextBox = DirectCast(fvCustomers.FindControl("txtContactName"), TextBox)
Dim address As TextBox = DirectCast(fvCustomers.FindControl("txtAddress"), TextBox)
Dim city As TextBox = DirectCast(fvCustomers.FindControl("txtCity"), TextBox)
Dim conn As New SqlConnection(connStr)
com.Connection = conn
com.CommandText = "INSERT INTO NorthwindCustomers (CustomerID,CompanyName,ContactName,Address,City) Values('" + customerID.Text + "','" + companyName.Text + "', '" + contactName.Text + "', '" + address.Text + "', '" + city.Text + "')"
conn.Open()
com.ExecuteNonQuery()
Response.Write("Record inserted successfully")
BindCustomers()
conn.Close()
End Sub
Protected Sub OnItemInserted(sender As Object, e As FormViewInsertedEventArgs)
fvCustomers.ChangeMode(FormViewMode.[ReadOnly])
End Sub
Protected Sub OnItemUpdating(sender As Object, e As FormViewUpdateEventArgs)
Dim key As System.Web.UI.WebControls.DataKey = fvCustomers.DataKey
Dim companyName As TextBox = DirectCast(fvCustomers.FindControl("txtCompanyName"), TextBox)
Dim contactName As TextBox = DirectCast(fvCustomers.FindControl("txtContactName"), TextBox)
Dim address As TextBox = DirectCast(fvCustomers.FindControl("txtAddress"), TextBox)
Dim city As TextBox = DirectCast(fvCustomers.FindControl("txtCity"), TextBox)
Dim conn As New SqlConnection(connStr)
com.Connection = conn
com.CommandText = "UPDATE NorthwindCustomers SET CompanyName ='" + companyName.Text + "',ContactName ='" + contactName.Text + "',Address ='" + address.Text + "',City ='" + city.Text + "' WHERE CustomerID = '" + key.Value.ToString() + "'"
conn.Open()
com.ExecuteNonQuery()
Response.Write("Record updated successfully")
BindCustomers()
conn.Close()
End Sub
Protected Sub OnItemUpdated(sender As Object, e As FormViewUpdatedEventArgs)
fvCustomers.ChangeMode(FormViewMode.[ReadOnly])
End Sub
Protected Sub OnItemDeleting(sender As Object, e As FormViewDeleteEventArgs)
Dim key As System.Web.UI.WebControls.DataKey = fvCustomers.DataKey
Dim conn As New SqlConnection(connStr)
com.Connection = conn
com.CommandText = "DELETE FROM NorthwindCustomers WHERE CustomerID = '" + key.Value.ToString() + "'"
conn.Open()
com.ExecuteNonQuery()
conn.Close()
Response.Write("Record deleted successfully")
BindCustomers()
End Sub
Protected Sub OnPageIndexChanging(sender As Object, e As FormViewPageEventArgs)
fvCustomers.PageIndex = e.NewPageIndex
BindCustomers()
End Sub
Protected Sub OnModeChanging(sender As Object, e As FormViewModeEventArgs)
fvCustomers.ChangeMode(e.NewMode)
BindCustomers()
End Sub
Screenshot
