GridView, DetailsView and SqlDataSource in ASP.Net
The GridView control enables you to display, select, sort, and page and edits data items such as database records. Details View enables you to work with a single data item at a time. Both controls enable you to display, edit data items such as database records. SqlDataSource control enables you to quickly and easily represent a SQL database in a w
In this article, I am using GridView, DetailsView and SqlDataSource. The GridView control enables you to display, select, sort, and page and edits data items such as database records. Details View enables you to work with a single data item at a time. Both controls enable you to display, edit data items such as database records. SqlDataSource control enables you to quickly and easily represent a SQL database in a web page. It helps to make connection with database without writing to much code.
It represents a connection and set of commands that can be executed against a SQL database. The SqlDataSource control is built on top of ADO.NET. SqlDataSource uses ADO.NET objects such as the DataSet, DataReader, and Command objects. Because the SqlDataSource control is a control, it enables you to use these ADO.NET objects declaratively rather than programmatically.
I am using an Employee table in this article that will showing below. First GridView retrieve display only first name of employee whenever you click on select option in grid you will get full detail of that employee.
Employee Table
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="idgrid" DataKeyNames="id" runat="server"AutoGenerateSelectButton="true" DataSourceID="idql1">
</asp:GridView>
<asp:DetailsView DataSourceID="idsql2" ID="iddetail" runat="server"></asp:DetailsView>
<asp:SqlDataSource ID="idql1" ConnectionString="<%$ ConnectionStrings:master %>"
SelectCommand="SELECT id,'First Name'=Emp_fname FROM employee" runat="server">
</asp:SqlDataSource>
<asp:SqlDataSource ID="idsql2" ConnectionString="<%$ ConnectionStrings:master %>"
SelectCommand="SELECT 'S. No'=id,'First Name'=Emp_fname,'Last Name'=Emp_lname,
'Country'=Emp_country, 'Income'=Emp_salary FROM employee WHERE id=@id " runat="server">
<SelectParameters>
<asp:ControlParameter Name="id" ControlID="idgrid" PropertyName='SelectedDataKey("id")'/> </SelectParameters>
</asp:SqlDataSource>
</div>
</form>
</body
</html>
Add connection string in web config file.
Web.Config
<?xml version="1.0"?>
<configuration>
<connectionStrings>
<add name="master" connectionString="Data Source=MCNDESKTOP10\SQLEXPRESS;Initial Catalog=master;Integrated Security=True" providerName="System.Data.SqlClient" />
</connectionStrings>
<system.web>
</configuration>
When you debug this application, you will get the below output on internet explorer.
Click on select option in grid view to see the detail of Michal.
See the difference after clicking on select option all details of Michal show below in DetailView.
