1 / 23

Controls

Controls. Things like Textboxes, L ables , ‘ n’at. 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. A Simple Control.

hedia
Download Presentation

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

More Related