1 / 72

Chapter 3 Working with the Standard Web Server Controls

Chapter 3 Working with the Standard Web Server Controls. Overview. This presentation covers the initial overview of the different server controls. Introducing Server Controls.

haamid
Download Presentation

Chapter 3 Working with the Standard Web Server Controls

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Chapter 3Working with the Standard Web Server Controls

  2. Overview • This presentation covers the initial overview of the different server controls.

  3. Introducing Server Controls • Normal HTML tags such as <input>, <H1> and <select> are not processed by the server but are sent to and displayed by the browser. • Server controls, in contrast, are tags that can be understood by the server. • Each ASP.NET server control has an object model containing properties, methods, and events.

  4. Introducing Server Controls • There are five kinds of server controls: • HTML server controls • Web server controls • Validation server controls • User controls • Custom server controls • All five of these different types of controls can be used within a single given Web form.

  5. 1.HTML Server Controls • Most standard HTML tags can be turned into HTML server controls simply by adding the runat="server" attribute. • This runat attribute indicates that the element is to be processed on the server. • You can this programmatically respond to events or bind data.

  6. 1.HTML Server Controls • HTML server controls can be useful for: • situations in which you need complete control over how the HTML element will be rendered in the browser, or • when migrating an existing ASP page to ASP.NET. • Web server controls are almost always preferable to HTML server controls due to their richly typed object model.

  7. 2.Web Server Controls • Web server controls are also created on the server and they require a runat="server" attribute to work. <asp:Button ID="myButton" runat="server" />

  8. 2.Web Server Controls • Some Web server controls represent traditional HTML form elements such as buttons and drop-down lists. • Other Web server controls represent more complex or abstract elements such as calendars, data lists, data sources, and tree views.

  9. 3.Validation Controls • These controls allow you to test a user’s input for validity. • They are actually a special type of Web server control. • Validation controls encapsulate common user input validation checks required by most Web applications: • ensuring that a required field is not empty, • comparing an input value against another value, • checking if a value falls within a range, • verifying that an input value matches a given pattern.

  10. 4.User Controls • These are developer-created controls that use the same programming techniques used to write Web forms pages. • They typically allow the encapsulation of the functionality of multiple server controls along with other ASP.NET or HTML content in a single unit.

  11. 5.Custom Server Controls • A custom server control is a Web server control that you can create. • A custom control is a compiled class and may combine multiple existing server controls. • A custom control, unlike a user control, contains no declarative elements, and can be extended, use templates, support data binding, and be redistributed in a precompiled assembly.

  12. Web Server Control Overview • Web server controls are added to a Web form in the same way as any HTML element: • You can type the markup code in Source view in VS. • You can use drag-and-drop from Source or Design view. • As well, you can programmatically add controls at runtime.

  13. Web Server Control Syntax <asp:controlName id="some_id" runat="server" «other attributes» > </asp:controlName>

  14. List of the Common Web Server Controls

  15. List of the Common Web Server Controls

  16. List of the Common Web Server Controls

  17. Common Members • Learning how to work with all of these controls might seem a daunting prospect. • Thankfully, Web server controls share a common object model which make the process of learning how to use Web server controls easier.

  18. Object Model

  19. Common Members • Most Web server controls inherit from the WebControl class. • This WebControl class in turn inherits from the Control class. • Both of these base classes define a variety of properties, methods, and events that are available to all controls derived from them. • Most of these modify the formatting and display of the controls.

  20. Some Properties of the WebControl Class

  21. Some Properties of the Control Class

  22. Subproperties • Properties can also have properties; • these are called subproperties. • For instance, the Font property is a complex object with properties of its own, such as Name and Size. • When working with subproperties programmatically, you use dot notation. • e.g., somecontrol.Font.Size=10; • When working with subproperties declaratively, you use hyphen (-) notation. • e.g., <asp:Label id="acontrol" Font-Size="10" runat="server" />

  23. Manipulating Properties Programmatically • You can retrieve the value of a property or set the value of a property at runtime. • These properties are strongly typed and vary depending upon the property. • Some properties have a primitive data type such as a Boolean or a numeric. • Other property values are defined by an enumerated type or some other type.

  24. Event Properties • All controls support events. • You can specify the event handler method for a given event declaratively by affixing the Onprefix to the event property name. • E.g., if you have an event handling method named btnOne_Clickthat you want to run when the user clicks a button, you would use: <asp:button id="btnOne" runat="server" OnClick="btnOne_Click" />

  25. Event Methods • All event methods in the .NET Framework are void methods with two parameters: • the source object that raised the event • the data for the event, usually contained within an EventArgs object (or an object derived from it). • Thus, the method signature for the event handler would be: public void btnOne_Click(object source, EventArgs e) { // code goes here }

  26. Unit-Based Measurement Properties • Various measurement properties such as Width, Height, and Font.Size are implemented using the Unit structure. • This Unit structure allows you to use any HTML- or CSS-compatible size unit, such as cm, inch, and pixels. • These size units are defined in the UnitType enumeration. • For instance, you can set the Width property to 90 pixels using Unit un = new Unit(90); un.Type = UnitType.Pixel; labMsg.Width = un;

  27. Color-Based Properties • All color-based properties use the Color structure. • The Color structure defines: • all the HTML 4.0 system-defined colors • the color names supported by most browsers • methods for retrieving and specifying color using different color models (such as HSB and RGB).

  28. Color-Based Properties • Acolor can be specified in at least four different ways, as shown here: // Set the color using predefined value labMsg.ForeColor = Color.Gold; // Set the color using a predefined name labMsg.ForeColor = Color.FromName("Gold"); // Set the color using RGB labMsg.ForeColor = Color.FromArgb(204, 153, 0); // Set the color using hexadecimal HTML color labMsg.ForeColor = Color.FromName("#CC9900");

  29. Collection Properties • Some properties are not a single structure, primitive, or enumerated type, but a collection of other objects. • An example of such a property is the Items collection of the DropDownList control. • This collection contains zero or more ListItem objects. • These collection properties have their own methods and properties for determining the size of the collection, as well for adding, retrieving, and removing items from the collection. DropDownListdrpSample = new DropDownList(); // Create the item, then add to collection ListItem li = new ListItem("Item 2"); drpSample.Items.Add(li); // Combine the creation and addition to collection steps drpSample.Items.Add(new ListItem("Item 1"));

  30. Essential Controls • See pages 107-176 for details. • This section covers the essential standard Web server controls in detail. • For each of these controls there are descriptions, property and event summaries, and sample listings that illustrate typical uses of that control. • You can download either a starting or a finished version of the files used in the chapter from This Web site, http://www.randyconnolly.com/core.

  31. Label Control • The Label control is used to display static (that is, users cannot edit it) content on a Web page. • A Label control is typically used when you want to programmatically change or set the text in a page at runtime. • Label controls can also be used as child controls of some of the other templated controls such as the Repeater and the GridView. • <asp:Label id="labMsg" runat="server" text="hello"/>

  32. Label Control • Table 3.4 lists the unique properties of the Label control. • <asp:Label id="labMsg" runat="server" text="hello"/> • is rendered as • <span id="labMsg">hello</span>

  33. Literal Control • Like the Label control, the Literal control displays static text content on a Web page. • Also like the Label control, the Literal control allows for the programmatic manipulation of its content at runtime using server code. • The Literal control does not add any HTML elements to the text, e.g., • <asp:Literal id="litMsg" runat="server" text="hello"/> • will be rendered as • hello

  34. TexBox control • The TextBox control is used to display a single-line text box or a multiline text area form element. • This text box can contain either a single or multiple lines. • Table 3.6 lists the unique properties of the TextBox control.

  35. TextBox MaxLength="2" TextMode="MultiLine" TextMode="Password"

  36. TexBox • The TextBox control has one unique event. • Like all control events, this event property can be declaratively set using the OnPropertyNamesyntax. • This event is raised when the text has changed in the control on a postback to the server.

  37. TexBox • In the example in Listings 3.4 and 3.5, the label for the region control is changed based on the value in the Country text box. • Note that the event is only triggered after a postback to the server. • In the listing, a postback automatically occurs after the text changed event via the AutoPostBack property on the TextBox.

  38. Button-Style Controls • There are three kinds of button controls in ASP.NET. • Button—Displays a standard HTML submit button. • LinkButton—Displays a hyperlink that works as a button. Unlike a regular HTML <a> element or the HyperLink control, the LinkButtoncontrol causes a postback (and thus allows for post-click processing on the server). • ImageButton—Displays an image that works as a button and that allows you to determine the image coordinates of the location that was clicked. • All three button controls submit the form to the server when clicked; that is, they cause a postback to the server when clicked.

  39. Button-Style Controls • Support two main events. Both are raised when user clicks on the button. • Click • Used for single buttons • Command • Used when you want several related buttons to share the same event handler.

  40. Button-Style Controls Button LinkButton ImageButton

  41. CheckBox Control • The CheckBox control allows a user to choose between a true or false state. • It is rendered on the browser as a check box form element. The CheckBox is usually just a single element within a form. • it can, however, be used to cause a postback to the server

More Related