010_Getting_Started_with_ASP_Dot_Net by xiaopangnv

VIEWS: 62 PAGES: 69

									    Getting Started with ASP.NET


Beginning ASP.NET 4.0 in C# 2010

         Chapters 5 and 6



                                   1
                 Objectives


You will be able to
 Create a very simple web application in

  Visual Studio 2010.
 Dynamically alter contents of a page.

 Get and process text input from the user.

 Understand the relationship between

  what you write in Visual Studio and what
  the browser receives from the server.


                                          2
                          ASP.NET

   ASP.NET permits us to dynamically create
    content for a web page using code that runs on
    the server.
   Start with a file of text similar to HTML.
       Can include real HTML.
       We can modify any properties of page elements at
        run time.
   Server translates this pseudo-HTML into real
    HTML which it sends to the browser.
   We can provide code to respond to events such
    as button clicks.
                                                           3
                  Hello, World!


   Let’s start with a “Hello, World” ASP.NET
    application.
   Get past the startup hurdles before trying
    to write real web application code.
   We will use Visual Studio’s built in web
    server to test and demonstrate our web
    application code.


                                                4
                Creating a New Web App

   In Visual Studio 2010
       File > New Web Site   (NOT New project)




                                                  5
                     Empty Web Site




Check this setting
                      Web Site Name




                                      6
View Solution Explorer




                         7
The Solution Explorer




                        8
             A New “Empty” Web Site


   Visual Studio is ambiguous about “project”
   There is no project file
     such as you might have seen for Visual Studio
     Windows programs.




                                                 9
               A New “Empty” Web Site


   There is a pair of “solution” files in the
    Projects directory.




                                                 10
                   The Solution Files

   Hello.sln holds Visual Studio settings
    associated with this web site (project).
       You can look at it with WordPad.
   Hello.suo is a binary file

   These files are used only by Visual Studio.
       Not part of the web app.
       Not deployed to a web server.
   Both of these files can be reproduced at
    any time if they are deleted.
   Can generally be ignored.                11
               The Web Site Directory

C:\Documents and Settings\Rollins\My Documents\
   Visual Studio 2010\WebSites\Hello


   These files are the web app.
   Will be deployed to the web server.
   Will be in a virtual directory on the
    Internet.




                                              12
The web.config File




               Double click to open
               in VS editor




                                      13
                     The web.config File

   Every ASP.NET web app has an XML
    configuration file called web.config.
       ASCII text
   Holds information used by the server and
    (possibly) by application code.
       See page 163 and following.
   Can be edited with any plain text editor.
       Even on the server


   We will learn more about config files
    throughout the course.
       Can ignore for now.
                                                14
Initial web.config




                     15
Adding a Web Page




                    16
           Add File Default.aspx




             Note file name.

This is the usual starting page for an ASP.NET web site.   17
Default.aspx




               18
                        Default.aspx.cs




Visual Studio has also created the “code behind” file, Default.aspx.cs

                                                                         19
           Default.aspx.cs




The initial file doesn’t do anything.
                                        20
  The Design View

A WYSIWYG editor for web pages.




      View > Toolbox              21
The Design Surface




       Click here to see Source view.   22
 Source View




Click here to return to Design view.   23
  Design View




Click inside Div box.
Then double click on Label in Toolbox.




                                         24
   Add a Label




Right click on Label.
Select Properties.
Set Text property to “Hello, World!”




                                       25
Label Properties

        Click here to view in browser.




                                         26
Debugging Not Enabled




             Click OK.




                         27
Page in Chrome




                 28
What We Wrote




                29
What the Browser Received




                            30
             What’s happening here?


   When a browser requests an aspx page
    from an IIS (Microsoft) web server, IIS
    retrieves the file from the virtual
    directory and passes it to ASPX for
    processing.




                                              31
                   What’s happening here?

   ASPX translated what we wrote into what
    the browser saw.
       Using the visual designer, we wrote the
        HTML-like code shown on a previous slide.
       Visual Studio’s built-in IIS web server
        translated that code into the real HTML code
        that the browser received.
            Note that there is a single HTML form.
       The browser rendered the HTML as the page
        that we saw.

                                                      32
               Translating ASPX to HTML


   All <% ... %> tags are instructions to
    the server.
       Removed and processed by the server.

<%@ Page Language="C#" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" %>




                                                        33
               Translating ASPX to HTML


   All <asp:xxx      > tags are ASPX controls.
       Replaced by HTML as the aspx file is
        processed by ASPX on the server.
       ASPX compiles an object corresponding to
        each control.
       The object emits HTML text as the page is
        rendered on the server.


   All HTML text is passed to the browser
    unchanged.
                                                    34
               Translating ASPX to HTML




ASPX




 HTML   <span id="Label1">Hello, World!</span>
                                                 35
                      Add Some Style

   In Design view, right click on the label and select
    Properties.

   Properties window will appear.
   Expand Font and set Font properties
      Bold: True

      Name: Arial

      Size: XX-Large

   Set ForeColor property to Red



                                                          36
Set Properties




                 37
             Give the Page a Title


                                           Select
                                           DOCUMENT




                                                            38
Click the Play button to display the page in the browser.
        Our Page in Chrome

Title




                             39
What We Wrote




                40
What the Browser Received




                            41
               The Code-Behind File


   View Solution Explorer
   Expand Default.aspx
   Double click on Default.aspx.cs to open
    the source code file in an editor window.




                                            42
             Class _Default




Page_Load will be executed before
the page is rendered on the server.   43
Dynamically Alter the Page




                             44
The New Version in Chrome




                            45
        What We Wrote




Default.aspx has not changed.
                                46
   What the Browser Received




The text inside the <span> is different.
                                           47
                    What’s happening here?

   The server read file Default.aspx

   The server instantiated the label as an object.
       With the properties that we had set.

   The server read and compiled Default.aspx.cs, and
    then invoked our Page_Load method.

   Our code modified properties of the label object.
       Lable1.Text
       Label1.ForeColor

   The server invoked a method of the label object.
       Output yourself as HTML.

   The browser saw the resulting HTML.
                                                        48
                   Getting User Input

   Let’s modify the page to get the user’s name
    and customize the greeting for the user.

   Back in the Designer
       View the toolbox
       Position the cursor in front of Hello, World!
       Press Enter several times to add some space
        above Hello, World.
       Position the cursor at the top of the div box.



                                                     49
                   Getting User Input

   In the Toolbox, double click Label to add a
    Label to the page.
   Press Enter
   In the Toolbox, double click TextBox.
        You may need to scroll down in the Toolbox.
   Resize the Textbox as shown on the next
    slide.




                                                       50
Getting User Input




                     51
             Modify the Page in the Designer


   Give the original label a name.
       lblGreeting in its (ID) Property

   Set text for new label to “Please enter
    your name then click OK.”
   Set ID property of the TextBox to
    tbName.




                                               52
In the Designer




                  53
                   Add a Button


   Position the cursor between the textbox
    and Hello, World!
   Double click Button in ToolBox.
   Set its Text property to OK.
   Set its ID to btnOK.
   Resize the button, making it a bit larger.




                                                 54
Add a Button




               55
                  Add a Button


   Double click on the button to generate an
    event handler.

   Add code to the event handler as shown
    in the next slide.




                                             56
The Button-click Event Handler




                                 57
  The Page in Chrome




Enter your name and then click OK.


                                     58
After Clicking OK




                    59
What We Wrote
What the Browser Saw Initially




          Scroll down.

                                 61
What the Browser Saw Initially




                                 62
What the Browser Saw After the Click




           Scroll down.

                                       63
What the Browser Saw After the Click




                                       64
                          Files


   Let’s see what files we have created.




               The WebSites Directory
                                            65
               Directory Hello




   These files are plain text files.
       Can open in NotePad
   These files are the web app.
       Can be copied to an IIS web server and
        accessed on the Internet
                                                 66
Projects Directory




                     67
                    Solution Files




These files are used by Visual Studio to manage the project.
  Remember settings, etc.
Don’t need to look at them. Must not modify them.
Can be deleted. Visual Studio will recreate them the next
  time we open the web site.
                                                               68
                   Assignment


   Review the slides for this presentation.
   Do the examples from this lecture for
    yourself if you didn’t do them in class.

   Read (Skim) Chapters 1 - 5 of
    Beginning ASP.NET 4.0 in C# 2010




                                               69

								
To top