This presentation is the property of its rightful owner.
Sponsored Links
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

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

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

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

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 mangling1

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 mangling2

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

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

A Simple User Control

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




















A simple user control1

A Simple User Control

Using a user control in a page

Using a User Control in a page

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



Master pages

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

Creating a Master Page

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



Important notes

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

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

Accessing the master page

  • On the Designer page:

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

  • And in the Code Behind:

    stringx = Master.CustomProperty;

  • Login