asp.net web application professor ralph westfall may 2011
TRANSCRIPT
ASP.NET Web Application
Professor Ralph WestfallMay 2011
Create a Web Project
Start Visual Studio 2008 Create: Project*>Visual Basic>Web>ASP.NET
Web Application>name it Proj3Web>OK Click Design tab at bottom left if screen not seen Drag lower right corner of div container at top
down/right to be around 700x575 on screen Click on the Split tab at bottom left of designer
window to see if this created a <div> with a style with these dimensions under the <body> tag
Add Strict="True" just before the closing %> on the top line of the code (the line that starts with <%@ Page ) * NOT Create: Web Site
Absolute Positioning for All
With an ASP project in Visual Studio Tools>Options>click Show all settings checkbox on lower left corner>HTML Designer>CSS Styling>check Change positioning to absolute …>OK see images of this and instructions
View>Ruler and Grid>Show Grid to show gridlines to help with placement of controls View>Ruler and Grid>Snap to Grid (if like
coordinates to be multiples of 5)
Add DropDownList
Drag a DropDownList from Standard section of ToolBox onto designer screen (may be slow to show) and name it cboCountries to make work with code from previous Windows project Make sure that it is still selected, verify with
Format>Set Position that Absolute is checked Use the identifier tab above it to drag it down so
there is space for a Label above it new items 1st go to upper left, so leave space there
Widen it to have room for long country names Do not pull length down
Controls with DropDownList
Drag a Label onto screen, drag it above the DropDownList, set Text to Country
Drag a Button onto the screen, move it about 40% of the way down the page, set (Name) to btnCountry, set Text to Select can change values in Source window if
Properties window is working slowly If haven't done so already, save the
Proj3Web project on the Desktop
And More Controls
Add a ListBox to right of the DropDownList and name it lstGolds Adjust size (doesn't have to be wide) Put Label above it (set Text to Golds), and
Button below named btnGolds and Text = Select Add a CheckBox to right of this ListBox
Change the (Name) to chkPop and Text to Big Pop
Drag another Button to screen, to right of other Button and below CheckBox and set (Name) to btnPop and Text to Select
Output ListBox / Clear Button
Add a ListBox for outputs below the left Button and then drag bottom and side to be longer and wider to hold outputs Name it lstOutputs
put Labels above it (set Text to show names of output fields) Could use one Label with multiple nbsp; for
spacing but it makes your code look kludgy (separate labels are better)
Add a Button with (Name) of btnClear and set Text to Clear
Test Layout
Click green triangle at top to run code Click OK to modify Web.config file for debugging View layout in web browser and make
adjustments to positions of controls as necessary
View>[Page] Source to see the HTML code created by the ASP code
Modify layout based on browser appearance Make sure that content can be seen without
scrolling on an 1024x768 screen Move items up so top of page not empty
Add Existing Files to Project
If haven't already, download and unzip Olympics-SQL-DB.zip
In the ASP you are creating: Project>Add Existing Item>select BizTier.vb and DataTierSS.vb files from above project subfolder (below .sln file location)>Add
Double-click a Button in the ASP Design view Note the Default.aspx.vb file that was created Go back to Default.aspx and click the other
Buttons to get subs for them too
Setting Up the Databases
Copy the Olympics.mdf and Olympics_log.ldf database files from the Olympics-SQL-DB cis338 folder into the App_Data subfolder of the Proj3Web folder on Desktop
Modify previous connection string code to be:
con.ConnectionString = "server=(local)\SQLEXPRESS; AttachDbFilename=|DataDirectory|\Olympics.mdf; Integrated Security=True;"
Adapting User Interface Code
Use Notepad to open the Windows frmUI.vb code file in the Olympics-SQL-DB project Copy Private data declarations and paste them
above the Subs in Default.aspx.vb code file Following pages show how to copy and
modify code for individual Subs
Form Load Code
Copy and paste code from Sub frmUI_Load into Sub Page_Load first and last lines of Sub Page_Load should be:If Not IsPostBack Then ' [copied Windows Form code in between] End If
Change ComboBox item loading line as follows: cboCountries.Items.Add(item.ToString.Trim) '*
Run code to verify it works, debug if doesn't
Add Clear Code
Paste ClearSelections() Sub and its code change first three lines to read:
lstOutputs.SelectedIndex = -1lstGolds.SelectedIndex = -1cboCountries.SelectedIndex = -1
Paste btnClear_Click code into Default.aspx.vb delete the following line:lstOutputs.Items.Clear()
Add Country Code
Copy corresponding Windows form code from btnCountry into Default.aspx.vb Put following in general declaration above SubsPrivate slctIndex As Integer paste the following over the first two lines:
slctIndex = cboCountries.SelectedIndexIf slctIndex = -1 Then
MsgBox("Please select a country") and last line is:
cboCountries.SelectedIndex = slctIndex
Country Code - 2
Replace following line:lstOutputs.DataSource =
BizTier.GetData("country", selector, "=") With the following four lines:ClearSelections()alsData = BizTier.GetData("country", selector, "=")For Each item In alsData lstOutputs.Items.Add(Trim(item.ToString))Next Test
Add Golds and Pop Code
Copy btnGolds Windows form code into corresponding Default.aspx.vb Sub Change Sub as shown in previous slides, but with
“golds” and lstGolds rather than “country” and cboCountries control
Copy btnPop Windows form code into corresponding Default.aspx.vb Sub Change Sub as shown in previous slides to load
alsData and outputs Test after each conversion
Finishing UI Conversion
Run after each copy/paste and see how many errors in the files you can fix
Use Response.Redirect("http://[some URL]") for btnExit code action instead of Close or Exit
Tips for converting Windows Form code Use MsgBox() rather than MessageBox.Show() Load outputs from an ArrayList through a For Each
loop rather than assigning a DataSource Note that BizTier Module doesn't require any
changes In this case, formatting is handled in data tier
Spacing For HTML Alignment
The code on the following page adds spacing between fields in the output ListBox on the HTML page Uses HttpUtility.HtmlDecode function to force
browser to show spacing This code replaces the PadLeft and PadRight
functions used to produce spacing in Windows projects
Spacing Function
Private Function PadIt(ByVal itm As String, ByVal syz As Integer, ByVal side As String) As String Dim itmPad As Integer Dim padding As String = "" itmPad = syz - itm.Length - 1 For i As Integer = 0 To itmPad padding &= " " Next If side = "right" Then itm &= HttpUtility.HtmlDecode(padding) Else itm = HttpUtility.HtmlDecode(padding) & itm End If Return itm End Function
Spacing Text
ASP code is converted to HTML before being sent to browser
For DataTierSS module code: Add Imports System.Web.HttpContext at top of
file for web server to insert spaces in output Add following code line to general declarations:Private aligner() As String = {"right", "left", "left",
"left", "left"} Modify code line in For Each loop to read:rowData += PadIt(Trim(dr(dc).ToString()), pads(i),
aligner(i))
Help for Fixing Errors
View the code in the unzipped Web-Olympics-SQL-DB.zip folder to see how the migration was handled in that file Use changes in that file as a model to get the
web project code to run