Presentation on theme: "11 Getting Started with ASP.NET Beginning ASP.NET 4.0 in C# 2010 Chapters 5 and 6."— Presentation transcript:
11 Getting Started with ASP.NET Beginning ASP.NET 4.0 in C# 2010 Chapters 5 and 6
22 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.
33 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.
44 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.
55 Creating a New Web App In Visual Studio 2010 File > New Web Site (NOT New project)
6 Empty Web Site Web Site Name Check this setting
9 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.
10 A New “Empty” Web Site There is a pair of “solution” files in the Projects directory.
11 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.
12 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.
13 The web.config File Double click to open in VS editor
14 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.
31 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.
32 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.
33 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" %>
34 Translating ASPX to HTML All 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.
35 Translating ASPX to HTML Hello, World! ASPX HTML
36 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
47 What the Browser Received The text inside the is different.
48 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.
49 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.
50 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.
52 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.
54 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.
68 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.
69 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