We use SQL datasource to bind GridView and DetailView.

Initial chamber

Step 1: Open Visual Studio 2010 and create an empty website. Give a suitable name gridview_demo.

Step 2: In Solution Explorer you will get your empty website, then add a Web Form and SQL Server Database. Here are the steps:

For Web Form

gridview_demo (Your Empty Website) - Right Click , Add New Item, then Web Form. Name it gridviewid_demo.aspx.

For SQL Server Database:

gridview_demo (Your Empty Website) - Right Click, Add New Item, then SQL Server Database. Add Database inside the App_Data_folder.

Database chamber

Step 3: In Server Explorer, click on your database Database.mdf - Tables, Add New Table and form a table like this:

Table - tbl_data and don’t forget to make ID as IS Identity - True

design

Design chamber

Step 4: Now make some design for your application by going to gridviewid_demo.aspx and try the code like this:

Gridviewid_demo.aspx

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head runat="server">
  6. <title></title>
  7. <style type="text/css">
  8. .style1 {
  9. width: 229px;
  10. }
  12. .style2 {
  13. width: 24px;
  14. }
  16. .style3 {
  17. text-decoration: underline;
  18. }
  19. </style>
  20. </head>
  22. <body>
  23. <form id="form1" runat="server">
  24. <div class="style3"> <strong>GridView to DetailsView<br />
  25. </strong> </div>
  26. <table style="width:100%;">
  27. <tr>
  28. <td class="style1">
  29. <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT [id], [name] FROM [tbl_data]"></asp:SqlDataSource>
  30. </td>
  31. <td class="style2"> </td>
  32. <td> </td>
  33. </tr>
  34. <tr>
  35. <td class="style1">
  36. <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="id" DataSourceID="SqlDataSource2" CellPadding="4" ForeColor="#333333" GridLines="None">
  37. <AlternatingRowStyle BackColor="White" />
  38. <Columns>
  39. <asp:BoundField DataField="id" HeaderText="ID" InsertVisible="False" ReadOnly="True" SortExpression="id" />
  40. <asp:BoundField DataField="name" HeaderText="Name" SortExpression="name" />
  41. <asp:CommandField ShowSelectButton="True" /> </Columns>
  42. <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
  43. <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
  44. <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
  45. <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
  46. <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
  47. <SortedAscendingCellStyle BackColor="#FDF5AC" />
  48. <SortedAscendingHeaderStyle BackColor="#4D0000" />
  49. <SortedDescendingCellStyle BackColor="#FCF6C0" />
  50. <SortedDescendingHeaderStyle BackColor="#820000" /> </asp:GridView>
  51. </td>
  52. <td class="style2"> </td>
  53. <td> </td>
  54. </tr>
  55. <tr>
  56. <td class="style1">
  57. <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" DeleteCommand="DELETE FROM [tbl_data] WHERE [id] = @id" InsertCommand="INSERT INTO [tbl_data] ([name], [age], [phone], [email], [city]) VALUES (@name, @age, @phone, @email, @city)" SelectCommand="SELECT [id], [name], [age], [phone], [email], [city] FROM [tbl_data] WHERE ([id] = @id)" UpdateCommand="UPDATE [tbl_data] SET [name] = @name, [age] = @age, [phone] = @phone, [email] = @email, [city] = @city WHERE [id] = @id">
  58. <DeleteParameters>
  59. <asp:Parameter Name="id" Type="Int32" /> </DeleteParameters>
  60. <InsertParameters>
  61. <asp:Parameter Name="name" Type="String" />
  62. <asp:Parameter Name="age" Type="Decimal" />
  63. <asp:Parameter Name="phone" Type="Decimal" />
  64. <asp:Parameter Name="email" Type="String" />
  65. <asp:Parameter Name="city" Type="String" /> </InsertParameters>
  66. <SelectParameters>
  67. <asp:ControlParameter ControlID="GridView1" Name="id" PropertyName="SelectedValue" Type="Int32" /> </SelectParameters>
  68. <UpdateParameters>
  69. <asp:Parameter Name="name" Type="String" />
  70. <asp:Parameter Name="age" Type="Decimal" />
  71. <asp:Parameter Name="phone" Type="Decimal" />
  72. <asp:Parameter Name="email" Type="String" />
  73. <asp:Parameter Name="city" Type="String" />
  74. <asp:Parameter Name="id" Type="Int32" /> </UpdateParameters>
  75. </asp:SqlDataSource>
  76. </td>
  77. <td class="style2"> </td>
  78. <td> </td>
  79. </tr>
  80. <tr>
  81. <td class="style1">
  82. <asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False" DataKeyNames="id" DataSourceID="SqlDataSource1" Height="50px" Width="125px" CellPadding="4" ForeColor="#333333" GridLines="None">
  83. <AlternatingRowStyle BackColor="White" />
  84. <CommandRowStyle BackColor="#FFFFC0" Font-Bold="True" />
  85. <FieldHeaderStyle BackColor="#FFFF99" Font-Bold="True" />
  86. <Fields>
  87. <asp:BoundField DataField="id" HeaderText="ID" InsertVisible="False" ReadOnly="True" SortExpression="id" />
  88. <asp:BoundField DataField="name" HeaderText="Name" SortExpression="name" />
  89. <asp:BoundField DataField="age" HeaderText="Age" SortExpression="age" />
  90. <asp:BoundField DataField="phone" HeaderText="Phone" SortExpression="phone" />
  91. <asp:BoundField DataField="email" HeaderText="Email" SortExpression="email" />
  92. <asp:BoundField DataField="city" HeaderText="City" SortExpression="city" /> </Fields>
  93. <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
  94. <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
  95. <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
  96. <RowStyle BackColor="#FFFBD6" ForeColor="#333333" /> </asp:DetailsView>
  97. </td>
  98. <td class="style2"> </td>
  99. <td> </td>
  100. </tr>
  101. </table>
  102. </form>
  103. </body>
  105. </html>
Alternative method: [For GridView]

new data

Data Source Configuration Wizard Window

database

Configure Data Source

new connection

table

test query

Alternative method: [For DetailsView]

Alternative method

All other process for DetailsView is same as that of above GridView. Just make sure to change these settings.

settings

detailsview

Finish this whole process; you will see your two SQL DataSource, one for GridView and other for DetailsView.

Output chamber

gridview result

Output

Hope you like it. Thank you for reading.