Pengaturcaraan Web Lanjutan (TP 2653)

Pengaturcaraan Web Lanjutan (TP 2653) ASP.Net Standard Controls Mohd Shahizan Othman UTM

Web Development Environment Hardware and software layers of a three-tier information processing system.

Information Processing Model

Conventional Web page authoring

Modern Web page development

Components of a Web page

Web Page Processing

Web Form Controls ASP.NET input server controls and equivalent XHTML tags

Web Form Controls ASP.NET output server controls and equivalent HTML tags.

Web Form Controls ASP.NET script activation server controls and equivalent HTML tags.

Web Form Controls ASP.NET data validation controls.

Web Form Controls ASP.NET information display controls.

Web Form Controls ASP.NET data source controls.

Web Form Controls ASP.NET navigation controls.

Standard Controls

AdRotator • The AdRotator control presents ad images that, when clicked, navigate to a new Web location. Each time the page is loaded into the browser, an ad is randomly selected from a predefined list. The following sample illustrates using the AdRotator control. <html> <body><h3><font face="Verdana">AdRotator Example</font></h3> <formrunat=server> <asp:AdRotator id="ar1" AdvertisementFile="Ads.xml" BorderWidth="1" runat=server /></form></body></html> <Advertisements> <Ad> <ImageUrl>images/banner1.gif</ImageUrl> <NavigateUrl>http://www.microsoft.com</NavigateUrl> <AlternateText>Microsoft.com</AlternateText> <Keyword>Computers</Keyword> <Impressions>80</Impressions> </Ad> </Advertisements> AdRotator1.aspx Ads.xml output

BulletedList • The BulletedList control is used to create a list of items formatted with bullets. To specify the individual list items that you want to appear in a BulletedList control, place a ListItem object for each entry between the opening and closing tags of the BulletedList control. • List Bullet Styles BulletedList controls can display list of items with a variety of bullet styles. To control the style of bullet used, use the BulletedList.BulletSyle property. The following example shows how to render a list of items with circular bullets. html><head></head><body><h3><font face="Verdana">Bulleted List</font></h3><formrunat=server><asp:BulletedList ID=BulletedList1 BulletStyle="Circle" runat=server><asp:ListItem>Item #1</asp:ListItem><asp:ListItem>Item #2</asp:ListItem><asp:ListItem>Item #3</asp:ListItem><asp:ListItem>Item #4</asp:ListItem></asp:BulletedList></form></body></html> Output bulletedlist1_vb.aspx

BulletedList • List of Hyperlinks The BulletedList control can also render a list of hyperlinks. The BulletedList control also provides a convenient way to render a list of hyperlinks, as an alternative to creating multiple individual HyperLink controls. To render each item in the list as a hyperlink, set the BulletedList.DisplayMode property to BulletedListDisplayMode.HyperLink, and set the Value property of each list item to the navigation URL for the item. Lists of hyperlinks can also be displayed with a variety of bullet styles, as above. html><head></head><body><h3><font face="Verdana">Bulleted List</font></h3><formrunat=server><asp:BulletedListDisplayMode = HyperLinkrunat=server><asp:ListItem Value="http://support.Microsoft.com">Support</asp:ListItem><asp:ListItem Value="http://www.asp.net">ASP.NET</asp:ListItem><asp:ListItem Value="http://msdn.microsoft.com">MSDN</asp:ListItem></asp:BulletedList> </form></body></html> Output bulletedlist2_vb.aspx

Button • The Button control provides a command button-style control that is used to post a Web Forms page back to the server. The following sample illustrates using a simple Button control. <html><head> <script language="VB" runat="server">Sub Button1_Click(sender AsObject, e AsEventArgs) Label1.Text="You clicked the button" EndSub</script></head><body><h3><font face="Verdana">PostBack Using Button</font></h3><formrunat=server><asp:Button id=Button1 Text="Click Me" onclick="Button1_Click" runat="server" /><asp:Label id=Label1 runat=server /></form> </body></html> Output Button1.aspx

Button (Bubbling Button Clicks Within a List) • When used in a templated list such as a Repeater or DataList, many Button controls might be rendered as the list iterates over its data source. Because each of these Button controls shares the same ID, you cannot simply bind an event handler to each Button control's OnClick event to determine the particular Button that was clicked. To solve this, you use event bubbling to fire an event on the container control (in this case, the Repeater, DataList, or DataGrid), and let the container impart additional information to the event handler about the item that raised the event. These events can be raised from a Button by specifying a CommandName property with the name of the event. When the Button is clicked, the command "bubbles" to the container control (such as Repeater), which fires its own event. The arguments for this event might contain additional information, such as a custom string or the index of the item that raised the event. The following sample illustrates how a Button control's commands can bubble to the OnItemCommand event of a list. The Button control's CommandName and CommandArgument strings are passed to the OnItemCommand event, permitting the sample code to distinguish which button was clicked.

Button (Mouse-Over Effects on Button) • You can hook the client script events onmouseover and onmouseout on a Button control to provide mouse-over effects such as changing the font or color of the button. Client attributes such as onmouseover are disregarded by ASP.NET on the server, and passed "as is" to the browser. If your application targets newer browsers that support DHTML, these events will fire in the browser as the cursor passes over the button. The following sample demonstrates buttons with mouse-over effects.

Calendar • The Calendar control displays a month calendar from which users can select dates. The following sample illustrates using a simple Calendar control. <html><head><script language="VB" runat="server">SubDate_Selected(sender AsObject, e AsEventArgs) Label1.Text = "Selected date is: " + Calendar1.SelectedDate.ToShortDateString EndSub</script></head><body><h3><font face="Verdana">Calendar Example</font></h3><formrunat=server><asp:Calendar id=Calendar1 onselectionchanged="Date_Selected" runat="server" /><p><asp:Label id=Label1 runat="server" /></form></body></html> Output Selection Link Graphics Selection Link Text Adding Custom Content to Calendar

Check Box • The CheckBox server control accepts Boolean (true or false) input. When selected, its Checked property is true. Typically a check box is processed as one of several fields in a form; however, it can be used to trigger postback to the server if its AutoPostBack property is true. The following sample illustrates using the CheckBox control. <html><head><script language="VB" runat="server">SubSubmitBtn_Click(sender AsObject, e AsEventArgs) If Check1.Checked = trueThen Label1.Text = "Check1 is checked!" Else Label1.Text = "Check1 is not checked!" EndIfEndSub</script></head><body><h3><font face="Verdana">CheckBox Example</font></h3><formrunat=server><asp:CheckBox id=Check1 Text="CheckBox 1" runat="server" /> &nbsp&nbsp<asp:button text="Submit" OnClick="SubmitBtn_Click" runat=server/><p><asp:Label id=Label1 Font-Names="arial" font-size="10pt" runat="server"/></form></body></html> Output

CheckBoxList • The CheckBoxList control provides a multiple-selection checked list. Like other list controls, CheckBoxList has an Items collection with members that correspond to each item in the list. To determine which items are selected, test the Selected property of each item. You can control the rendering of the list with the RepeatLayout and RepeatDirection properties. If RepeatLayout is Table, the list is rendered within a table. If it is set to Flow, the list is rendered without any table structure. By default, RepeatDirection is Vertical. Setting this property to Horizontal causes the list to be rendered horizontally. The following sample illustrates using the CheckBoxList control. Output

DropDownList • The DropDownList control provides a single-select drop-down list. The following sample illustrates using a simple DropDownList control. <html><head><script language="VB" runat="server">SubSubmitBtn_Click(sender AsObject, e AsEventArgs) Label1.Text="You chose: " + DropDown1.SelectedItem.Text EndSub</script></head><body><h3><font face="Verdana">DropDownList Example</font></h3><formrunat=server><asp:DropDownList id=DropDown1 runat="server"><asp:ListItem>Item 1</asp:ListItem><asp:ListItem>Item 2</asp:ListItem><asp:ListItem>Item 3</asp:ListItem><asp:ListItem>Item 4</asp:ListItem><asp:ListItem>Item 5</asp:ListItem><asp:ListItem>Item 6</asp:ListItem></asp:DropDownList><asp:button text="Submit" OnClick="SubmitBtn_Click" runat=server/><p><asp:Label id=Label1 Font-Names="Verdana" font-size="10pt" runat="server"> Select a value from the list </asp:Label></form></body></html> Output

DropDownList • The following sample illustrates using data binding to a static ArrayList with a DropDownList control. <html><head><script language="VB" runat="server">SubPage_Load(sender AsObject, e AsEventArgs) IfNotIsPostBackThenDim values asArrayList= newArrayList() values.Add ("IN") values.Add ("KS") values.Add ("MD") values.Add ("MI") values.Add ("OR") values.Add ("TN") DropDown1.DataSource = values DropDown1.DataBind EndIfEndSubSubSubmitBtn_Click(sender AsObject, e AsEventArgs) Label1.Text = "You chose: " + DropDown1.SelectedItem.Text EndSub</script></head><body><h3><font face="Verdana">DataBindingDropDownList</font></h3><formrunat=server><asp:DropDownList id="DropDown1" runat="server" /><asp:button Text="Submit" OnClick="SubmitBtn_Click" runat=server/><p><asp:Label id=Label1 Font-Names="Verdana" font-size="10pt" runat="server" /></form></body></html> Output

DropDownList • In addition to programmatically databinding, as shown in the example above, you can also data bind a DropDownList declaratively to a data source control. The following example shows a DropDownList bound to the Authors table in the Pubs database. <html><head><script language="VB" runat="server">SubSubmitBtn_Click(sender AsObject, e AsEventArgs) Label1.Text = "You chose: " + DropDown1.SelectedValue EndSub</script></head><body><h3><font face="Verdana">DataBindingDropDownList</font></h3><formrunat=server><asp:DropDownList id="DropDown1" DataSourceID="SqlDataSource1" DataTextField="au_lname" DataValueField="au_id" runat="server" /><asp:SqlDataSource id="SqlDataSource1" ConnectionString='<%$ ConnectionStrings:Pubs %>'SelectCommand="select DISTINCT au_id, au_lname from authors" runat="server"/><asp:button Text="Submit" OnClick="SubmitBtn_Click" runat=server/><p><asp:Label id=Label1 Font-Names="Verdana" font-size="10pt" runat="server" /></form></body></html> Output

FileUpLoad The FileUpLoad control enables you to upload file to the server. It displays a text box control and a browse button that allow users to select a file to upload to the server. The user specifies the file to upload by entering the fully qualified path to the file on the local computer (for example, "C:\MyFiles\TestFile.txt") in the text box of the control. Alternately, the user can select the file by clicking the Browse button and then locating it in the Choose File dialog box. The FileUpload control does not automatically save a file to the server after the user selects the file to upload. You must explicitly provide a control or mechanism to allow the user to submit the specified file. For example, you can provide a button that the user clicks to upload the file. The code that you write to save the specified file should call the SaveAs method, which saves the contents of a file to a specified path on the server. Typically, the SaveAs method is called in an event-handling method for an event that raises a post back to the server. For example, if you provide a button to submit a file, you could place the code to save the file inside the event-handling method for the button's click event. <html><head><script language="VB" runat="server">Sub Button1_Click(sender AsObject, e AsEventArgs) if FileUpLoad1.HasFile 'Uncomment this line to Save the uploaded file'FileUpLoad1.SaveAs("C:\SomePhysicalPath" & FileUpLoad1.Filename) Label1.Text = "Received " & FileUpLoad1.FileName & " Content Type " & FileUpLoad1.PostedFile.ContentType & " Length " & FileUpLoad1.PostedFile.ContentLength else Label1.Text = "No uploaded file" endifendsub</script></head><body><h3><font face="Verdana">File Upload</font></h3><formrunat=server><asp:FileUpLoad id="FileUpLoad1" AlternateText="You cannot upload files" runat="server" /><asp:Button id="Button1" Text="Upload" OnClick="Button1_Click" runat="server" /><asp:Label id="Label1" runat="server" /></form></body></html> Output

HiddenField The HiddenField control is used to store a value that needs to be persisted across posts to the server. It is rendered as an <input type= "hidden"/> element. Normally view state, session state, and cookies are used to maintain the state of a Web Forms page. However, if these methods are disabled or are not available, you can use the HiddenField control to store state values. Note that because the value of a HiddenField is rendered to the client browser, it is not suitable for storing security-sensitive values. To specify the value for HiddenField a control, use the Value property. You can provide a routine that gets called everytime the value of the HiddenField control changes between posts to the server by creating an event-handler for the ValueChanged event. <html><head><script language="VB" runat="server">Sub Button1_Click(sender AsObject, e AsEventArgs) if (HiddenField1.Value = Nothing) HiddenField1.Value = "0" endif'Increment the hidden field value by 1 HiddenField1.Value = Convert.ToInt32(HiddenField1.Value)+1 Label1.Text = HiddenField1.Value EndSub</script></head><body><h3><font face="Verdana">HiddenField</font></h3><formrunat=server><asp:HiddenField id=HiddenField1 runat=Server /><asp:Button id=Button1 Text="Click Me" onclick="Button1_Click" runat="server" /> Clicked <asp:Label id=Label1 Text="0" runat=server /> times</form></body></html> Output

HyperLink The HyperLink control is used to navigate from the client to another page. The following sample illustrates using a simple HyperLink control. <html><script language="VB" runat="server">SubPage_Load(sender AsObject, e AsEventArgs) ' Set hyperlink to "~", which indicates application root. HyperLink1.NavigateUrl = "~" EndSub</script><body><h3><font face="Verdana">Simple asp:hyperlink Sample</font></h3><formrunat=server><p><asp:hyperlink id=HyperLink1 runat="server"> Go To QuickStart</asp:hyperlink></form></body></html> Output Data Binding HyperLink The HyperLink control supports data binding to its Text and NavigateUrl properties, as shown by the following example.

Image The Image control displays the image defined by its ImageUrl property. The following sample illustrates using the Image control. <html><head><script language="VB" runat="server">SubSubmitBtn_Click(sender AsObject, e AsEventArgs) Image1.ImageUrl = "images/" & DropDown1.SelectedItem.Value Image1.AlternateText = DropDown1.SelectedItem.Text EndSub</script></head><body><h3><font face="Verdana">Simple HtmlImage Sample</font></h3><formrunat=server><asp:Image ID="Image1" ImageUrl="images/cereal1.gif" AlternateText="Healthy Grains" runat="server" /><p> Select image file: <asp:DropDownList id=DropDown1 runat="server"><asp:ListItem Value="Cereal1.gif">Healthy Grains</asp:ListItem><asp:ListItem Value="Cereal2.gif">Corn Flake Cereal</asp:ListItem><asp:ListItem Value="Cereal3.gif">U.F.O.S</asp:ListItem><asp:ListItem Value="Cereal4.gif">Oatey O's</asp:ListItem><asp:ListItem Value="Cereal5.gif">Strike</asp:ListItem><asp:ListItem Value="Cereal7.gif">Fruity Pops</asp:ListItem></asp:DropDownList><asp:button text="Apply" OnClick="SubmitBtn_Click" runat=server/></form></body></html> Output

ImageButton Like the Button control, ImageButton is used to post back to the server. The following sample illustrates using the ImageButton control. <html><head><script language="VB" runat="server">Sub ImageButton1_OnClick(sender AsObject, e AsImageClickEventArgs) Label1.Text = "You clicked the image button" EndSub</script></head><body><h3><font face="Verdana">ImageButton Example</font></h3><formrunat=server><asp:ImageButton id=Button1 ImageUrl="images/mango.jpg" BorderWidth="2px" onclick="ImageButton1_OnClick" runat="server"/> <asp:Label id=Label1 runat=server /></form></body></html> Output Using ImageButton as an Image Map The ImageButton click event also supplies the x/y coordinates of where the user clicked the image. This provides a means to respond differently depending on what part of the image is clicked. The following sample illustrates using the ImageButton control as an image map.

ImageButton Mouse-Over Effects on ImageButton You can hook the client script events onmouseover and onmouseout on an ImageButton control to provide mouse-over effects such as changing the image source of the button. Client attributes such as onmouseover are disregarded by ASP.NET on the server and passed unchanged to the browser. If your application targets newer browsers that support DHTML, these events will occur in the browser as the cursor passes over the button.

ImageMap Use the ImageMap control to create an image that contains defined hotspot regions. When a user clicks a hot spot region, the control can either generate a post back to the server or navigate to a specified URL. For example, you can use this control to display a map of a geographical region. When a user clicks a specific region on the map, the control navigates to a URL that provides additional data about the selected region. You can also use this control to generate a post back to the server and run specific code based on the hot spot region that was clicked. For example, you can use an ImageMap control to capture user responses such as votes. When a user clicks the hot spot region defined for yes votes, code is called to record a yes response in a database. When a user clicks on the hot spot region defined for no votes, a no response is recorded. You can also mix these two scenarios within a single ImageMap control. For example, you can specify one hot spot region to navigate to a URL and another hot spot region to post back to the server.

Label The Label control displays text in a set location on the page. Unlike static text, the Text property of a label can be set programmatically. The following sample illustrates using the Label control. <html><head><script language="VB" runat="server">Sub Button1_Click(sender AsObject, e AsEventArgs) Label1.Text = System.Web.HttpUtility.HtmlEncode(Text1.Text) EndSub</script></head><body><h3><font face="Verdana">Label Example</font></h3><formrunat="server"><asp:Label id="Label1" Text="Label1" Font-Names="Verdana" Font-Size="10pt" Width="200px" BorderStyle="solid" BorderColor="#cccccc" runat="server"/><p><asp:TextBox id="Text1" Text="Copy this text to the label" Width="200px" runat="server" /><asp:Button id="Button1" Text="Copy" OnClick="Button1_Click" Runat="server"/></form></body></html> Output The following sample illustrates how to databind the Label control.

LinkButton Like the Button control, LinkButton is used to post a Web Forms page back to the server. .For a control that navigates to another page, see Hyperlink. <html><head><script language="VB" runat="server">Sub LinkButton1_Click(sender AsObject, e AsEventArgs) Label1.Text="You clicked the link button" EndSub</script></head><body><h3><font face="Verdana">LinkButton Example</font></h3><formrunat=server><asp:LinkButton Text="Click Me!" Font-Names="Verdana" Font-Size="14pt" onclick="LinkButton1_Click" runat="server"/> <asp:Label id=Label1 runat=server /></form></body></html> Output

ListBox The ListBox control provides a single-selection or multiple-selection list. To enable multiple selection, set the SelectionMode property to Multiple. The following sample illustrates using a simple ListBox control. <html><head><script language="VB" runat="server">SubSubmitBtn_Click(ByVal sender AsObject, ByVal e AsEventArgs) If ListBox1.SelectedIndex > -1 Then Label1.Text = "You chose: " + ListBox1.SelectedItem.Text EndIfEndSub</script></head><body><form id="Form1" runat="server"><h3><font face="Verdana">ListBox Example</font></h3><p><asp:ListBox ID="ListBox1" Width="100px" runat="server"><asp:ListItem>Item 1</asp:ListItem><asp:ListItem>Item 2</asp:ListItem><asp:ListItem>Item 3</asp:ListItem><asp:ListItem>Item 4</asp:ListItem><asp:ListItem>Item 5</asp:ListItem><asp:ListItem>Item 6</asp:ListItem></asp:ListBox><asp:Button Text="Submit" ID=submit1 OnClick="SubmitBtn_Click" runat="server" /><p><asp:Label ID="Label1" Font-Names="Verdana" Font-Size="10pt" runat="server" /></form></body></html> Output

Literal A Literal control is used to display text. You cannot apply a style to a literal control. This control will pass the content directly to the client browser, unless you use the Mode property to encode the content. Simple Literal control The following example demonstrates how to use the Literal control to display static text. <html><head></head><body><h3><font face="Verdana">Literal</font></h3><formrunat=server><asp:Literal ID=Literal1 Text="I am a literal control" runat=server /></form></body></html> Output Encode Literal control By setting the Mode property to Encode, the Literal control will encode the content of the Text property. <html><head></head><body><h3><font face="Verdana">Literal</font></h3><formrunat=server><asp:Literal ID=Literal2 Mode=Encode Text="<Some encoded text>" runat=server /></form></body></html> Output

MultiView and View The MultiView control represents a control that acts as a container for groups of View controls. It allows you to define a group of View controls, where each View control contains child controls, for example, in an online survey application. Your application can then render a specific View control to the client based on criteria such as user identity, user preferences, or information passed in a query string parameter. The following sample illustrates a MultiView control hosting 3 View controls. <%@ Page Language="VB" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><scriptrunat="server">ProtectedSub DropDownList1_SelectedIndexChanged(ByVal sender AsObject, ByVal e AsSystem.EventArgs) MultiView1.ActiveViewIndex = DropDownList1.SelectedValue EndSub</script><htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"><title>Untitled Page</title></head><body><form id="form1" runat="server"><div><h3><font face="Verdana">MultiView with 3 Views</font></h3><asp:DropDownList ID="DropDownList1" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" runat="server" AutoPostBack="True"><asp:ListItem Value="0">View 1</asp:ListItem><asp:ListItem Value="1">View 2</asp:ListItem><asp:ListItem Value="2">View 3</asp:ListItem></asp:DropDownList><br /><hr/><asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0"><asp:View ID="View1" runat="server"> Now showing View #1<br/><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><strong> </strong><asp:Button ID="Button1" runat="server" Text="Button" /></asp:View><asp:View ID="View2" runat="server"> Now showing View #2<br/><asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="http://www.asp.net">HyperLink</asp:HyperLink><asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="http://www.asp.net">HyperLink</asp:HyperLink></asp:View><asp:View ID="View3" runat="server"> Now showing View #3<br/><asp:Calendar ID="Calendar1" runat="server"></asp:Calendar></asp:View></asp:MultiView></div></form></body></html> Output

Panel The Panel control is a container for other controls. It is especially useful when you want to generate controls programmatically or hide or show a group of controls, as shown in the following example. Output

PlaceHolder The PlaceHolder control can be used as a container control within a document to dynamically load other controls. The PlaceHolder control has no HTML-based output and is used only to mark a spot for other controls that can be added to the Controls collection of the PlaceHolder during page execution. The following example illustrates adding controls to a PlaceHolder. <%@ Page Language="VB" %><%@ Import Namespace="System.Web.UI.HtmlControls" %><script language="VB" runat="server">SubPage_Load(Sender AsObject, E AsEventArgs) Dim clicker AsHtmlButton = NewHtmlButton() clicker.InnerText = "Button 1" Bullseye.Controls.Add(clicker) clicker = NewHtmlButton() clicker.InnerText = "Button 2" Bullseye.Controls.Add(clicker) clicker = NewHtmlButton() clicker.InnerText = "Button 3" Bullseye.Controls.Add(clicker) clicker = NewHtmlButton() clicker.InnerText = "Button 4" Bullseye.Controls.Add(clicker) EndSub</script><html><body><h3><font face="Verdana">PlaceHolder Example</font></h3><asp:PlaceHolder id="Bullseye" runat="server" /></body></html> Output

RadioButton The RadioButton control permits you to intersperse the radio buttons in a group with other content in the page. The buttons in the sample are grouped logically because they all share the same GroupName. The following sample illustrates using the RadioButton control. <html><head><script language="VB" runat="server">SubSubmitBtn_Click(sender AsObject, e AsEventArgs) If Radio1.Checked Then Label1.Text = "You selected " & Radio1.Text ElseIf Radio2.Checked Then Label1.Text = "You selected " & Radio2.Text ElseIf Radio3.Checked Then Label1.Text = "You selected " & Radio3.Text EndIfEndSub</script></head><body><h3><font face="Verdana">RadioButton Example</font></h3><formrunat=server><h4>Select the type of installation you wish to perform:</h4><asp:RadioButton id=Radio1 Text="Typical" Checked="True" GroupName="RadioGroup1" runat="server" /><br> This option installs the features most typically used. <i>Requires 1.2 MB disk space.</i><p><asp:RadioButton id=Radio2 Text="Compact" GroupName="RadioGroup1" runat="server"/><br> This option installs the minimum files required to run the product. <i>Requires 350 KB disk space.</i><p><asp:RadioButton id=Radio3 runat="server" Text="Full" GroupName="RadioGroup1" /><br> This option installs all features for the product. <i>Requires 4.3 MB disk space.</i><p><asp:button text="Submit" OnClick="SubmitBtn_Click" runat=server/><asp:Label id=Label1 font-bold="true" runat="server" /></form></body></html> Output

RadioButtonList The RadioButtonList control provides a single-selection checked list. Like other list controls, RadioButtonList has an Items collection with members that correspond to each item in the list. To determine which items are selected, test the Selected property of each item. You can control the rendering of the list with the RepeatLayout and RepeatDirection properties. If the value of RepeatLayout is Table, the list will be rendered in a table. If it is set to Flow, the list will be rendered without any table structure. By default, the value of RepeatDirection is Vertical. Setting this property to Horizontal causes the list to be rendered horizontally. The following sample illustrates using the RadioButtonList control. <html><head><script language="VB" runat="server">Sub Button1_Click(sender AsObject, e AsEventArgs) If RadioButtonList1.SelectedIndex > -1 Then Label1.Text = "You selected: " & RadioButtonList1.SelectedItem.Text EndIfEndSubSubchkLayout_CheckedChanged(sender AsObject, e AsEventArgs) IfchkLayout.Checked = TrueThen RadioButtonList1.RepeatLayout = RepeatLayout.TableElse RadioButtonList1.RepeatLayout = RepeatLayout.FlowEndIfEndSubSubchkDirection_CheckedChanged(sender AsObject, e AsEventArgs) IfchkDirection.Checked = TrueThen RadioButtonList1.RepeatDirection = RepeatDirection.HorizontalElse RadioButtonList1.RepeatDirection = RepeatDirection.VerticalEndIfEndSub</script></head><body><h3><font face="Verdana">RadioButtonList Example</font></h3><formrunat=server><asp:RadioButtonList id=RadioButtonList1 runat="server"><asp:ListItem>Item 1</asp:ListItem><asp:ListItem>Item 2</asp:ListItem><asp:ListItem>Item 3</asp:ListItem><asp:ListItem>Item 4</asp:ListItem><asp:ListItem>Item 5</asp:ListItem><asp:ListItem>Item 6</asp:ListItem></asp:RadioButtonList><p><asp:CheckBox id=chkLayoutOnCheckedChanged="chkLayout_CheckedChanged" Text="Display Table Layout" Checked=true AutoPostBack="true" runat="server" /><br><asp:CheckBox id=chkDirectionOnCheckedChanged="chkDirection_CheckedChanged" Text="Display Horizontally" AutoPostBack="true" runat="server" /><p><asp:Button id=Button1 Text="Submit" onclick="Button1_Click" runat="server"/><p><asp:Label id=Label1 Font-Names="Verdana" font-size="8pt" runat="server"/></form></body></html> Output

Substitution This partial page caching approach works very well for scenarios where most of the page content is dynamic and/or it is easy to encapsulate cached content into isolated user controls. It does not work as well for the inverse scenario, when the majority of page content should be cached and only a small portion is to be dynamic. For example, consider a page of news stories extracted from a database, which contains a single rotating advertisement. In this scenario, the news stories (and surrounding page header, footer, and site navigation interface) might be easily cached, since they change relatively infrequently. However, the rotating advertisement should change on each page request, to display a random advertisement to each site visitor. Using the Substitution API <%@ OutputCache Duration="60" VaryByParam="none" %> <script language="C#" runat="server"> public static String GetCurrentDate (HttpContext context) { return DateTime.Now.ToString(); } </script> ... cached content ... <form runat="server"> <% Response.WriteSubstitution (new HttpResponseSubstitutionCallback(GetCurrentDate)) %> </form> Using the Substitution Control <%@ OutputCache Duration="60" VaryByParam="none" %> <script language="C#" runat="server"> public static String GetUserName (HttpContext context) { return context.User.Identity.Name; } </script> ... cached content ... <form runat="server"> <h2>Welcome <asp:SubstitutionMethodName="GetUserName" />!</h2> </form>

Table The Table control builds up a table programmatically by adding TableRows to the Rows collection of the table, and TableCells to the Cells collection of the row. You can add content to a table cell programmatically by adding controls to the Controls collection of the cell. The following sample illustrates using the Table control. <html><head><script language="VB" runat="server">SubPage_Load(sender AsObject, e AsEventArgs) DimnumrowsAsIntegerDimnumcellsAsIntegerDimiAsIntegerDim j AsIntegerDim r AsTableRowDim c AsTableCell' Generate rows and cellsnumrows = CInt(DropDown1.SelectedItem.Value) numcells = CInt(DropDown2.SelectedItem.Value) For j = 0 To numrows-1 r = newTableRow() Fori = 0 To numcells-1 c = newTableCell() c.Controls.Add(newLiteralControl("row " & j & ", cell " & i)) r.Cells.Add(c) Nexti Table1.Rows.Add(r) Next j EndSub</script></head><body><h3><font face="Verdana">Table Example</font></h3><formrunat=server><asp:Table id="Table1" Font-Names="Verdana" Font-Size="8pt" CellPadding=5 CellSpacing=0 BorderColor="black" BorderWidth="1" Gridlines="Both" runat="server"/><p> Table rows: <asp:DropDownList id=DropDown1 runat="server"><asp:ListItem Value="1">1</asp:ListItem><asp:ListItem Value="2">2</asp:ListItem><asp:ListItem Value="3">3</asp:ListItem><asp:ListItem Value="4">4</asp:ListItem></asp:DropDownList><br> Table cells: <asp:DropDownList id=DropDown2 runat="server"><asp:ListItem Value="1">1</asp:ListItem><asp:ListItem Value="2">2</asp:ListItem><asp:ListItem Value="3">3</asp:ListItem><asp:ListItem Value="4">4</asp:ListItem></asp:DropDownList><p><asp:button Text="Generate Table" runat=server/></form></body></html> Output

TextBox The TextBox control enables the user to enter text. By default, the TextMode of TextBox is SingleLine, but you can modify the behavior of TextBox by setting the TextMode to Password or MultiLine. The display width of TextBox is determined by its Columns property. If TextMode is MutliLine, the display height of TextBox is determined by the Rows property. The following sample illustrates using the TextBox control. <html><head><script language="VB" runat="server">SubSubmitBtn_Click(sender AsObject, e AsEventArgs) Label1.Text = "Text1.Text = " & Text1.Text EndSub</script></head><body><h3><font face="Verdana">TextBox Sample</font></h3><formrunat="server"><asp:TextBox id="Text1" Text="Copy this text to the label" Width="200px" runat="server"/><asp:ButtonOnClick="SubmitBtn_Click" Text="Copy Text to Label" Runat="server"/><p><asp:Label id="Label1" Text="Label1" runat="server"/></form></body></html> Output

Pengaturcaraan Web Lanjutan (TP 2653)

Pengaturcaraan Web Lanjutan (TP 2653)

Presentation Transcript

Extending Trace Models

Web Application Servers

TP Background and Why you should engage with TP

INTRO TO TP SYSTEMS IS 340 BY CHANDRA S. AMARAVADI

TABLE OF CONTENTS

TP Calorimetry

11/12

New and/or Revised Procedures as of 1-19-2000

F1 Generation

Mcafee com Call Toll Free 1-855-856-2653