Post
Ask Question

Pass GridView Values to DetailsView In ASP.NET

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">  
  4.   
  5.     <head runat="server">  
  6.         <title></title>  
  7.         <style type="text/css">  
  8.             .style1 {  
  9.                 width: 229px;  
  10.             }  
  11.               
  12.             .style2 {  
  13.                 width: 24px;  
  14.             }  
  15.               
  16.             .style3 {  
  17.                 text-decoration: underline;  
  18.             }  
  19.         </style>  
  20.     </head>  
  21.   
  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>  
  104.   
  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.

 


Similar Articles