asp.net controls
DESCRIPTION
ASP.NET Controls. Beginning ASP.NET 4.0 in C# 2010 Chapter 6. 1. Objectives. You will be able to Use basic ASP.NET controls to design a web page. Process user inputs from ASP.NET controls in server side C# code. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/1.jpg)
11
ASP.NET Controls
Beginning ASP.NET 4.0 in C# 2010
Chapter 6
![Page 2: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/2.jpg)
2 2
Objectives
You will be able to Use basic ASP.NET controls to design
a web 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.
![Page 3: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/3.jpg)
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
![Page 4: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/4.jpg)
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.
![Page 5: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/5.jpg)
5
HTML Server Controls
Discussed in Chapter 5 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.
![Page 6: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/6.jpg)
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.
![Page 7: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/7.jpg)
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.
![Page 8: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/8.jpg)
8
User Controls and Custom Controls
Controls created by the developer i.e. by us!
Analogous to functions in software. Reusable bundles of code.
Covered lightly later in the course.
![Page 9: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/9.jpg)
9 9
Example
A simple web application using ASPX controls matching the HTML form seen earlier.
![Page 10: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/10.jpg)
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.
![Page 11: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/11.jpg)
11
New Web Site
![Page 12: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/12.jpg)
12 12
New Web Site in Visual Studio
![Page 13: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/13.jpg)
13
Empty Web Site
![Page 14: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/14.jpg)
14
Add New Page to the Website
![Page 15: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/15.jpg)
15
Set Name to Demo.aspx
Set file name.
![Page 16: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/16.jpg)
16
Initial File
Set Design View.
![Page 17: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/17.jpg)
17
Demo.aspx
View Toolbox.
Position cursor in div box.
![Page 18: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/18.jpg)
18 18
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.
![Page 19: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/19.jpg)
19
Normal Flow
In the browser, controls normally appear on the page like text in a word processing program. Left to right Top to bottom
HTML position attributes can force exceptions to normal flow.
![Page 20: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/20.jpg)
20 20
Design the Form
Give each element a meaningful name. Except the labels.
To put radio buttons into the same group give them the same value for their GroupName property.
![Page 21: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/21.jpg)
21 21
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”.
![Page 22: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/22.jpg)
22
The Form
![Page 23: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/23.jpg)
23 23
Title is a Property of the Document
Select DOCUMENT
Set Title
![Page 24: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/24.jpg)
24 24
What We Wrote
![Page 25: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/25.jpg)
25 25
What we wrote
![Page 26: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/26.jpg)
26 26
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 view of the file.
![Page 27: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/27.jpg)
27 27
Build and Run
![Page 28: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/28.jpg)
28 28
Demo.aspx in Chrome
![Page 29: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/29.jpg)
29 29
What the Browser Received
Every aspx page consists of exactly one HTML form.
The action attribute specifies the URL to request when the user clicks the Submit button.
![Page 30: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/30.jpg)
30 30
The TextBoxes
Each ASPX Label became an HTML span.
Each ASPX TextBox became an HTML input, type=“text”
![Page 31: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/31.jpg)
31 31
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.
![Page 32: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/32.jpg)
32 32
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.
![Page 33: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/33.jpg)
33
The Button
The asp:Button became an HTML input, type=“submit”.
![Page 34: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/34.jpg)
34
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.
![Page 35: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/35.jpg)
35
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.
![Page 36: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/36.jpg)
36
Demo.aspx.cs
Can be deleted.
![Page 37: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/37.jpg)
37
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.
![Page 38: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/38.jpg)
38 38
Code to Access Inputs
using System;
public partial class _Default : 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 = cbCseMajor.Checked;
String Classification = ddlClassification.SelectedValue;
}
}
}
![Page 39: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/39.jpg)
39 39
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.
![Page 40: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/40.jpg)
40 40
Inputs Filled In
![Page 41: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/41.jpg)
41
Stopped at Breakpoint
Right click on a variable and select QuickWatch.
![Page 42: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/42.jpg)
42
QuickWatch
![Page 43: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/43.jpg)
43
QuickWatch
Or just hover the cursor over a variable and see its value in a tooltip.
![Page 44: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/44.jpg)
44
Looking at Input Values
Where do these values come from?
When a postback is done, the server (IIS) instantiates objects corresponding to our ASPX controls. Initializes properties with values received
from the browser.
Our event handler code can refer to the control objects by name and access their properties.
![Page 45: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/45.jpg)
45
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”
What do .aspx pages do (get or post)? How can we tell?
![Page 46: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/46.jpg)
46
What the Browser Received
![Page 47: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/47.jpg)
47
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.
![Page 48: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/48.jpg)
Looking at the input values
using 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"];
}
48
Note C# indexer syntax.
Request.Form holds all inputs as Name-Value pairs
![Page 49: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/49.jpg)
49 49
QuickWatch for an Input Value
![Page 50: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/50.jpg)
50
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.
![Page 51: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/51.jpg)
51 51
New Page on Browser
Inputs are still set up. (Unlike .html)
![Page 52: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/52.jpg)
52 52
What the Browser Received
End of Section
![Page 53: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/53.jpg)
53
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.
![Page 54: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/54.jpg)
54
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 programatically using the Focus method of any input.
This is implemented by a JavaScript script created by IIS and sent to the browser along with the translated ASPX page.
![Page 55: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/55.jpg)
55
Setting the Focus
protected 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();
}
}
![Page 56: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/56.jpg)
56
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.
![Page 57: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/57.jpg)
57
Controlling Tab Order
Set TabIndex property of tbLastName and tbFirstName to 1 and 2. Leave others set to 0.
Try it!
![Page 58: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/58.jpg)
58
The Default Button
We can specify a button to be automatically clicked if the user hit the Enter key.
Set the DefaultButton property of the <form> tag.
![Page 59: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/59.jpg)
59
The Default Button
![Page 60: ASP.NET Controls](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56812aa7550346895d8e68e6/html5/thumbnails/60.jpg)
60
The Default Button