Sponsored Links
This presentation is the property of its rightful owner.
1 / 23

Controls PowerPoint PPT Presentation

  • Uploaded on
  • Presentation posted in: General

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.

Download Presentation


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Things like Textboxes, Lables, ‘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

<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


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

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.

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.

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


  • <asp:TextBoxID="TextBox1"runat="server"Text="Sample Text"></asp:TextBox>

  • Similar to Label control

  • Can use this control to get input from the user


  • <inputname="ctl00$ContentPlaceHolder1$TextBox1"type="text"value="Sample Text"id="ContentPlaceHolder1_TextBox1"/>

  • Textboxes render as <input>.

  • The “text” field is rendered as “value”



<asp:ListItemText="Option 1"Value="1"></asp:ListItem>

<asp:ListItemText="Option 2"Value="2"></asp:ListItem>




<optionvalue="1">Option 1</option>

<optionvalue="2">Option 2</option>




<asp:ListItemText="Option 1"Value="1"Selected="True">


<asp:ListItemText="Option 2"Value="2"></asp:ListItem>





<td><inputid="ContentPlaceHolder1_CheckBoxList1_0"type="checkbox"name="ctl00$ContentPlaceHolder1$CheckBoxList1$0"checked="checked"value="1"/><labelfor="ContentPlaceHolder1_CheckBoxList1_0">Option 1</label></td>


<td><inputid="ContentPlaceHolder1_CheckBoxList1_1"type="checkbox"name="ctl00$ContentPlaceHolder1$CheckBoxList1$1"value="2"/><labelfor="ContentPlaceHolder1_CheckBoxList1_1">Option 2</label></td>




  • Note this:


  • 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

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

A Simple User Control

<[email protected]="C#"AutoEventWireup="true"CodeBehind="SimpleUserControl.ascx.cs"Inherits="Course_Offerings.SimpleUserControl"%>




















A Simple User Control

Using a User Control in a page

<[email protected]="SimpleUserControl.ascx"tagname="SimpleUserControl"tagprefix="uc1" %>



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!

Creating a Master Page

<[email protected]="C#"AutoEventWireup="true"CodeBehind="Main.master.cs"Inherits="Course_Offerings.App_MasterPages.Main" %>



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

Using a Master Page

<[email protected]=""Language="C#"MasterPageFile="~/App_MasterPages/Main.Master"AutoEventWireup="true"CodeBehind="UserControlExample.aspx.cs"Inherits="Course_Offerings.UserControlExample" %>


<asp:LabelID="Label1"runat="server"Text="Awesome Label“


Accessing the master page

  • On the Designer page:

    <[email protected]="~/App_MasterPages/Main.Master"%>

  • And in the Code Behind:

    stringx = Master.CustomProperty;

  • Login