Things like Textboxes, Lables, ‘n’at. ASPX page is not HTML Controls are rendered into markup...

ControlsThings like Textboxes, Lables, ‘n’at

ASPX page is not HTMLControls are rendered into markup that a

browser can understandSome controls are rendered as HTMLSome controls are rendered as javascriptSome controls don’t render at all

A Simple Control<asp:Label ID="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 HTMLID=“Label1”

Required if you want to access this control from the code-behind

.

How Does it Render?<span id="Label1">Awesome Label</span>In this case, the control renders as less code

than there was in the ASPX pagenot the case with all controls

Will render differently based on the HTTP context (different browsers, HTTP versions, mobile support, etc.)

Name ManglingASP.NET ID’s are not guaranteed to stay the

same when a page is renderedASP.NET “mangles” the name to make it

unique on a page.

Name ManglingIf The Page is placed inside a master page

[EPIC FORSHADOWING]:

<span id="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 sideThis is important to know if you are using

*any* client side code.Use the Control.ClientID to access this name

from the server side

Textboxes<asp:TextBox ID="TextBox1" runat="server" Text="Sample Text"></asp:TextBox>

Similar to Label controlCan use this control to get input from the

user

Textboxes<input name="ctl00$ContentPlaceHolder1$TextBox1" type="text" value="Sample Text" id="ContentPlaceHolder1_TextBox1" />

Textboxes render as <input>. The “text” field is rendered as “value”

DropDownList<asp:DropDownList runat="server" ID="DropDownList1"> <asp:ListItem Text="Option 1" Value="1"></asp:ListItem> <asp:ListItem Text="Option 2" Value="2"></asp:ListItem></asp:DropDownList>

DropDownList<select name="ctl00$ContentPlaceHolder1$DropDownList1" id="ContentPlaceHolder1_DropDownList1">

<option value="1">Option 1</option><option value="2">Option 2</option>

</select>

CheckBoxList<asp:CheckBoxList ID="CheckBoxList1" runat="server"> <asp:ListItem Text="Option 1" Value="1" Selected="True"> </asp:ListItem> <asp:ListItem Text="Option 2" Value="2"></asp:ListItem></asp:CheckBoxList>

CheckBoxList<table id="ContentPlaceHolder1_CheckBoxList1">

<tr><td><input id="ContentPlaceHolder1_CheckBoxList1_0"

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

</tr><tr><td><input id="ContentPlaceHolder1_CheckBoxList1_1"

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

</tr></table>

CheckBoxListNote this:<label for="ContentPlaceHolder1_CheckBoxList1_1">

This lets you click on the name of the checkbox and still “check” the box

Many server controls are rendered with tablesThis 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 controlCan be used more than once on a page, and

on multiple pages

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

A Simple User Control

Using a User Control in a page<%@ Register src="SimpleUserControl.ascx" tagname="SimpleUserControl" tagprefix="uc1" %>

<uc1:SimpleUserControl ID="SimpleUserControl1" runat="server" />

<uc1:SimpleUserControl ID="SimpleUserControl2" runat="server" />

Master PagesCommon layout for a group of pagesThe old way:

User control placed at the top of every pageThe new way:

A page inside a page Inside a page

Inside a page Inside a page

INSIDE YOUR DREAM!

Creating a Master Page<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Main.master.cs" Inherits="Course_Offerings.App_MasterPages.Main" %>

<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>

Important NotesContentPlaceHolder

This is where child pages are renderedYou need at least one of these if you want child

content to renderIf you define a content placeholder, child pages

need to use them

Using a Master Page<%@ Page Title="" Language="C#" MasterPageFile="~/App_MasterPages/Main.Master" AutoEventWireup="true" CodeBehind="UserControlExample.aspx.cs" Inherits="Course_Offerings.UserControlExample" %>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<asp:Label ID="Label1" runat="server" Text="Awesome Label“</asp:Content>

Accessing the master pageOn the Designer page:<%@ MasterType VirtualPath="~/App_MasterPages/Main.Master" %>And in the Code Behind:

string x = Master.CustomProperty;