Dynamically Bind DetailsView Control In ASP.NET From Database

Introduction

The DetailsView control allows you to edit, delete, and insert records. It displays the values of a single record from a data source in a table, where each data row represents a field of the record. In this article, I will demonstrate how to dynamically bind DetailsView control in ASP.NET from the database,

Dynamically Bind DataList Control in Asp.Net from Database - Part One

Step 1

Create database table in SQL Server 2014.

CREATE TABLE [dbo].[Customers](
[CustomerID] [int] IDENTITY(1,1) NOT NULL,
[CustomerName] [nvarchar](50) NULL,
[Gender] [char](10) NULL,
[City] [nvarchar](50) NULL,
[State] [nvarchar](50) NULL,
[Country] [nvarchar](50) NULL,
CONSTRAINT [PK_Customers] PRIMARY KEY CLUSTERED
(
[CustomerID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
SET ANSI_PADDING OFF
GO

CREATE PROCEDURE [dbo].[spGetAllCustomers]
AS
BEGIN
SELECT CustomerID,CustomerName,Gender,City,State,Country from [dbo].[Customers]
END

Screenshot database table

ASP.NET

Step 2

Open Visual Studio 2015, click on New Project, and create an empty web application project.

Screenshot for creating new project 1

After clicking on New Project, one window will appear. Select Web from the left panel, choose ASP.NET Web Application and give a meaningful name to your project, then click on OK as shown in below screenshot.

Screenshot for creating new project 2

After clicking on OK, one more window will appear. Choose Empty, check on Web Forms checkbox, and click on OK as shown in the below screenshot.

Screenshot for creating new project 3

Step 3

Double click on webconfig file and database connections. Write the following line of code.

<connectionStrings>
<add name="DBCS" connectionString="data source=DESKTOP-M021QJH\SQLEXPRESS; database=DemoDB; integrated security=true;"/>
</connectionStrings>

Step 4

Add web form in your project. Right click on the project, select Add, choose Web Form, and click.

Screenshot adding web form 1

ASP.NET

After clicking on the web form, one window will appear. Give a name to the web form, such as DetailsView or any meaningful name. Click on OK. The web form will be added to the project.

Screenshot adding web form 2

Step 5

Add script and styles of bootstrap in head section of web form.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

Step 6

Drag and drop a DetailsView control on web form. Design DetailsView control.

<body>
<form id="form1" runat="server">
<div class="container py-4">
<h5 class="text-center text-uppercase">DetailsView control in asp.net</h5>
<asp:DetailsView ID="DetailsView1" AllowPaging="true" AutoGenerateRows="false" CssClass="table table-bordered" runat="server" OnPageIndexChanging="DetailsView1_PageIndexChanging">
<Fields>
<asp:BoundField DataField="CustomerID" HeaderText="Customer ID" />
<asp:BoundField DataField="CustomerName" HeaderText="Customer Name" />
<asp:BoundField DataField="Gender" HeaderText="Gender" />
<asp:BoundField DataField="City" HeaderText="City" />
<asp:BoundField DataField="State" HeaderText="State" />
<asp:BoundField DataField="Country" HeaderText="Country" />
</Fields>
</asp:DetailsView>
</div>
</form>
</body>

Complete web form code

<!DOCTYPE html>
<html>
<head runat="server">
<title>DetailsView</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div class="container py-4">
<h5 class="text-center text-uppercase">DetailsView control in asp.net</h5>
<asp:DetailsView ID="DetailsView1" AllowPaging="true" AutoGenerateRows="false" CssClass="table table-bordered table-striped table-hover" runat="server" OnPageIndexChanging="DetailsView1_PageIndexChanging">
<Fields>
<asp:BoundField DataField="CustomerID" HeaderText="Customer ID" />
<asp:BoundField DataField="CustomerName" HeaderText="Customer Name" />
<asp:BoundField DataField="Gender" HeaderText="Gender" />
<asp:BoundField DataField="City" HeaderText="City" />
<asp:BoundField DataField="State" HeaderText="State" />
<asp:BoundField DataField="Country" HeaderText="Country" />
</Fields>
</asp:DetailsView>
</div>
</form>
</body>
</html>

Step 7

Right click and view web form code. Write the following code.

using System;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
namespace BindDataControl_Demo
{
public partial class DetailsView : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindDetailsView();
}
}
private void BindDetailsView()
{
string CS = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
using (SqlConnection con = new SqlConnection(CS))
{
SqlCommand cmd = new SqlCommand("spGetAllCustomers", con);
cmd.CommandType = CommandType.StoredProcedure;
SqlDataAdapter sda = new SqlDataAdapter(cmd);
con.Open();
DataTable dt = new DataTable();
sda.Fill(dt);
DetailsView1.DataSource = dt;
DetailsView1.DataBind();
}
}
protected void DetailsView1_PageIndexChanging(object sender, System.Web.UI.WebControls.DetailsViewPageEventArgs e)
{
DetailsView1.PageIndex = e.NewPageIndex;
this.BindDetailsView();
}
}
}

Step 8

Run the project by pressing ctrl+F5.

Screenshot

Conclusion

In this article, I have explained how to dynamically bind DetailsView control from the database step by step. I hope it will help you.

1 Comment

Join the conversation! Your thoughts help the community grow.

Aktham Mahmoud7y ago
Hi, can you help me in describe a point please; first point in details view are you indicated to (Item_inserted) property.Second point: can we use Sql_Data source to bind data without details view data bind...