Using QueryString to get details of selected Employee in GridView
In this article we are going to focus on how to get the details of selected employee from GridView using Querystring and display the Details in another page. We will also format the Date to display only the date part without time by using Template Fields in Details View.
In this article we are going to focus on how to get the details of selected employee from GridView using Querystring and display the Details in another page.
step1
Drag and Drop a GridView and SQLDataSource in your .aspx page. Configure SQL DataSource to get the data from the database Table. Associate this SQLDataSource with the GridView. In our article we will display Employee Details(Only EmpId as a link and EmpName). When this link is clicked by the user, We will pass the EmpId of the selected user as a querystring and redirect to EmpDetails.aspx page. In the EmpDetails.aspx page, SqlDataSource refers this QueryString value(EmpId) and returns the complete details of the Employee with this EmpId.
Below is the code which has a GridView and SqlDataSource controls. SqlDataSource is configured to get the EmpId,Name column values from the Emp table from the database. We will use SqlDataSource as a datasource for the GridView control to display the EmpId field as a link and the Emp Name.
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="False">
<Columns>
<asp:TemplateField HeaderText="EmpId">
<ItemTemplate>
<asp:HyperLink runat="server" ID="hlnkEmpId" Text='<%#Eval("EmpId") %>' NavigateUrl='<%# "EmpDetails.aspx?EmpId="+Eval("EmpId") %>'></asp:HyperLink>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Name" HeaderText="Name" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:EmpDBConnectionString %>" SelectCommand="SELECT [EmpId], [Name] FROM [Emp]"></asp:SqlDataSource>
</div>
</form>
Notice the Hyperlink control, the NavigateUrl property of this control is used to redirect the user to EmpDetails.aspx page with the EmpId querystring.
The output of this code looks as shown below. It lists all the Emp Details(EmpId,Name)
Add a New webform with the name : "EmpDetails.aspx" . Add a DetailsView and SqlDataSource controls to this page.
<div>
<asp:Label ID="Label1" Font-Bold="true" runat="server" Text="Employee Details"></asp:Label>
<br />
<br />
<asp:DetailsView ID="dvEmp" runat="server" Height="50px" Width="125px" AutoGenerateRows="False" DataKeyNames="EmpId" DataSourceID="sdsFilteredEmp">
<Fields>
<asp:BoundField DataField="EmpId" HeaderText="EmpId" InsertVisible="False" ReadOnly="True" SortExpression="EmpId" />
<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
<asp:BoundField DataField="HireDate" HeaderText="HireDate" SortExpression="HireDate" />
<asp:CheckBoxField DataField="IsActive" HeaderText="IsActive" SortExpression="IsActive" />
<asp:BoundField DataField="Location" HeaderText="Location" SortExpression="Location" />
<asp:BoundField DataField="Profession" HeaderText="Profession" SortExpression="Profession" />
</Fields>
</asp:DetailsView>
<asp:SqlDataSource ID="sdsFilteredEmp" runat="server" ConnectionString="<%$ ConnectionStrings:EmpDBConnectionString %>" SelectCommand="SELECT [EmpId], [Name], [HireDate], [IsActive], [Location], [Profession] FROM [Emp] WHERE ([EmpId] = @EmpId)">
<SelectParameters>
<asp:QueryStringParameter Name="EmpId" QueryStringField="EmpId" Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>
</div>
Notice that the SqlDataSource control is configured to select all the details of an employee with the EmpId which is taken from the EmpId querystring. SqlDataSource has a where clause with the parameter @EmpId. This parameter value is taken from the SelectParameters section of the SqlDataSource. SelectParameters has a QueryStringParameter object which contains Name which is the name of the where clause parameter(EmpId) without @ symbol. QueryStringField is the name of the QueryString. Type is the datatype of the value present in the querystring.
Below is the output for Emp Details for a specific employee. 
Notice that the HireDate column value is displayed along with the Time portion. In order to customize this field to display only the date without time. We will convert this field to Template Field. To do this, switch to Deisgn view and Select the DetailsView. Now click on the smart tag this opens a "DetailsView Tasks" window in this click on EditFields... link as shown below.
Now under SelectedFields, select the HireDate column and on the right side click on "Convert this field into a Template Field" link. This converts this field from BoundField to Template Field as shown Below.
In the generated markup use Convert.ToDateTime method to convert the field to DateTime and on the result use ToShortDateString method to display only the Date part without time.
<asp:TemplateField HeaderText="HireDate" SortExpression="HireDate">
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("HireDate") %>'></asp:TextBox>
</EditItemTemplate>
<InsertItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("HireDate") %>'></asp:TextBox>
</InsertItemTemplate>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Convert.ToDateTime(Eval("HireDate")).ToShortDateString() %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
Now the HireDate is displayed with only the date part and not the time as shown below:
Note: Template Field is used to customize the controls in a databoundcontrol like GridView/DetailsView/FormsView and other DataBound Controls. A TemplateField contains
1.ItemTemplate - Contains the controls to be displayed when the DetailsView is in a Readonly mode. It is used when the data is retrieved and displayed. Therefore Eval is used to get the data from the DataSource control and display it.
2.EditItemTemplate - Contains the controls to be displayed when the DetailsView is in Edit mode. You can also place validation controls to validate the Controls value in Edit Mode. The values of controls in EditItemTemplate field are used to update the value in the database table.
Follow