ASP.NET Controls

1. ASP.NET Controls Beginning ASP.NET 4.0 in C# 2010 Chapter 6 1

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. 2

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 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.

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 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.

9. Example • A simple web application using ASPX controls matching the HTML form seen earlier. 9

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. 10

11. New Web Site

12. New Web Site in Visual Studio 12

13. Empty Web Site

14. Add New Page to the Website

15. Set Name to Demo.aspx Set file name.

16. Initial File Set Design View.

17. Demo.aspx View Toolbox. Position cursor in div box.

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. 18

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.

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. 20

21. Design the Form To specify values for the Classification Dropdown List, click on Items in its Properties. Click on the ... icon for Items. 21 Use numeric values, 0 – 5, for “Value”.

22. The Form

23. Title is a Property of the Document Select DOCUMENT 23 Set Title

24. What We Wrote 24

25. What we wrote 25

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. 26

27. Build and Run 27

28. Demo.aspx in Chrome 28

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. 29

30. The TextBoxes Each ASPX Label became an HTML span. Each ASPX TextBox became an HTML input, type=“text” 30

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. 31

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. 32

33. The Button The asp:Button became an HTML input, type=“submit”.

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.

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.

36. Demo.aspx.cs Can be deleted.

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.

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; } } } 38

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. 39

40. Inputs Filled In 40

41. Stopped at Breakpoint Right click on a variable and select QuickWatch.

42. QuickWatch

43. QuickWatch Or just hover the cursor over a variable and see its value in a tooltip.

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.

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?

46. What the Browser Received

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.

48. 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"]; } Note C# indexer syntax. Request.Form holds all inputs as Name-Value pairs

49. QuickWatch for an Input Value 49

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.