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
  • 3715

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

em 1.gif

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.

em2.gif

Click on select option in grid view to see the detail of Michal.

em3.gif

See the difference after clicking on select option all details of Michal show below in DetailView.

em4.gif

Categories

More Articles

© 2019 DotNetHeaven. All rights reserved.