Introduction:
DetailsView control is a
data-bound control that display or renders a single record at a time. Details
view data control supports pagination, so that we can navigate between records.
We can insert, update and delete the record using detail view data control. Generally
it is implemented through <table> HTML tag.
Description:
In previous articles I have explained Error: RegEx: Validate Email Id on server Side using RegEx in ASP.NET And WebForms UnobtrusiveValidationMode requires a ScriptResourceMapping for jQuery And Asp.Net: Create Error log table in SQL database in ASP.NET application using C#.
In this article I will explain how
to display data in DetailsView data control.
Demo:
Click on Image to Enlarge
Steps to display Data in
DetailsView:
1. Create webpage in your application and add details view control.
2. Add Bound fields to DetailsView Control. Set Datafield name as given in table in
sql.
3. Write code in code behind file to bind Details view to
database.
Implementation:
Create table in database:
Create Table “Student_Info” in Database “Blog” and Enter some data to
display.
Column Name
|
DataType
|
Student_Id
|
Int
|
Student_name
|
Varchar(100)
|
Age
|
Int
|
Class
|
Varchar(100)
|
Now design your web page:
Place Detailsview control on
webpage. Customize it as given below:
<fieldset style="width:370px"><legend>Display
Data in Detail View Control</legend>
<br />
<asp:DetailsView ID="DetailsView1" runat="Server" GridLines="None" Width="350px" AllowPaging="True" AutoGenerateRows="False" DataKeyNames="Student_id" OnPageIndexChanging="DetailsView1_PageIndexChanging" >
<FooterStyle BackColor="#006e90" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#f2f2f2" ForeColor="#000" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<FieldHeaderStyle BackColor="#f2f2f2" Font-Bold="True" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<Fields>
<asp:BoundField DataField="Student_name" HeaderText="Student Name" />
<asp:BoundField DataField="Age" HeaderText="Age" />
<asp:BoundField DataField="Class" HeaderText="Class" />
</Fields>
</asp:DetailsView>
<br />
</fieldset>
|
Asp.NET Code:
Now write following code to Bind Details View.
In
C#:
Add
Following Namespaces:
Using System.Data;
Using System.Data.SqlClient;
Using System.Configuration;
|
Write
following code:
public partial class DetailView
: System.Web.UI.Page
{
SqlConnection
con = new SqlConnection(ConfigurationManager.ConnectionStrings["con"].ConnectionString);
protected void
Page_Load(object sender, EventArgs e)
{
if(!IsPostBack)
{
Bind_Detailview();
}
}
public void
Bind_Detailview()
{
if (con.State == ConnectionState.Closed)
{
con.Open();
}
SqlCommand
cmd = new SqlCommand("select * from student_info", con);
SqlDataAdapter
adpData = new SqlDataAdapter(cmd);
DataTable
dt = new DataTable();
adpData.Fill(dt);
DetailsView1.DataSource = dt;
DetailsView1.DataBind();
con.Close();
}
protected void
DetailsView1_PageIndexChanging(object sender, DetailsViewPageEventArgs e)
{
DetailsView1.PageIndex = e.NewPageIndex;
Bind_Detailview();
}
}
|
In Vb.Net
Add Following Namespaces:
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Write
following code:
Partial Public Class DetailView
Inherits
System.Web.UI.Page
Private
con As New SqlConnection(ConfigurationManager.ConnectionStrings("con").ConnectionString)
Protected Sub
Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not
IsPostBack Then
Bind_Detailview()
End If
End Sub
Public Sub
Bind_Detailview()
If con.State = ConnectionState.Closed
Then
con.Open()
End If
Dim
cmd As New SqlCommand("select * from student_info", con)
Dim
adpData As New SqlDataAdapter(cmd)
Dim
dt As New DataTable()
adpData.Fill(dt)
DetailsView1.DataSource = dt
DetailsView1.DataBind()
con.Close()
End Sub
Protected Sub
DetailsView1_PageIndexChanging(sender As Object, e As DetailsViewPageEventArgs) Handles DetailsView1.PageIndexChanging
DetailsView1.PageIndex = e.NewPageIndex
Bind_Detailview()
End Sub
End Class
|
