Controls

1. Controls Things like Textboxes, Lables, ‘n’at

2. ASPX page is not HTML • Controls are rendered into markup that a browser can understand • Some controls are rendered as HTML • Some controls are rendered as javascript • Some controls don’t render at all

3. A Simple Control <asp:LabelID="Label1"runat="server"Text="Awesome Label"></asp:Label> • Important Notes: • Runat=“server” • Required if you want to be rendered as a server control instead of regular HTML • ID=“Label1” • Required if you want to access this control from the code-behind .

4. How Does it Render? <spanid="Label1">Awesome Label</span> • In this case, the control renders as less code than there was in the ASPX page • not the case with all controls • Will render differently based on the HTTP context (different browsers, HTTP versions, mobile support, etc.)

5. Name Mangling • ASP.NET ID’s are not guaranteed to stay the same when a page is rendered • ASP.NET “mangles” the name to make it unique on a page.

6. Name Mangling • If The Page is placed inside a master page [EPIC FORSHADOWING]: <spanid="ContentPlaceHolder1_Label1">Awesome Label</span> • Controls are named with the name of its containing control.

7. Name Mangling • Id’s are different on the client side compared to the server side • This is important to know if you are using *any* client side code. • Use the Control.ClientID to access this name from the server side

8. Textboxes • <asp:TextBoxID="TextBox1"runat="server"Text="Sample Text"></asp:TextBox> • Similar to Label control • Can use this control to get input from the user

9. Textboxes • <inputname="ctl00$ContentPlaceHolder1$TextBox1"type="text"value="Sample Text"id="ContentPlaceHolder1_TextBox1"/> • Textboxes render as <input>. • The “text” field is rendered as “value”

10. DropDownList <asp:DropDownListrunat="server"ID="DropDownList1"> <asp:ListItemText="Option 1"Value="1"></asp:ListItem> <asp:ListItemText="Option 2"Value="2"></asp:ListItem> </asp:DropDownList>

11. DropDownList <selectname="ctl00$ContentPlaceHolder1$DropDownList1"id="ContentPlaceHolder1_DropDownList1"> <optionvalue="1">Option 1</option> <optionvalue="2">Option 2</option> </select>

12. CheckBoxList <asp:CheckBoxListID="CheckBoxList1"runat="server"> <asp:ListItemText="Option 1"Value="1"Selected="True"> </asp:ListItem> <asp:ListItemText="Option 2"Value="2"></asp:ListItem> </asp:CheckBoxList>

13. CheckBoxList <tableid="ContentPlaceHolder1_CheckBoxList1"> <tr> <td><inputid="ContentPlaceHolder1_CheckBoxList1_0"type="checkbox"name="ctl00$ContentPlaceHolder1$CheckBoxList1$0"checked="checked"value="1"/><labelfor="ContentPlaceHolder1_CheckBoxList1_0">Option 1</label></td> </tr><tr> <td><inputid="ContentPlaceHolder1_CheckBoxList1_1"type="checkbox"name="ctl00$ContentPlaceHolder1$CheckBoxList1$1"value="2"/><labelfor="ContentPlaceHolder1_CheckBoxList1_1">Option 2</label></td> </tr> </table>

14. CheckBoxList • Note this: <labelfor="ContentPlaceHolder1_CheckBoxList1_1"> • This lets you click on the name of the checkbox and still “check” the box • Many server controls are rendered with tables • This makes the display more consistent across browsers* • This is so ASP.NET doesn’t have to make assumptions about any CSS styling your page uses

15. User Controls • Used to group multiple controls and treat them as a single control • Can be used more than once on a page, and on multiple pages

16. A Simple User Control <%@ControlLanguage="C#"AutoEventWireup="true"CodeBehind="SimpleUserControl.ascx.cs"Inherits="Course_Offerings.SimpleUserControl"%> <div> <asp:LabelID="Label5"runat="server"Text="Name"style="display:inline-block;width:60px;"></asp:Label> <asp:TextBoxID="TextBoxName"runat="server"></asp:TextBox> </div><div> <asp:LabelID="Label1"runat="server"Text="Address"style="display:inline-block;width:60px;"></asp:Label> <asp:TextBoxID="TextBoxAddress1"runat="server"></asp:TextBox> </div> <div> <asp:LabelID="Label2"runat="server"Text="City"style="display:inline-block;width:60px;"></asp:Label> <asp:TextBoxID="TextBoxCity"runat="server"></asp:TextBox> </div> <div> <asp:LabelID="Label3"runat="server"Text="State"style="display:inline-block;width:60px;"></asp:Label> <asp:TextBoxID="TextBoxState"runat="server"></asp:TextBox> </div> <div> <asp:LabelID="Label4"runat="server"Text="Zip"style="display:inline-block;width:60px;"></asp:Label> <asp:TextBoxID="TextBoxZip"runat="server"></asp:TextBox> </div>

17. A Simple User Control

18. Using a User Control in a page <%@Registersrc="SimpleUserControl.ascx"tagname="SimpleUserControl"tagprefix="uc1" %> <uc1:SimpleUserControlID="SimpleUserControl1"runat="server"/> <uc1:SimpleUserControlID="SimpleUserControl2"runat="server"/>

19. Master Pages • Common layout for a group of pages • The old way: • User control placed at the top of every page • The new way: • A page inside a page • Inside a page • Inside a page • Inside a page • INSIDE YOUR DREAM!

20. Creating a Master Page <%@MasterLanguage="C#"AutoEventWireup="true"CodeBehind="Main.master.cs"Inherits="Course_Offerings.App_MasterPages.Main" %> <asp:ContentPlaceHolderID="ContentPlaceHolder1"runat="server"> </asp:ContentPlaceHolder>

21. Important Notes • ContentPlaceHolder • This is where child pages are rendered • You need at least one of these if you want child content to render • If you define a content placeholder, child pages need to use them

22. Using a Master Page <%@PageTitle=""Language="C#"MasterPageFile="~/App_MasterPages/Main.Master"AutoEventWireup="true"CodeBehind="UserControlExample.aspx.cs"Inherits="Course_Offerings.UserControlExample" %> <asp:ContentID="Content2"ContentPlaceHolderID="ContentPlaceHolder1"runat="server"> <asp:LabelID="Label1"runat="server"Text="Awesome Label“ </asp:Content>

23. Accessing the master page • On the Designer page: <%@MasterTypeVirtualPath="~/App_MasterPages/Main.Master"%> • And in the Code Behind: stringx = Master.CustomProperty;