professor ralph westfall may 2011
Skip this Video
Download Presentation
ASP.NET Web Application

Loading in 2 Seconds...

play fullscreen
1 / 21

ASP.NET Web Application - PowerPoint PPT Presentation

  • Uploaded on

Professor Ralph Westfall May 2011. ASP.NET Web Application. 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

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about ' ASP.NET Web Application' - naomi-clarke

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
create a web project
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
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
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
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
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
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
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
Add Existing Files to Project
  • If haven't already, download and unzip
  • 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
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
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
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
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:


add country code
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
Country Code - 2
  • Replace following line:

lstOutputs.DataSource = BizTier.GetData("country", selector, "=")

  • With the following four lines:


alsData = BizTier.GetData("country", selector, "=")

For Each item In alsData



  • Test
add golds and pop code
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
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
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 &= " "


If side = "right" Then

itm &= HttpUtility.HtmlDecode(padding)


itm = HttpUtility.HtmlDecode(padding) & itm

End If

Return itm

End Function

Spacing Function
spacing text
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
Help for Fixing Errors
  • View the code in the unzipped 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