Post
Ask Question

Dynamically Bind DetailsView Control In ASP.NET From Database - Part Two

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,

Step 1

Create database table in SQL Server 2014.
  1. CREATE TABLE [dbo].[Customers](  
  2.     [CustomerID] [int] IDENTITY(1,1) NOT NULL,  
  3.     [CustomerName] [nvarchar](50) NULL,  
  4.     [Gender] [char](10) NULL,  
  5.     [City] [nvarchar](50) NULL,  
  6.     [State] [nvarchar](50) NULL,  
  7.     [Country] [nvarchar](50) NULL,  
  8.  CONSTRAINT [PK_Customers] PRIMARY KEY CLUSTERED   
  9. (  
  10.     [CustomerID] ASC  
  11. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]  
  12. ) ON [PRIMARY]  
  13.   
  14. GO  
  15.   
  16. SET ANSI_PADDING OFF  
  17. GO  
  1. CREATE PROCEDURE [dbo].[spGetAllCustomers]  
  2. AS  
  3. BEGIN  
  4. SELECT CustomerID,CustomerName,Gender,City,State,Country from [dbo].[Customers]  
  5. 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

ASP.NET 

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

ASP.NET

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

ASP.NET

Step 3

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

  1. <connectionStrings>  
  2.   <add name="DBCS" connectionString="data source=DESKTOP-M021QJH\SQLEXPRESS; database=DemoDB; integrated security=true;"/>  
  3. </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

ASP.NET

Step 5

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

  1. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">  
  2. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  3. <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.

  1. <body>  
  2.     <form id="form1" runat="server">  
  3.         <div class="container py-4">  
  4.             <h5 class="text-center text-uppercase">DetailsView control in asp.net</h5>  
  5.             <asp:DetailsView ID="DetailsView1" AllowPaging="true" AutoGenerateRows="false" CssClass="table table-bordered" runat="server" OnPageIndexChanging="DetailsView1_PageIndexChanging">  
  6.                 <Fields>  
  7.                     <asp:BoundField DataField="CustomerID" HeaderText="Customer ID" />  
  8.                     <asp:BoundField DataField="CustomerName" HeaderText="Customer Name" />  
  9.                     <asp:BoundField DataField="Gender" HeaderText="Gender" />  
  10.                     <asp:BoundField DataField="City" HeaderText="City" />  
  11.                     <asp:BoundField DataField="State" HeaderText="State" />  
  12.                     <asp:BoundField DataField="Country" HeaderText="Country" />  
  13.                 </Fields>  
  14.             </asp:DetailsView>  
  15.         </div>  
  16.     </form>  
  17. </body>  

Complete web form code

  1. <!DOCTYPE html>  
  2.   
  3. <html>  
  4. <head runat="server">  
  5.     <title>DetailsView</title>  
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">  
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>  
  9. </head>  
  10. <body>  
  11.     <form id="form1" runat="server">  
  12.         <div class="container py-4">  
  13.             <h5 class="text-center text-uppercase">DetailsView control in asp.net</h5>  
  14.             <asp:DetailsView ID="DetailsView1" AllowPaging="true" AutoGenerateRows="false" CssClass="table table-bordered table-striped table-hover" runat="server" OnPageIndexChanging="DetailsView1_PageIndexChanging">  
  15.                 <Fields>  
  16.                     <asp:BoundField DataField="CustomerID" HeaderText="Customer ID" />  
  17.                     <asp:BoundField DataField="CustomerName" HeaderText="Customer Name" />  
  18.                     <asp:BoundField DataField="Gender" HeaderText="Gender" />  
  19.                     <asp:BoundField DataField="City" HeaderText="City" />  
  20.                     <asp:BoundField DataField="State" HeaderText="State" />  
  21.                     <asp:BoundField DataField="Country" HeaderText="Country" />  
  22.                 </Fields>  
  23.             </asp:DetailsView>  
  24.         </div>  
  25.     </form>  
  26. </body>  
  27. </html>  

Step 7

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

  1. using System;  
  2. using System.Configuration;  
  3. using System.Data;  
  4. using System.Data.SqlClient;  
  5.   
  6. namespace BindDataControl_Demo  
  7. {  
  8.     public partial class DetailsView : System.Web.UI.Page  
  9.     {  
  10.         protected void Page_Load(object sender, EventArgs e)  
  11.         {  
  12.             if (!IsPostBack)  
  13.             {  
  14.                 BindDetailsView();  
  15.             }  
  16.         }  
  17.   
  18.         private void BindDetailsView()  
  19.         {  
  20.             string CS = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;  
  21.             using (SqlConnection con = new SqlConnection(CS))  
  22.             {  
  23.                 SqlCommand cmd = new SqlCommand("spGetAllCustomers", con);  
  24.                 cmd.CommandType = CommandType.StoredProcedure;  
  25.                 SqlDataAdapter sda = new SqlDataAdapter(cmd);  
  26.                 con.Open();   
  27.                 DataTable dt = new DataTable();  
  28.                 sda.Fill(dt);  
  29.                 DetailsView1.DataSource = dt;  
  30.                 DetailsView1.DataBind();  
  31.             }  
  32.   
  33.         }  
  34.   
  35.         protected void DetailsView1_PageIndexChanging(object sender, System.Web.UI.WebControls.DetailsViewPageEventArgs e)  
  36.         {  
  37.             DetailsView1.PageIndex = e.NewPageIndex;  
  38.             this.BindDetailsView();  
  39.         }  
  40.     }  
  41. }  

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.


Similar Articles