Using GridView In ASP.NET ?

In this post I'll be focusing on displaying, a Stored Set of Data in an ASP.NET GridView component with a click of a button. To make things easier, the guide has several steps that anybody would follow with ease.


Step01 : You've to create SQL Database & a relevant Table to store your Data. In order to do that. Copy the following SQL Script & run it on SQL Server Management Studio or Visual Studio 2010. (Data ->Transact-SQL Editor- ->New Query Connection)

EXEC sp_databases;

create database Test#;

use Test#;

create table Student_Details(
 
  SID VARCHAR(10) NOT NULL,
  Sname VARCHAR(20),
  Saddr VARCHAR(30)

);

INSERT INTO Student_Details VALUES('RR_1232_12','Janith Zoysa','Colombo');
INSERT INTO Student_Details VALUES('RR_1232_13','Ann Margret','Moscow');
INSERT INTO Student_Details VALUES('RR_1232_14','Peter Laurey','Sydney');
INSERT INTO Student_Details VALUES('RR_1232_15','Dan Morgan','Boston');

SELECT * FROM Student_Details;

Step 02 : Start Visual Studio 2010,(your Version) Create a new Web Site by File -> Web Site ->ASP.NET Empty Web Site.



Step 03 : Go to Solution Explorer. Right Click on the Project & Add New Item. or Just Press Ctrl+Shift+A. Add a master Page. Type a Heading Text in the MasterPage.master Master Page holds Page Designs & common Stuff to the whole Web Site. Code will look like follows.





<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!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>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <p style="font-family:@Arial Unicode MS;font-size:large;color:Aqua;">Student Information System</p>
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>



Step 04 : Now, press Ctrl+Shift+A and add a Web Form Display.aspx & don't forget to add Master page.








 Add a GridView from Tool Box & a Button. Check the code & set GridView ID as grd_Student_Details & Button ID as btn_Click.



<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Display.aspx.cs" Inherits="Display" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <asp:GridView ID="grd_Student_Details" runat="server">
    </asp:GridView>
    <br />
    <asp:Button ID="btn_View" runat="server" Text="Button" OnClick="btn_View_Click"/>

    </asp:Content>


Step 05 : Add A new Folder App_Code to the Project & Add Following Two Class Files to that Folder. DB_Connect.cs & DB_Access.cs


//DB_Access.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.SqlClient;
using System.Data;


public class DB_Access
{
    SqlConnection conn;

    public DB_Access()
    {
        conn = DB_Connect.GetConnection();
    }

    public DataSet getStudent_Details()
    {
        if (conn.State.ToString() == "Closed")
        {
            conn.Open();
        }

        SqlCommand newCmd = conn.CreateCommand();
        newCmd.Connection = conn;
        newCmd.CommandType = CommandType.Text;
        newCmd.CommandText = "SELECT * FROM dbo.Student_Details";

        SqlDataAdapter da = new SqlDataAdapter(newCmd);
        DataSet ds = new DataSet();
        da.Fill(ds, "Students");

        conn.Close();

        return ds;
    }

}


//DB_Connect.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Configuration;
using System.Data.SqlClient;

public class DB_Connect
{
    public static SqlConnection NewCon;
    public static string ConStr = ConfigurationManager.ConnectionStrings["ApplicationServices"].ConnectionString;

    public static SqlConnection GetConnection()
    {
        NewCon = new SqlConnection(ConStr);
        return NewCon;
    }
}

Step 06 : Now Open Web.config File & add the Part in it. Set the Values as Follows. Make sure Your Server Instance is Accurate. You've to find your Server Name, Username & password.

<?xml version="1.0"?>

<!--
  For more information on how to configure your ASP.NET application, please visit
  http://go.microsoft.com/fwlink/?LinkId=169433
  -->

<configuration>
  <connectionStrings>
    <add name="ApplicationServices" connectionString="data source=HARSHA-LT\SQLEXPRESS;Initial Catalog=Test#;Integrated Security=True" providerName="System.Data.SqlClient"/>
  </connectionStrings>
    <system.web>
        <compilation debug="false" targetFramework="4.0" />
    </system.web>

</configuration>

Step 07 :  Open Default.aspx.cs File & Set the code for the button Click Event.

//Default.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;

public partial class Display : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    DB_Access dba = new DB_Access();

    protected void btn_View_Click(object sender,EventArgs e)
    {
        DataSet ds = dba.getStudent_Details();
        grd_Student_Details.DataSource = ds.Tables["Students"].DefaultView;
        grd_Student_Details.DataBind();

    }
}

Now You're Done. Build & Run the Web Site in the Server. Press f5.

No comments: