Làm việc với các điều khiển ppsx

Working with Controls Chapter 2 The success of an application largely depends upon its user interface. For an application to be successful, its interface needs to be attractive and easy-to-use. Such a user interface can be designed by using various types of controls provided in ASP.NET. ASP.NET provides various types of controls that can be added to a Web form to make it interactive. However, while developing an application, you may face a situation where the built-in controls do not fulfill your requirements. In such a situation, you need to create custom controls. This chapter provides an overview of the controls used in an ASP.NET application. It also discusses how to create custom controls and implement them in a Web application. In this chapter, you will learn to:  Use ASP.NET Web Server controls  Create custom controls Objectives NIIT Working with Controls 2.3 N ot e In the earlier days of Web development, the programmers had to use HTML controls to design a Web application because there were no other controls available. The HTML controls do not provide any built-in methods and events. Programmers had to manually write the methods and events by using client-side scripts to create a dynamic Web page. This is a time-consuming process. In addition, it is insecure because the client-side scripts are visible to the users when they view the source for the Web page. ASP.NET solves this problem by providing server controls. Server controls are the fundamental building blocks that are specifically designed to work with Web forms in an ASP.NET application. Server controls can be rendered as markup text on a Web browser and are capable of executing the program logic on the server. Server controls also provide built-in methods and events. This eliminates the need for writing the events and methods manually. In addition, it provides security to the application because the program logic is executed on the Web server and only the result is sent back to the browser in the HTML format, thus, hiding the program logic from the user. Each server control provides an object-oriented programmable interface. Therefore, each server control is an object with methods, properties, and events associated with it. Server controls can be viewed as special HTML tags, which are processed by the server. The advantages of using server controls are:  Automatic state maintenance: ASP.NET server controls provide a property called EnableViewState, which can be set to true to enable the server controls to maintain their state after a postback. Postback is the process by which a browser posts information back to itself. It can also be defined as the process by which a browser posts information back to the server by requesting the same page.  Browser independent rendering: When an ASP.NET page is requested, the server generates the corresponding HTML code for all the server controls in the page. The HTML code generated is specific to the Web browsers used by the clients. This feature saves programmers from developing different versions of the page for different Web browsers.  Easily programmable model: Server controls are implemented as objects in ASP.NET. This makes the server control programming model similar to the traditional object-oriented programming model, making it easy to program server controls. Using ASP.NET Web Server Controls 2.4 Working with Controls NIIT N ot e In addition to the server controls, ASP.NET provides HTML controls. Most HTML controls are similar to server controls. However, there is a major difference. Unlike server controls, HTML controls are processed by the Web browser. To understand the processing of the server controls in a Web page, you need to understand the sequence of their processing and how they are rendered on a Web page. The processing of a server control depends on two situations, whether the page is requested for the first time by the client or it is posted back to the Web server when the user interacts with the Web page. When a page is requested for the first time, the server controls are processed in the following sequence: 1. Initializing: The server creates an instance of the server control. 2. Loading: The instance of the control is loaded onto the page object in which it is defined. 3. PreRendering: The control is updated with the changes made to it by the user. This phase prepares the control for rendering. 4. Saving: The state information of the control is saved. For example, if a value is set for the control during the Load event, it is embedded in the HTML tag that will be returned to the browser. 5. Rendering: The server creates the corresponding HTML tag for the control. 6. Disposing: All cleanup tasks, such as closing files and database connections opened by the control are performed. 7. Unloading: All cleanup tasks, such as destroying the instances of server controls are performed. This is the final event in the life cycle of a server control. When the Web page is posted back to the Web server, the server controls are processed in the following sequence: 1. Initializing: The server creates an instance of the server control. 2. Loading view state: The view state of the control, posted by the client, is reloaded into the new instance of the control. 3. Loading control instance: The instance of the control is loaded onto the page object in which it is defined. 4. Loading the postback data: The server searches any data corresponding to the control that is loaded in the data posted by the client. Processing of Server Controls on a Web Page NIIT Working with Controls 2.5 5. PreRendering: The control is updated with the changes made in it by the user. This is done in preparation for rendering. 6. Saving: The change in the state of the controls between the current request and the previous request of the page is saved. For each change, the corresponding event is raised. For example, if the text of a textbox is changed, the new text is saved and a TextChanged event is raised. 7. Rendering: The server creates the corresponding HTML tag for the control. 8. Disposing: All cleanup tasks, such as closing files and database connections opened by the control are performed. 9. Unloading: All cleanup tasks like destroying the instances of server control are performed. This is the final event in the life cycle of a server control. The following figure illustrates the processing of a server control. Processing of a Server Control 2.6 Working with Controls NIIT N ot e In ASP.NET, Web page refers to an instance of the Page class and a Web form refers to the Web page and all the controls on it. ASP.NET provides various types of server controls. These controls can be classified into the following categories:  HTML server controls  Web server controls  Validation controls HTML Server Controls In traditional websites, HTML controls were used to enable users to interact with the website. Developers had to write the methods and events for these controls manually to provide functionality to them. This was a very tedious task. In addition, these controls were processed by the Web browser that is on the client-side, which does not provide the functionality for validating the user input or managing the state. To overcome these limitations, ASP.NET provides the HTML server controls, which are processed by the Web server and make full use of the .NET Framework utilities such as validation. Some of the common HTML server controls are:  HtmlAnchor control  HtmlInputText control  HtmlInputCheckBox control  HtmlInputRadioButton control  HtmlSelect control Types of Server Controls NIIT Working with Controls 2.7 HtmlAnchor Control The HtmlAnchor control works like the HTML <a> tag but runs on the server. It is used to direct the user from one page to another. The following table lists some properties of the HtmlAnchor control. Property Description ID Gets or sets a unique identifier to the HtmlAnchor control for reference at the server. Href Gets or sets the URL of the page to which the control is linked. Name Gets or sets a unique identifier to the HtmlAnchor control for reference at the client side. Target Gets or sets the frame or window in which the page specified in the Href property will load. The default value is _self. As a result the linked page will be loaded in the same window. Title Gets or sets the value of the tooltip attribute of the <a> tag that is displayed when the mouse pauses over the control. Properties of the HtmlAnchor Control When you click the HtmlAnchor control, the ServerClick event is raised. Consider the following markup: <a id="myAnchor1" href="URLLocation" runat="server">Click here</a> <a id="myAnchor2" OnServerClick="myFunction" runat="server">Click here</a> The preceding markup illustrates the HTML code of two HtmlAnchor server controls with the name myAnchor1 and myAnchor2, as specified by the id attribute. When myAnchor1 is clicked, the browser navigates to the new location, URLLocation, as specified in the href attribute. When myAnchor2 is clicked, the function, myFunction, attached to the ServerClick event is invoked. The OnServerClick attribute is used to attach an event handler to the ServerClick event. 2.8 Working with Controls NIIT HtmlInputText Control The HtmlInputText control works like the HTML <input type="text"> tag but runs on the server. The HtmlInputText server control is used to gather information from the user. The following table lists some properties of the HtmlInputText control. Property Description ID Gets or sets a unique identifier to the HtmlInputText control for reference at the server. Type Sets Type="Text" or Type ="Password" to specify the mode of work. Name Gets or sets a unique identifier to the HtmlInputText control for reference at the client side. Size Gets or sets the width of the control. MaxLength Gets or sets the value for the maximum characters that can be entered in the textbox. Value Gets or sets the value of the textbox or password box. Properties of the HtmlInputText Control The commonly used method of the HtmlInputText control is OnServerChange. The OnServerChange method is invoked in response to the ServerChange event. The ServerChange event is triggered when either a new text message is entered or a change is made to the existing text in the HtmlInputText control. The following markup illustrates the HTML code of two HtmlInputText controls: <input type="text" id="txtName1" maxlength="12" runat="server"> <input type="text" id="txtName2" maxlength="15" runat="server"> The preceding markup illustrates the HTML code of two HtmlInputText server controls with the names txtName1 and txtName2, as specified by the id attributes. The txtName1 can accommodate a maximum of 12 characters whereas txtName2 can accommodate a maximum of 15 characters, as specified by the maxlength attribute. HtmlInputCheckBox Control The HtmlInputCheckBox control works as the HTML <input type="checkbox"> tag but runs on the server. The HtmlInputCheckBox control is useful to implement questions that can have only two answers, such as yes/no or true/false. For example, do you like Coffee? The answer is either yes or no. NIIT Working with Controls 2.9 The following table lists some properties of the HtmlInputCheckBox control. Property Description ID Gets or sets a unique identifier to the HtmlInputCheckBox control for reference at the server. Name Gets or sets a unique identifier to the HtmlInputCheckBox control for reference at the client side. Checked Checks whether the check box is selected or not. Value Gets or sets the value of the HtmlInputCheckBox control. Properties of the HtmlInputCheckBox Control When you select or clear a check box, the ServerChange event is raised. The ServerChange event triggers the associated event handler when the page consisting the check box is submitted to the server. The following markup illustrates the HTML code for the HtmlInputCheckBox control: <input type="checkbox" id="MyCheckBox1" OnServerChange="FunctionCheckBox" runat="server"> The preceding markup uses an HtmlInputCheckBox control named MyCheckBox1, as specified by the id attribute. The OnServerChange attribute is used to attach an event handler to the ServerChange event. When the MyCheckBox1 HtmlInputCheckBox control is selected or cleared, the FunctionCheckBox method attached to its ServerChange event is invoked. HTMLInputRadioButton Control The HtmlInputRadioButton control works as the HTML <input type="radio"> tag but runs on the server. You can use the HtmlInputRadioButton control to implement multiple-choice questions, where a user can select only one option. 2.10 Working with Controls NIIT The following table lists some properties of the HtmlInputRadioButton control. Property Description ID Gets or sets a unique identifier to the HtmlInputRadioButton control for reference at the server. Checked Gets or sets the status of the radio button. This property will return true if the radio button is selected. Name Sets the name of the option button group. Value Gets or sets the value of the HtmlInputRadioButton control. Properties of the HtmlInputRadioButton Control When the HtmlInputRadioButton control changes its state from the previous state on the server, the ServerChange event is generated. You can use the following markup to implement the HtmlInputRadioButton control: <input type="radio" id="MyRadioButton" name="GroupRadio" value="Titanic" OnServerChange="FunctionRadio" runat="server"> Titanic The preceding markup uses an HtmlInputRadioButton control named MyRadioButton, as specified by the id attribute. The MyRadioButton HtmlInputRadioButton control belongs to a group GroupRadio as specified by the name attribute. When MyRadioButton is selected or cleared, the FunctionRadio method attached to its ServerChange event is invoked. The OnServerChange attribute is used to attach an event handler to the ServerChange event. HtmlSelect Control The HtmlSelect control is same as the HTML <select> element but it runs on the server. This control is used to create a list box. The HtmlSelect control is used when a user has to select an option from a list of options. The following table lists some properties of the HtmlSelect control. Property Description ID Gets or sets a unique identifier to the HtmlSelect control for reference at the server. Name Gets or sets a unique identifier to the HtmlSelect control for reference at the client side.