Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "11 ASP.NET Controls II Beginning ASP.NET 4.0 in C# 2010 Chapter 6."— Presentation transcript:

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

2 Example from Last Class http://www.cse.usf.edu/~turnerr/Web_Application_Design/Downloads/2012_05_22_In_Class/ File ASPX_Demo.zip Download Expand Open web site in Visual Studio 2

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

4 4 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 the name TextBoxes.

5 5 Submit Button Disabled

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

7 7 Adding an Event Handler Select the last name textbox. Right click and view its properties. In the properties window, click on the lightening bolt icon to display event. Double click beside TextChanged. Visual Studio adds an event handler for the TextChanged event and opens Demo.aspx.cs in the editor.

8 8 TextChanged Event

9 9 The Event Handler Add code to enable the Submit button if both textboxes have some text.

10 10 The Event Handler Do the same for tbFirstName.

11 11 Initial Page in Chrome Submit button is disabled.

12 12 Page in Chrome Fill in information. Submit button is still disabled! What’s going on here? Why didn’t our event handler work?

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

14 14 Set AutoPostBack Select tbLastName and view its properties. Set AutoPostBack to true. Do the same for tbFirstName.

15 15 Try Again! Submit button is enabled.

16 16 Reset the Form Let’s clear the form after a successful registration. Provide feedback to the user. Leave the form ready for another user.

17 17 Reset the Form

18 18 Try it! Enter last name and press tab.

19 19 After Tab Now what’s wrong? Last name disappears!

20 20 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 form Page_Load. Add an event handler for click on Submit. Call Page_Load.

21 21 Submit Click Event Handler Now the app works as expected. End of Section

22 22 Narrow Window Problem If the browser is running in a very narrow window, there is a problem.

23 23 Solution One solution is to use a table to control the layout of the TextBoxes. Often done in real world websites. Generally considered kludgy by designers. Let’s try it!

24 24 Adding a Table We need a table with two rows and two columns. Put the controls into the table cells.

25 25 Empty Table

26 26 The Completed Table <asp:TextBox ID="tbLastName" runat="server" TabIndex="1" Width="155px" AutoPostBack="True" OnTextChanged="tbLastName_TextChanged"> <asp:TextBox ID="tbFirstName" runat="server" TabIndex="2" Width="155px" AutoPostBack="True" OnTextChanged="tbFirstName_TextChanged">

27 27 Normal Window

28 28 Very Narrow Window Scroll Right

29 29 Assignment Do the examples from this class for yourself if you did not do it in class. Read Chapter 6 of Beginning ASP.NET 4.0 in C# 2010


Download ppt "11 ASP.NET Controls II Beginning ASP.NET 4.0 in C# 2010 Chapter 6."

Similar presentations


Ads by Google