Date post: | 18-Jan-2018 |
Category: |
Documents |
Upload: | gabriella-hubbard |
View: | 254 times |
Download: | 6 times |
11
ASP.NET Server Controls
Beginning ASP.NET 4.5.1in C# and VB
Chapter 4
2 2
Objectives
You will be able to Use basic ASP.NET controls to design an ASP.NET
Web Forms page. Process user inputs from ASP.NET controls in
server side C# code. Understand the relationship between the ASP.NET
code that you write in Visual Studio and the HTML that is received by the browser.
3
ASP.NET Controls
Building blocks for a web page
Normal HTML HTML Server Controls ASP.NET Server Controls ASP.NET AJAX Controls User/Custom controls
4
Normal HTML
Normal HTML Can be included in an ASPX.NET page. Passed to browser as written. Usually not processed by server code.
Server code can get user input values from normal HTML input controls.
5
HTML Server Controls
Discussed in Chapter 4 of our textbook.
Normal HTML plus “runat=server” Permit server code to modify the
HTML. Mainly to support backward
compatibility. Move existing HTML into an ASP.NET
site.
Not used in this class.
6
ASP.NET Server Controls
Pseudo-HTML Include “asp:” prefix
<asp:Label ... > text </asp:Label>
Translated into real HTML before being sent to browser.
WYSIWYG Designer in Visual Studio. Conveniently accessible to our server side code.
May result in JavaScript script being sent to the browser and exectuted there.
Used extensively in this course.
7
ASP.NET AJAX Server Controls
Include Javascript code that runs on the browser. Permits more interactive user interface.
Ignore for now. We will look at AJAX in some depth later
in the course.
8
User Controls
Controls created by the developer i.e. by us!
Analogous to functions in software. Reusable bundles of code. Consist of existing controls and HTML
Covered lightly later in the course.
9 9
Example A simple web application using ASPX
controls matching the HTML form seen earlier.
10 10
Example
Permits user to enter personal information.
A typical real web app would write this information into a database.
We will use a Visual Studio breakpoint to look at the user inputs as properties of ASPX control objects.
Create a new empty web site called ASPX_Demo.
11
New Web Site
12 12
New Web Site in Visual Studio
13
Empty Web Site
14
Add New Page to the Website
15
Set Page Name to Demo.aspx
Set file name.
16
Initial File
Set Design View.
17
Demo.aspx in Design View
View Toolbox.Position cursor in div box.
Demo.aspx in Design View
18
19 19
Design the Form Add “Standard” (ASPX) controls
from the Toolbox to the design surface to design a form similar to the one seen earlier. Double click to add at cursor position Or drag and drop.
Use space bar and new line to control position of elements.
Check the Source view from time to time as you lay out the form.
20
Normal Flow In the browser, controls normally
appear on the page like text in a word processing program. Left to right Top to bottom
This is usually what you should do.
HTML position attributes can force exceptions to normal flow.
21 21
Design the Form
Give each input element a meaningful name.
To put radio buttons into the same group give them the same value for their GroupName property.
22 22
Design the Form
To specify values for the Classification Dropdown List, click on Items in its Properties.
Click on the ... icon for Items.
Use numeric values, 0 – 5, for “Value”.
Click OK when finished.
The Form in Design View
23
The Form in Source View
24
25 25
Title is a Property of the Document
Set Title
Select DOCUMENT
26 26
What We Wrote
27 27
What we wrote
28 28
File ASPX_Demo.aspx
This text file holds the results of our design work.
We could have written it with NotePad. The visual designer is just a more convenient way of
writing.
29 29
Build and Run
Click the "Play" button to view the page in your default browser.
30 30
Demo.aspx in Chrome
31 31
What the Browser Received
Every aspx web forms page consists of exactly one HTML form.The action attribute specifies the URL to request when the user clicks the Submit button.
32 32
The TextBoxes
Each ASPX Label became an HTML span.Each ASPX TextBox became an HTML input, type=“text”
33 33
The Radio Buttons
Each asp:RadioButton became an HTML input, type=“radio”.ASPX “ID” became “id” in HTML.ASPX “GroupName” became “name” in HTML.ASPX “Text” became text in an HTML label.
34 34
Checkbox and Dropdown List
The asp:CheckBox became an HTML input, type = “checkbox”The asp:DropDownList became an HTML select.Each asp.ListItem became an HTML option.
35
The Buttons
Each asp:Button became an HTML input, type=“submit”.
36
Postback
Clicking the Submit button will result in a postback.
Changing other inputs does not.
Users expect to be able to make changes to inputs before they click a button to submit them.
37
Code to Access Inputs
We can write C# code to process inputs. The “code behind” file, Demo.aspx.cs
Double click on Demo.aspx.cs in the Solution Explorer.
Visual Studio opens the file in an editor window.
38
Demo.aspx.cs
Can be deleted.
39
Inputs Input from each control is available as a
property of a C# object corresponding to the control.
Object name is the name that we gave the control in the ASPX page.
40 40
Code to Access Inputs
using System;
public partial class Demo : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (IsPostBack) { String Last_Name = tbLastName.Text; String First_Name = tbFirstName.Text; Boolean Unspecified = rbUnspecified.Checked; Boolean Male = rbMale.Checked; Boolean Female = rbFemale.Checked; Boolean CSE_Dept_Major = cbCseDeptMajor.Checked; String Classification = ddlClassification.SelectedValue; } }}
41 41
Looking at Input Values
Set breakpoint at the end of the “if” block and examine the variables. Hover the mouse over a variable. Or rightclick and select QuickWatch.
42 42
Inputs Filled In
43
Stopped at Breakpoint
Right click on a variable and select QuickWatch.
44
QuickWatch
45
QuickWatch
Or just hover the cursor over a variable and see its value in a tooltip.
46
Looking at Input Values
Where do these values come from?
When a postback is done, the server (ASPX) instantiates objects corresponding to our ASPX controls. Initializes objects’ properties with values
received from the browser.
Our event handler code can refer to the control objects by name and access their properties.
47
Looking at Input Values
The only data available to the server is that provided by the user in the HTML <form> input elements.
Name-Value pairs are included in the request by the browser.
Appended to the URL for “get” Included in the request Message for “post”
48
Looking at Input Values
The entire collection of name-value pairs is directly available to our code as the Form property of the Request object. Set up by IIS when it processes a page
request. Would include values from plain HTML inputs
if there were any.
Let’s add some code to look at the inputs collection directly.
Looking at the Input Valuesusing System;using System.Collections.Specialized;
public partial class Demo : System.Web.UI.Page{ protected void Page_Load(object sender, EventArgs e) { if (IsPostBack) { NameValueCollection inputs = Request.Form;
String Last_Name = inputs["tbLastName"]; String First_Name = inputs["tbFirstName"]; String Gender = inputs["Gender"]; String CSE_Dept_Major = inputs["cbCSEDeptMajor"]; String Classification = inputs["ddlClassification"]; }
49
Note C# indexer syntax.
Request.Form holds all inputs as Name-Value pairs
50 50
QuickWatch for an Input Value
51
The Gender Input
Note that there is only one input for the gender RadioButton group. Name is the ASPX controls' GroupName Value is the ID of the checked radio button.
Contrast to representation as object properties.
52 52
New Page on Browser
Inputs are still set up. (Unlike .html)
53 53
What the Browser Received
End of Section
54
Refinements
We have seen the basic functionality of an ASPX web app.
Next we will look at a number of refinements. Get a deeper understanding of ASPX controls. Get some tips about page design.
55
Setting the Focus No control has the focus when the form
is first displayed. We have to click on the Last Name
textbox in order to enter text. The app can set the focus
programmatically using the Focus method of any input.
This is implemented by a JavaScript script created by AXPX and sent to the browser along with the translated ASPX page.
56
Setting the Focusprotected void Page_Load(object sender, EventArgs e){ if (IsPostBack) { NameValueCollection inputs = Request.Form;
String Last_Name = inputs["tbLastName"]; String First_Name = inputs["tbLastName"]; String Gender = inputs["Gender"]; String CSE_Dept_Major = inputs["cbCseMajor"]; String Classification = inputs["ddlClassification"]; } else { tbLastName.Focus(); }}
57
Advancing the Focus
Users expect to move the focus to the next control by hitting tab. Currently this doesn’t work right.
Controlled by TabIndex property of the controls. Go to control with next higher value. Skip over values of 0.
58
Controlling Tab Order Set TabIndex property of tbLastName and
tbFirstName to 1 and 2. Leave others set to 0.
Try it!
59
The Default Button We can specify a button to be
automatically clicked if the user hits the Enter key.
In source view, select just the opening <form> tag.
Set the DefaultButton property of the <form> tag to btnSubmt.
60
The Default Button
61
The Default Button in Source View
End of Section
62
AutoPostBack
Most controls other than Buttons don’t cause an immediate postback. Changes result in events that can be handled
when the browser posts the form back due to user clicking a button.
The AutoPostBack property causes an immediate postback when the control is changed. Note: This is usually NOT what we want.
63
Enable/Disable Most controls have an Enabled property.
Set to false to disable the control. Set to true to enable the control.
Let’s disable the Submit button until the user has entered something into both name TextBoxes.
64
Submit Button Disabled
65
TextChanged Event
The TextBoxes can fire an event when the user changes anything in them. TextChanged
Add event handers for the two TextBoxes.
When user has entered text into both boxes, enable Submit.
66
Adding an Event Handler In Design View, double click inside each TextBox. Visual Studio adds an event handler for the
TextChanged event.
67
TextChanged Event Handler
68
The Event Handler
Add code to enable the Submit button if both textboxes have some text.
69
The Event Handler
Do the same for tbFirstName.
70
Initial Page in Chrome
Submit button is disabled.
71
Page in ChromeFill in information.
Submit button is still disabled!
What’s going on here?Why didn’t our event handler work?
72
No TextChanged Event
The TextChanged event will not fire on the server until a postback is done.
The postback will not be done until the Submit button is clicked.
But the Submit button is disabled.
We need AutoPostBack on the TextBoxes.
73
Set AutoPostBack Select tbLastName and view its properties. Set AutoPostBack to true.
Do the same for tbFirstName.
74
Try Again!
Submit button is enabled.
75
Reset the Form Let’s clear the form after a successful
registration. Provide feedback to the user. Leave the form ready for another user.
76
Reset the Form
77
Try it!
Enter last name and press tab.
78
After Tab
Now what’s wrong?
Last name disappears!
79
AutoPostBack
Leaving tbLastName caused a postback. The postback resulted in a call to
Reset_Form.
We need to clear the form only when the postback is due to click on Submit. Remove call to Reset_Form from Page_Load.
Double click on the Submit button in the Design view to add an event handler for the click event. Call Reset_Form.
80
Submit Click Event Handler
Now the app works as expected.
81 81
Assignment
Do the examples from this class for yourselfif you did not do them in class.
Read Chapter 4 of textbook Beginning ASP.NET 4.5.1 in C# and VB
End of Presentation