ASP.NET Web Application Professor Ralph Westfall May 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 with a style with these dimensions under the 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 instructionsimages 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 1 st 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 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 = -1 lstGolds.SelectedIndex = -1 cboCountries.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 Subs Private slctIndex As Integer  paste the following over the first two lines: slctIndex = cboCountries.SelectedIndex If 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(" 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 fileWeb- Olympics-SQL-DB.zip  Use changes in that file as a model to get the web project code to run