Upload
willis-stone
View
248
Download
0
Embed Size (px)
DESCRIPTION
ASP.NET Active Server Pages “Classic” ASP introduced in 1996 VB Script xxx.asp page files. ASP.NET introduced in 2002 xxx.aspx page files. xxx.aspx.cs or xxx.aspx.vb code files. ASP.NET MVC introduced
Citation preview
11
Getting Started with ASP.NET
Beginning ASP.NET 4.5.1 in C# and VB
Chapters 1 and 2
2 2
Objectives
You will be able to Create a very simple web
application in Visual Studio. 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.
ASP.NET
Active Server Pages “Classic” ASP introduced in 1996 VB Script xxx.asp page files.
ASP.NET introduced in 2002 xxx.aspx page files. xxx.aspx.cs or xxx.aspx.vb code files.
ASP.NET MVC introduced 20073
4 4
ASP.NET ASP.NET permits us to dynamically create
content for a web page using code that runs on the server.
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 C# or VB code to respond
to events such as button clicks.
5 5
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.
6 6
Creating a New Web App In Visual Studio, File > New Web Site (NOT New project)
Web Site vs. Project in Visual Studio.https://msdn.microsoft.com/en-us/library/dd547590(v=vs.110).aspx
7
Empty Web Site
Web Site NameCheck this setting
Check this setting
8
View Solution Explorer
9 9
The Solution Explorer
10
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 desktop programs.
11
A New “Empty” Web Site
There is a project directory
12
The Solution Files Hello.sln holds Visual Studio settings
associated with this web site (project). You can look at it with NotePad.
Hello.suo is a binary file Hidden by default. You may not see it. Holds Visual Studio state information.
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 by Visual Studio at any time if they are deleted.
Can generally be ignored.
13
The Web Site DirectoryC:\Users\turnerr\Documents\Visual Studio 2015\WebSites\Hello
The files in this directory are the web app. Will be deployed to the web server. Will be in a virtual directory on the Internet.
14 14
The web.config File
Double click to open in VS editor
15
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.
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.
16
Initial web.config
17
Adding a Web Page
Note: Website menu
18
Add File Default.aspx
Note file name.
This is the usual starting page for an ASP.NET web site.
19
Default.aspx
Click here to expand this tree node.
20
Default.aspx.csVisual Studio has also created the “code behind” file, Default.aspx.cs
Double click on the file name to open it in the VS editor.
21
Default.aspx.cs
The initial file doesn’t do anything.
Default.aspx
22
Click on Design
23
The Design ViewA WYSIWYG editor for web pages.
View > Toolbox
24 24
The Design Surface
Click here to see Source view.
25
Source View
Click here to return to Design view.
26
Design View
Click inside Div box.Then double click on Label in Toolbox.
27
Add a Label
Right click on Label.Select Properties.Set Text property to Hello, World!
28
Label Properties
Click here to view in browser.
29
Page in Chrome
30
What We Wrote
Look at the browser’s page source
31
In Chrome, right click in the page to open context menu.Then select "View page source".
32
What the Browser Received
33
What’s happening here?
When a browser requests an aspx page from an IIS (Microsoft) web server, IIS retrieves the file and passes it to ASPX for processing.
34 34
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 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.
35
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" %>
36
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.
Any HTML text is passed to the browser unchanged.
37
Translating ASPX to HTML
<span id="Label1">Hello, World!</span>
ASPX
HTML
38
Add Some Style Back in the Designer
Stop the program. Debug > Stop Debugging or Shift+F5 or Click “Stop”
Button 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
39 39
Design View
40 40
Give the Page a Title
Select DOCUMENT
Click the Play button to display the page in the browser.
41 41
Our Page in ChromeTitle
42 42
What We Wrote
“Properties” became attributes in the <asp:Label> element.
43 43
What the Browser Received
44 44
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.
45
Class _Default
Page_Load will be executed after Default.aspx has been retrieved from the disk and before the page is rendered on the server.
46 46
Dynamically Alter the Page
Click the Play button to display the page in the browser.
47 47
The New Version in Chrome
48
What We Wrote
Default.aspx has not changed.
49
What the Browser Received
The text inside the <span> is different now.
50 50
What’s happening here?
The server read file Default.aspx The server instantiated the label control 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.End of Section
51 51
Getting User Input
Let’s modify the page to get the user’s name and customize the greeting for the user.
Do this in the Page_Load event handler. Back in the Designer
Stop the program. Debug > Stop Debugging or Shift+F5 or Click “Stop”
Button View the toolbox Position the cursor above <asp:Label ... Press Enter several times to add some
space above the label. Position the cursor at the top of the div.
52 52
Getting User Input
In the Toolbox, double click Label to add another Label to the page.
Press Enter to move the cursor down to the next line.
In the Toolbox, double click TextBox. You may need to scroll down in the Toolbox.
Resize the Textbox as shown on the next slide.
53 53
Getting User Input
54 54
Modify the Page in the Designer
Properties that we will modify in the code behind should have meaningful names.
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.
55 55
In the Designer
56 56
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.
57 57
Adding a Button
58 58
Adding a Button
Double click on the button to generate an event handler for the click event.
Add code to the event handler as shown in the next slide.
59 59
The Button-click Event Handler
Click the Play button (or press F5).
60 60
The Initial Page in Chrome
Enter your name and then click OK.
61 61
After Clicking OK
What We Wrote
63 63
What the Browser Saw Initially
64 64
What the Browser Saw After the Click
End of Section
Debugging in Visual Studio
Click in the grey margin on the left side of a code page to set a breakpoint.
When the breakpoint is hit, we can examine variables. And even change them!
After stopping at a breakpoint, we can single step the program.
65
Breakpoints Set
66 Click the Play button.
Breakpoint Hit
67
The Debug Menu
68
Examining Variables
Drag the cursor over lblGreeting.Text to select it. Then right click and select QuickWatch from the
context menu that pops up.
69
Changing Variables at Breakpoints
70
Right click on the Value and select Edit Value.
Changing Variable at Breakpoint
71 Press F5 to continue.
Enter new value for lblGreeting.Text (with quotation marks.)Press Enter then click Close.
Result
72 End of Section
73 73
Files Let’s see what files we have created.
The WebSites Directory
74 74
Directory Hello
These files are plain text files. Can opened and edited in NotePad
These files are the web app. Can be copied to an IIS web server
and accessed on the Internet
75 75
Projects Directory
76 76
Project 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.Can be deleted. Visual Studio will recreate them the next
time we open the web site (but any settings that we have changed will revert to their default values.)
77 77
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 and 2 of Beginning ASP.NET 4.5.1 in C# and VB