controls
Download
Skip this Video
Download Presentation
Controls

Loading in 2 Seconds...

play fullscreen
1 / 23

Controls - PowerPoint PPT Presentation


  • 188 Views
  • Uploaded on

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Controls' - denise


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
controls

Controls

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
textboxes
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
textboxes1
Textboxes
  • <inputname="ctl00$ContentPlaceHolder1$TextBox1"type="text"value="Sample Text"id="ContentPlaceHolder1_TextBox1"/>
  • Textboxes render as <input>.
  • The “text” field is rendered as “value”
dropdownlist
DropDownList

<asp:DropDownListrunat="server"ID="DropDownList1">

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

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

</asp:DropDownList>

dropdownlist1
DropDownList

<selectname="ctl00$ContentPlaceHolder1$DropDownList1"id="ContentPlaceHolder1_DropDownList1">

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

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

</select>

checkboxlist
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>

checkboxlist1
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>

checkboxlist2
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
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

<%@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>

using a user control in a page
Using a User Control in a page

<%@Registersrc="SimpleUserControl.ascx"tagname="SimpleUserControl"tagprefix="uc1" %>

<uc1:SimpleUserControlID="SimpleUserControl1"runat="server"/>

<uc1:SimpleUserControlID="SimpleUserControl2"runat="server"/>

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

<%@MasterLanguage="C#"AutoEventWireup="true"CodeBehind="Main.master.cs"Inherits="Course_Offerings.App_MasterPages.Main" %>

<asp:ContentPlaceHolderID="ContentPlaceHolder1"runat="server">

</asp:ContentPlaceHolder>

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

<%@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>

accessing the master page
Accessing the master page
  • On the Designer page:

<%@MasterTypeVirtualPath="~/App_MasterPages/Main.Master"%>

  • And in the Code Behind:

stringx = Master.CustomProperty;

ad