How to Create Detailsview Without SqlDataSource in Asp.Net


Detailsview is nothing but we can see an each record in details at a time in Webpage or in Detailsview. Here we will create Detailsview without SqlDataSource. Using SqlDataSource directly we can Bind Detailsview using ConnectionString.

Step 1: Create table in Database and Fill Data.

CREATE TABLE [dbo].[Customers](
      [ContactName] [varchar](20) NOT NULL,
      [City] [varchar](20) NOT NULL,
      [PostalCode] [int] NOT NULL,
      [Country] [varchar](20) NOT NULL,
      [Phone] [bigint] NOT NULL,
      [Fax] [bigint] NOT NULL,
      [CustomerId] [int] IDENTITY(1,1) NOT 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

Step 2: Design your Webpage like below.

<div>
   <asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="false" AllowPaging="true" OnPageIndexChanging="OnPageIndexChanging" Height="195px" Width="228px">
<Fields>
<asp:BoundField DataField="CustomerId" HeaderText="Customer Id" HeaderStyle-CssClass="header" />
<asp:BoundField DataField="ContactName" HeaderText="ContactName" HeaderStyle-CssClass="header" />
<asp:BoundField DataField="Country" HeaderText="Country" HeaderStyle-CssClass="header" />
<asp:BoundField DataField="City" HeaderText="City" HeaderStyle-CssClass="header" />
<asp:BoundField DataField="Phone" HeaderText="Phone" HeaderStyle-CssClass="header" />
<asp:BoundField DataField="PostalCode" HeaderText="PostalCode" HeaderStyle-CssClass="header" />
</Fields>
</asp:DetailsView>
</div>

Step 3: Now assign Some StyleSheet for Design in Detailsview.

<style type="text/css">
body
{font-family: Arial; font-size: 10pt; }
table{border: 1px solid #ccc; border-collapse: collapse; background-color: #fff; }
table .header{background-color: #B8DBFD; color: #333; font-weight: bold; }
table th, table td{padding: 5px; border: 1px solid #ccc; }
table, table table td{border: 0px solid #ccc; }
</style>

Now Create ConnectionString in Web.Config File so We can create Connection Where we want.

<connectionStrings>
    <add name="DBCS" connectionString="Data Source=ServerName;Initial Catalog=DatabaseName;Integrated Security=True" providerName="System.Data.SqlClient" />
</connectionStrings>

Step 4: Now Go to Code behind and Code for bind Detailsview in Page_load () event.

protected void Page_Load(object sender, EventArgs e)
        {
            if (!this.IsPostBack)
            {
                this.BindDetailsView();
            }
        }

Create BindDetailsview Method.

private void BindDetailsView()
{
string constr = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
            using (SqlConnection con = new SqlConnection(constr))
            {
                using (SqlCommand cmd = new SqlCommand("SELECT * FROM Customers"))
                {
                    using (SqlDataAdapter sda = new SqlDataAdapter())
                    {
                        cmd.Connection = con;
                        sda.SelectCommand = cmd;
                        using (DataTable dt = new DataTable())
                        {
                            sda.Fill(dt);
                            DetailsView1.DataSource = dt;
                            DetailsView1.DataBind();
                        }
                    }
                }
            }
}

Here we have ConfigurationManager.ConnectionString is nothing but a ConnectionString which is coming from Web.Config File you can see in Web.Config file.

Step 5: Now Generate OnPageIndexChanging So when we change PageIndex of Detailsview then we can see Page Index in Detailsview.

protected void OnPageIndexChanging(object sender, DetailsViewPageEventArgs e)
{
            DetailsView1.PageIndex = e.NewPageIndex;
            this.BindDetailsView();
}

Step 6: Now check in your browser and See Detailsview with Created Records. 
 

Related Posts

Previous
Next Post »

Thanks for comments.....