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

Controls PowerPoint PPT Presentation


  • 102 Views
  • 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

Controls

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

<[email protected]="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>


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

<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

<[email protected]="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

<[email protected]=""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:

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

  • And in the Code Behind:

    stringx = Master.CustomProperty;


  • Login