Tutorial:
MSSQL-Web-GridView-Forms-2
Dr. Thomas E. Hicks
Computer Science Department
Trinity University
This tutorial is a continuation of GridViews Part 1. See Below! It will continue to use Visual Studio Net ASPX web pages and Grid Views to render information contained in a Microsoft SQL Server Library database.
Prerequisite Software Configuration:
Visual Studio 2005, or later
SQL Server Management Studio or SQL Server Management Studio Express
Prerequisite Database: [The tutorial below will instruct you on how to get this same database into your Management Studio or Management Studio Express]
Get The Database
I recommend getting placing a copy of this database in either Microsoft Management Studio or Microsoft Management Studio Express so that you can work through this tutorial as you go. A copy of the tutorial can be downloaded below.
Upsize The Database
I recommend that you upsize this database in either Microsoft Management Studio or Microsoft Management Studio Express. If you are unsure how to do this, check out the tutorial below:
Tutorial:
MS SQL Server :
Tutorial Part 1 I recommend that complete the the first
tutorial in this series so that you can work through this tutorial as you go:
Import Access Database Into
SQL Server Management Studio
Tutorial: MS SQL Server : GridViews
1] The Library database is small and consists of only 6 tables. The Genre relates to the Books!
2] The Library database is small and consists of only 6 tables. The Majors relate to the Students!
3] A Check-Out Transaction occurs when a Student Checks out Books. A TransactionDetail is created for each and every Book checked out by the Student during a single Check-Out Transaction.
4] A Database Administrator might provide the following glimpse into the Library Database.
1] The Default.aspx looked design can be seen below:[See Below!]
2] The rendered value can be seen below:[See Below!]
1] The Students.aspx looked design can be seen below:[See Below!]
2] The rendered value can be seen below:[See Below!]
1] The StyleSheet.css code can be seen below:[See Below!]
/*******************************************
* Body Of The Orange-Blue Style Sheet *
*******************************************/
body
{
scrollbar-base-color: #21189C;
scrollbar-arrow-color: #FF8200;
background-color: #FF8200;
Color: #21189C;
font: color: #21189C;
font-family: 'sans serif',arial;
font-size: 12px;
font-weight: normal
}
/*******************************************
* Horizontal Rule *
*******************************************/
hr
{
border: 0;
height: 4px;
color: #21189C;
background-color: #21189C;
}
/*******************************************
* Data Table *
*******************************************/
table#Data
{
align:center;
font-family: 'sans serif',arial;
color: #21189C;
color: #21189C;
background-color: #D4D0C8;
border: solid #D4D0C8 4px;
border-spacing: 0px;
font-size: 10px;
font-weight: normal;
text-align: Left;
}
table#Data td
{
background-color: #D4D0C8;
// border: solid #000000 1px;
border: solid #D4D0C8 1px;
padding: 4px;
}
/*******************************************
* TriLeft Table *
*******************************************/
table#TriLeft
{
align:center;
border: solid #D4D0C8 0px;
border-spacing: 0px;
text-align: Left;
width:100%;
}
table#TriLeft td
{
padding: 0px;
}
/*******************************************
* More Bold Header *
*******************************************/
.BoldLabel
{
font-family: 'sans serif',arial;
font-size: 12px;
font-weight: bold;
text-align: Center;
}
/*******************************************
* Left Justified Data *
*******************************************/
.LeftData
{
text-align: Left;
}
/*******************************************
* Black-Blue Hyperlinks *
*******************************************/
A
{ font-family: 'sans serif',arial;
color: Black;
font-size: 16px;
font-weight: bold;
}
A:link
{
color:Black;
}
A:visited
{
color: Black;
}
A:hover
{
text-decoration: none;
color:#21189C;
font-size: 24px;
font-weight: bold;
}
A:active
{
color: red;
text-decoration: none;
}
1] Load Template.aspx. Save it as Books1.aspx.Change the label to be Listing Of All Books. [See Below!]
1] Load Template.aspx. Save it as Books1.aspx.Change the label to be Listing Of All Books. [See Below!]
1] Once the database connection in Students.aspx has been created, it is much easier to create additional grid views into that same database.
2] Open File Template.aspx and save it as Books1.aspx. Open the Toolbox and expand the Data selections. Using the mouse, drag the GridView into the Panel A data source is required if one is to populate the GridView with data from the database. Hold down the Choose Data Source combo box and Select New data source ...
3] Choose the data source type. Select Database. Using the mouse, push/select the OK Button. [See Below!]
4] Hold down the combo box and select the Hicks-LibaryConnectionString. [See Below!]
5] Using the mouse, push/select the Next Button. [See Below!]
6] Select the Books Table and Use *. Using the mouse, push/select the Next Button. [See Below!]
7] You may Test the Query. Using the mouse, push/select the Finish Button. [See Below!]
8] The GridView is complete. You may test it. [See Below!]
8] The rendered value may be seen below. We could do all of the configuration changes that we did to the Students.asp form, but let's put this aside for now. [See Below!]
1] Make sure that you can see the Default.aspx form in the design view. Open the Toolbox and expand the Standard selections. Using the mouse, drag the Hyperlink onto Panel2. Set meaningful text to the anchor. Set the Hyperlink Properties Text to List All Books #1. Link the anchor to the proper URL - Press ... Select Books1.aspx. Test It! [See Below!]
1] Open File Students.aspx and save it as Books2.aspx. We must reconfigure the data source; there are several ways to do that. One way is to right-mouse click on the SQLDataSource box and Select Configure Data Source ... Change the Label to be Listing Of All Books.
The second way opens the door to numerous data source configuration options. Using the mouse, open the configuration box. [See Below]
Press/Select Configure Data Source ... [See Below]
1] Once again we can use the Hicks-LibraryConnectionString. [See Below]
2] Select all of the book information. Using the mouse select/push the Next Button. [See Below]
3] You may Test the Query. Using the mouse, push/select the Finish Button. [See Below!]
4] Push/select the Yes Button. [See Below!]
5] Unfortunately, I was doubtful that this would work when I looked at the form. The fields fom the Student table had not been replaced by the fields from the Book table; our form still has FirstName, Phone, etc. [See Below!]
5] To solve the problem, I simply replaced the BoundField data with those fields contained in the Book table. [See Below!]
6] Looks Better in the design view! [See Below!]
7] Works! Depending upon the amount of customization, this might be lots faster to reconfigure multiple table forms alike. [See Below!]
1] Make sure that you can see the Default.aspx form in the design view. Open the Toolbox and expand the Standard selections. Using the mouse, drag the Hyperlink onto Panel2. Set meaningful text to the anchor. Set the Hyperlink Properties Text to List All Books #2. Link the anchor to the proper URL - Press ... Select Books2.aspx. Test It! [See Below!]
1] Suppose we decide to increase the want larger titles on all of our pages. It is sufficient to increase the BoldLabel format. Change it from 12 to 16 point font.
/*******************************************
* More Bold Header *
*******************************************/
.BoldLabel
{
font-family: 'sans serif',arial;
font-size: 16px;
font-weight: bold;
text-align: Center;
}
2] Note the change in the size of label text. Select the Document object of the Default.aspx form in the design view. Set the Hyperlink Properties Title to
Library System Main Menu. Test It! [See Below!]
2] Note the Title in the menu bar. [See Below!]
3] Take this opportunity to update the following Titles. [See Below!]
1] Open File Books2.aspx and save it as Books3.aspx. Change the Title to be Library System Books #3. Set the GridView Properties AllowPaging to True. Set the GridView Properties PageSize to 10. [See Below!]
2] Set the Panel1 Properties Height to [Nothing]. Set the Panel1 Properties ScrolBars to None. [See Below!]
3] Sometimes you wind up with an error rendering the GridView. When this happens, hold down the right mouse on the error message and select Refresh. [See Below!]
4] Once the GridView is refreshed, you can see the page controls at the bottom of the page. [See Below!]
5] Note the Paging below. Try it! [See Below!]
2] Note the change in the size of label text. Select the Document object of the Default.aspx form in the design view. Set the Hyperlink Properties Title to Library System Main Menu. Test It! [See Below!]