Grid Vew Control VB

A Programme Under the Compumitra Series
Data binding is a functionality that allows us to connect data
from a source to a target.
GridView Control–VB
LAB WORK GUIDE

Data Binding in GridView using wizard
 Example Template Creation.
 Database file addition in App_data
 Data Binding with GridView using wizard
 Output
 Code explanation
 Modification Trials
Data Binding in GridView using VB Code
 Example Template Creation.
 Data Binding with GridView using vb code
 Output
 Code explanation
 Modification Trials
 Error Trials
 Practice Exercise
 Learning Summary Review
 References.
OUTLINE

Data Binding
Using GridView control through wizard
Data binding is a general technique that binds two
data/information sources together and maintains
them in sync.
The GridView control enables you to connect to a data
source and display data in tabular format.

"VB"
GridViewUsingWizardVB: Creating And Renaming Webpage
2. Now Rename this page with "Rename"
option by Right Clicking on "Default.aspx"
1. Select the "Default.aspx" page
in the "Solution Explorer"
3. Rename "Default.aspx"
page to "GridView.aspx" page.
• Follow Standard Website Creation Steps and set your path to
C:Learner<student-id>DataBindingGridViewUsingWizardVB
• Add New Default.aspx page in your Website

1. Select the "Root Path" in the
"Solution Explorer" and Right
Click on it
2. Now select "Add ASP.NET
Folder" option
3. And then select "App_Data"
GridViewUsingWizardVB: Adding App_Data Folder

"VB"
GridViewUsingWizardVB: Adding Database-1
Right Click on "App_Data" and select "Add
Existing Item.." option in Solution Explorer
to attach the database to "App_Data"
For attaching database to your current website follow the
instruction.

GridViewUsingWizardVB: Adding Database-2
1. Select the database you
created
2. Attach the database by
clicking the ‘Add’ Button
Your attached database will
appear in 'App_Data' folder.
To attach the database follow the path "C:Learner<Student-
Id>DatabaseSale".

GridViewUsingWizardVB: Adding Gridview Control
The GridView control enables you to connect to a data source and
display data in tabular format
Drag and Drop "GridView" control
in div From 'Data' Toolbox
Select '<New data source…>' option
from 'Choose Data Source:'
dropdown list of 'GridView Tasks' to
attach a data source in GridView
control.

GridViewUsingWizardVB: Adding AccessDataSource in GridView-1
1. Select "Access
Database" and then
click "OK" button.
2. Click on "Browse" button to
browse for database file

1. Double click on App_Data and select
the database and click "OK" button
Now follow the instructions to select the database
2. Click "Next"

1. Select the table which you
want to access from the
database from DropDown list
If you have applied any query on the tables you can also select
that query from the DropDownList.
Select the fields which You
want to display and click
"Next" button

1. First Click "Test Query" to
test the query
2. Then Click "Finish" button
Test Query is used to test that whether the data is accessed
according to our need or not.
Your tested query will
show here.

GridViewUsingWizardVB: View Of AccessDataSource
'AccessDataSource' control
will automatically appear
here.
Now Run Code By
pressing 'F5'

GridViewUsingWizardVB: Output
Output on browser
Content of the ItemMaster table
will display in GridView

GridViewUsingWizardVB: Source Code Explanation -1
"AutoGenerateColumn"
indicating whether bound
fields are automatically
created for each field
This source code describes your attached database
and select query
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataKeyNames="ItemId" DataSourceID="AccessDataSource1">
<Columns>
<asp:BoundField DataField="ItemId" HeaderText="ItemId" InsertVisible="False"
ReadOnly="True" SortExpression="ItemId" />
<asp:BoundField DataField="Item_name" HeaderText="Item_name"
SortExpression="Item_name" />
<asp:BoundField DataField="unit" HeaderText="unit" SortExpression="unit" />
<asp:BoundField DataField="Product_Rate" HeaderText="Product_Rate"
SortExpression="Product_Rate" />
</Columns>
</asp:GridView>
<asp:AccessDataSource ID="AccessDataSource1" runat="server"
DataFile="~/App_Data/sale.mdb" SelectCommand="SELECT * FROM [ItemMaster]">
</asp:AccessDataSource>
"DataKeyNames" defines
key in the table
"DataSourceID" defines
data source as
"AccessdataSource1"

GridViewUsingWizardVB: Source Code Explanation -2
"DataField" Displays name
of the field
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataKeyNames="ItemId" DataSourceID="AccessDataSource1">
<Columns>
<asp:BoundField DataField="ItemId" HeaderText="ItemId" InsertVisible="False"
ReadOnly="True" SortExpression="ItemId" />
<asp:BoundField DataField="Item_name" HeaderText="Item_name"
SortExpression="Item_name" />
<asp:BoundField DataField="unit" HeaderText="unit" SortExpression="unit" />
<asp:BoundField DataField="Product_Rate" HeaderText="Product_Rate"
SortExpression="Product_Rate" />
</Columns>
</asp:GridView>
<asp:AccessDataSource ID="AccessDataSource1" runat="server"
DataFile="~/App_Data/sale.mdb" SelectCommand="SELECT * FROM [ItemMaster]">
</asp:AccessDataSource>
"BoundField" displays the value
of specified DataSource field
as text
"SortExpression" Defines
name on which sorting can
be performed
"HeaderText" shows Header
name of the column

GridViewUsingWizardVB: Modification trials
 Select "All Fields" query instead of "ItemMaster" and observe
the difference.
You will see that you are getting the data from all the
tables.
 Instead of selecting ‘*’ while selecting columns select any three
column and see the difference.
Now you can observe from the result that only selected fields
are showing.
 Change the Header Text of column "Item_name" from
"Item_name" to "Product Name" and see the difference after
running the page.
You will see that Header of column is changed.

Data Binding
Using GridView control through VB Code
Data binding provides a simple and consistent
way for applications to present and interact with
data.
The GridView control enables you to connect to
a data source and display data in tabular
format.

GridViewUsingCSCode: .aspx File Creation
1. Drag and Drop a 'Button' control
in div from Standard Toolbox
• Follow Standard Website Creation Steps and set your path to
"C:Learner<student-id>DataBindingGridViewUsingVBCodeVB"
• Add New Default.aspx page in your Website
2. Introduce a new line and Drag and Drop
a 'GridView' control from Data Toolbox

•Add the 'App_Data' folder
•To add the database, follow the path "C:Learner<Student-
Id>DatabaseSale".
GridViewUsingCSCode: Adding Database
1. Add 'App_Data' folder
2. And Database 'Sale.mdb' in
App_Data like previous exercise.

GridViewUsingVBCode: Copy/Paste Code
Dim dbconn As OleDbConnection
Dim sql As String
Dim dbcomm As OleDbCommand
Dim dbread As OleDbDataReader
Copy/Paste or type this code under
the "Partial Class Default" as shown
in the template
Imports System.Data
Imports System.Data.OleDb Type this code above "Partial
Class Default"
Go to 'default.aspx.vb' by double clicking on blank space
of 'default.aspx'

GridViewUsingVBCode: Button1_Click Event handler Code
dbconn=New OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;data source=" &
Server.MapPath("~/App_Data/sale.mdb"))
dbconn.Open()
sql = "SELECT * FROM ItemMaster"
dbcomm = New OleDbCommand(sql, dbconn)
dbread = dbcomm.ExecuteReader()
GridView1.DataSource = dbread
GridView1.DataBind()
dbread.Close()
dbconn.Close()
Copy/Paste or type the code under
"Button1_Click Event" and run this code with "F5"
• Generate the Button1_Click Event in the VB code by double-clicking
on the Button control of .aspx file.

GridViewUsingVBCode: Run GridView Page
First click the
button
Result will show here.
When you will run your page then after clicking button you will get the output

Imports System.Data
Imports System.Data.OleDb
Partial Class _Default Inherits System.Web.UI.Page
Dim dbconn As OleDbConnection
Dim sql As String
Dim dbcomm As OleDbCommand
Dim dbread As OleDbDataReader
GridViewUsingVBCode: Code Explanation-1
Imports System.Data.OleDb provide
OleDb.Net provider for MS Access
database connectivity
This line declare
OleDbConnecton class type
variable which is used to
make a connection with MS
Access Database
Imports System.Data Allows to use the
DataSet Class Methods.
This line declare
OleDbDataReader class type
variable which is used to read
the Data.
This line declare OleDbCommand
class type variable which is used to
run SQL queries.

GridViewUsingVBCode: Code Explanation-2
Protected Sub Button1_Click(ByVal sender As Object,
ByVal e As System.EventArgs) Handles Button1.Click
dbconn = New
OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;dat
a source=" & Server.MapPath("~/App_Data/sale.mdb"))
dbconn.Open()
sql = "SELECT * FROM ItemMaster"
dbcomm = New OleDbCommand(sql, dbconn)
dbread = dbcomm.ExecuteReader()
GridView1.DataSource = dbread
GridView1.DataBind()
dbconn.Close()
End Sub
This statement creates an object
of OleDbConnection class.
This is a path of Database.
This statement initialize the SQl
query in sql String type variable,
which is used in next line
Define the DataSource ID of
GridView equal to DataReader
This string type argument is passed, when
we create a connection with MS Access
This statement open the
OleDbConnection
This statement creates an object
of OleDbConnection class. This
need two arguments, 1- SQL
Query, 2- OleDbConnection class
object
This statement execute the SQl
query and store its result in
OleDbDataReader class object
This statement Close the
OleDbConnection

GridViewUsingVBCode: Modification Trials-1
 In SELECT statement, replace '*' sign with 'ItemId,
Item_name'
Run and watch the effect
Now you can observe that the result displays
only the selected fields.
 Add 'As Product_Name' just after the 'Item_name'
SELECT statement.
Syntax: <Field Name> As <New Name>
You will see that Header of column will change
when you will run the page.

GridViewUsingVBCode: Modification Trials-2
 Click on 'Auto Format…' link in 'GridView
Task' and select the 'scheme' equal to 'Black
& Blue 2'
Run and watch the effect

GridViewUsingVBCode: Error Trials
 Remove the Namespace files which we have inserted in the beginning.
You will get the error as given below
BC30002: Type 'OleDbConnection' is not defined.
 Instead of 'Dim dbconn As OleDbConnection' line type Dim dbconn and
observe the error showing at ToolTip
So it is necessary to Define the variable with As clause.
 Remove the line dbconn.open() and see the result after running the
page.
The error will be shown that is given below.
ExecuteReader requires an open and available Connection. The
connection's current state is closed.
To remove this error, connection should be open.

GridViewUsingVBCode: Practice Exercise
Create a website named Expenses
Add the Database 'Monthly Expenses'
Show column "CatId" and "Description"
from table "Expense Category" and "Date"
and "Detail" from table "Expenses" in a
Grid view using wizard option.
Show column "CatId" and "Description"
from the "Expense Category" table and
"Date" and "Detail" from the "Expenses"
table in a Grid view using code.

GridViewUsingVBCode: Learning Summary Review
Use of GridView control
Adding database to App_Data.
Linking of MS Access database with Grid View
through wizard.
Linking of MS Access database with Grid View
through Code.
Use of OleDb classes.

Bibliography
http://msdn.microsoft.com/en-
us/library/fbk67b6z.aspx
http://www.w3Schools.com
http://www.switchonthecode.com/tutorials/csharp-
tutorial-binding-a-datagridview-to-a-database
http://www.codeproject.com/KB/aspnet/DataGridVi
ew__GridView.aspx
http://www.codersource.net/asp-net/asp-net-2-
0/grid-view-control-in-asp-net-2-0.aspx

Ask and guide me at
sunmitraeducation@gmail.com
Share this information with as many people as
possible.
Keep visiting www.sunmitra.com for
programme updates.

Grid Vew Control VB

More Related Content

What's hot (20)

Similar to Grid Vew Control VB (20)

More from sunmitraeducation (20)

Recently uploaded (20)

Grid Vew Control VB