things like textboxes, lables, ‘n’at. aspx page is not html controls are rendered into markup...
TRANSCRIPT
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;