Learning notes on ASP.net (1.1) principles-Chapter 2 web Form webpage window

Last Update:2018-12-07 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

1. server-side controls
ASP. NET uses server controls to create a WEB Form model.
By adding runat = server to a traditional html element, you can create a server-side control and automatically create a field in the Page derived class named field name, take the element type as the control type.
As a result, the. aspx page is similar to the desktop control, and the same page can process the interaction and response with the customer. On the contrary, additional programming is required in traditional asp.

2. Use the hidden field _ VIEWSTATE
. Net uses the hidden control named _ VIEWSTATE to save all the states of the Web page. It can be used to save the previous values of the control.
Listing 2-3 Accumulator Page

<!— Accumulator.aspx —>
<%@ Page Language="C#" %>

<script runat=server>
protected void Page_Load(object src, EventArgs e)
{
  if (IsPostBack)
  {
    int op1 = int.Parse(_op.Value);
    int op2 = int.Parse(_sum.InnerText);
    _sum.InnerText = (op1+op2).ToString();
  }
}
</script>
<body>
  <form runat=server>
        <input size=2 type=text id=_op runat=server/>
    Sum:<span id=_sum runat=server>0</span>
    <p>
     <input type=submit value="Add" />
    </p>
  </form>
</body>

Listing 2-4 Accumulator Page Rendering

<Html>

<Body>
<Form name = "_ ctl0" method = "post"
Action = "accumulator. aspx" id = "_ ctl0">
<Input type = "hidden" name = "_ VIEWSTATE"
Value = "dDwtMTE3NzEwNDc2Njs7PvcRil1nMNe70yha9afq + YEvj46N"/>

<H2> ASP. NET accumulator page <Input name = "_ op" id = "_ op" type = "text" size = "2"/>
Sum: <span id = "_ sum"> </span>
<P>
<Input type = submit value = "Add"/>
</P>
</Form>
</Body>

</Html>

Iii. Events
Standard CLR server-side event mechanism: Delegate.
1. automatically bind the delegated subscription event explicitly:Generally, server-side controls provide an EventHandlerDelegate (DataGridItemEventHandler uses DataGridItemEventArgs)

Listing 2-5 Server-Side Event Handler Using Explicit Delegate subhandler

<! -Event. aspx->
<% @ Page Language = "C #" %>

<Html>
<Script runat = server>
Protected void OnClickMyButton (object src, EventArgs e) // explicitly create a new EventHandler instance and use the OnClickMyButton function to initialize the ServerClick instance.
_ Message. InnerText = "You clicked the button! ";
}

Protected void Page_Init (object src, EventArgs e) // use the Page_Init automatic event Binding Technology
{
_ MyButton. ServerClick + =
New EventHandler (OnClickMyButton); // delegate to subscribe to the _ MyButton ServerClick event
</Script>
<Body>
<Form runat = server>

<H2> ASP. NET event page <P>
<Input type = button id = _ MyButton
Value = "Click me! "Runat = server/>
</P>
<Span id = _ message runat = server/>
</Form>
</Body>
</Html>


2. Use the OnEvent syntax to bind events:

Listing 2-6 Server-Side Event Handler Using OnEvent Syntax

<!— event.aspx —>
<%@ Page Language="C#" %>

<script runat=server>
protected void OnClickMyButton(object src, EventArgs e)
{
  _message.InnerText = "You clicked the button!";
}
</script>
<body>
  <form runat=server>
        <p>
    <input type=button id=_MyButton
           value="Click me!"
           OnServerClick="OnClickMyButton" runat=server />
    </p>
    <span id=_message runat=server/>
  </form>
</body>

4. Use two hidden fields to control the send-back control, __eventtarget generates the flag of the send-back control, and _ EVENTARGUMENT transmits the event parameters,

Listing 2-7 Color Page Demonstrating Three Separate Server-Side Event HandlersListing 2-7 Color Page Demonstrating Three Separate Server-Side Event Handlers

<!— color.aspx —>
<%@ Page Language="C#" %>

<script runat=server>
protected void OnRed(object src, EventArgs e)
{
  _color.Style["background-color"] = "Red";
}

protected void OnGreen(object src, EventArgs e)
{
  _color.Style["background-color"] = "Green";
}

protected void OnBlue(object src, EventArgs e)
{
  _color.Style["background-color"] = "Blue";
}

protected void Page_Init(object src, EventArgs e)
{
  _redButton.ServerClick   += new EventHandler(OnRed);
  _greenButton.ServerClick += new EventHandler(OnGreen);
  _blueButton.ServerClick  += new EventHandler(OnBlue);
}

protected void Page_Load(object src, EventArgs e)
{
  if (!IsPostBack)
  {
    _color.Style["background-color"] = "Red";
    _color.Style["width"] = "100";
    _color.Style["height"] = "100";
  }
}

</script>
<body>
  <form runat=server>

        <div id=_color runat=server />
    <p>
    <input type=button id=_redButton value="Red"
           runat=server />
    <input type=button id=_greenButton value="Green"
           runat=server />
    <input type=button id=_blueButton value="Blue"
           runat=server />
    </p>
  </form>
</body>

Listing 2-8 Color Page Rendering

  <form name="_ctl0" method="post"
        action="color.aspx" id="_ctl0">
<input type="hidden" name="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" value="dD...==" />

<script language="javascript">
<!—
     function __doPostBack(eventTarget, eventArgument) {
            var theform = document._ctl0;
            theform.__EVENTTARGET.value = eventTarget;
            theform.__EVENTARGUMENT.value = eventArgument;
            theform.submit();
     }
// —>
</script>

        <div id="_color"
       style="background-color:Red;width:100;height:100;"/>
    <p>
    <input language="javascript"
           onclick="__doPostBack('_redButton','')"
           name="_redButton" id="_redButton"
           type="button" value="Red" />
    <input language="javascript"
           onclick="__doPostBack('_greenButton','')"
           name="_greenButton" id="_greenButton"
           type="button" value="Green" />
    <input language="javascript"
           onclick="__doPostBack('_blueButton','')"
           name="_blueButton" id="_blueButton"
           type="button" value="Blue" />
    </p>
  </form>
</body>

5. Web page Lifecycle

Figure 2-5. Page Event Sequence


6. Use Code-Behind technology to write Web Form Code

Listing 2-10 Sample Page with Server-Side Controls and Code-Behind

<!— WebFormPage2.aspx —>
<%@ Page Language="C#"
         Inherits="EssentialAspDotNet.WebForms.Page2"
         Src="Page2.cs" AutoEventWireUp="false" %>


<body>
  <form runat=server>
            <input type=text id=_name runat=server/>            <select id=_personality runat=server />     <input type=button id=_enterButton
             value="Enter" runat=server/>
    <p runat=server id=_messageParagraph />
  </form>
</body>

Listing 2-11 Code-Behind File for Sample Page

// Page2.cs

Using System;
Using System. Web;
Using System. Web. UI;
Using System. Web. UI. HtmlControls;
Using System. Web. UI. WebControls;

Namespace EssentialAspDotNet. WebForms
{

Public class Page2: Page
{
Protected HtmlSelect _ personality;
Protected HtmlInputText _ name;
Protected HtmlInputButton _ enterButton;
Protected HtmlGenericControl _ messageParagraph;

Override protected void OnInit (EventArgs e)
{
// Wire up handler to ServerClick event of button
_ EnterButton. ServerClick + = new EventHandler (OnEnter );
}

Override protected void OnLoad (EventArgs e)
{
// On initial access, populate select with items
If (! IsPostBack)
{
_ Personality. Items. Add (new ListItem ("extraverted "));
_ Personality. Items. Add (new ListItem ("introverted "));
_ Personality. Items. Add (new ListItem ("in-"));
}
}

Protected void OnEnter (object src, EventArgs e)
{
// When the user presses enter, print a message
String msg = string. Format ("Hi {0}, you selected {1 }",
_ Name. Value, _ personality. Value );
_ MessageParagraph. InnerText = msg;
}
}

Field Binding Technology

Figure 2-6. Binding Fields to Server-Side Controls

7. If you want to reference the root directory in the server-side control, you can use "~ ", Which is interpreted as a reference to Request. ApplicationPath.

Listing 2-12 Using Root Path Reference Syntax

<! -RootPathSyntax. aspx->
<Html>
<Body>
<H1> Root path reference test page <Form runat = "server">
<A href = "~ /Otherpages/hi. aspx "runat =" server ">

</A>
</Form>
</Body> 

8. HtmlControl Control

All are derived from the base class of System. Web. UI. Control, especially System. Web. UI. HtmlControls. HtmlControl.

Figure 2-7. HtmlControl Hierarchy

Table 2-1. Tag Mappings for HtmlControls
Tag	HtmlControlClass
	HtmlImage
<Input type = file runat = server/>	HtmlInputFile
<Input type = hidden runat = server/>	HtmlInputHidden
<Input type = image runat = server/>	HtmlInputImage
<Input type = radio runat = server/>	HtmlInputRadioButton
<Input type = text runat = server/>	HtmlInputText
<Input type = checkbox runat = server/>	HtmlInputCheckBox
<Form runat = server>	HtmlForm
<Span runat = server> <Div runat = server> <P runat = server>Etc. (all other elements)	HtmlGenericControl
<Select runat = server/>	HtmlSelect
<Table runat = server/>	HtmlTable
<Td>(Within a server-side table) <Th>(Within a server-side table)	HtmlTableCell
<Tr>(Within a server-side table)	HtmlTableRow
<Textarea runat = server/>	HtmlTextArea
<A runat = server/>	HtmlAnchor
<Input type = button runat = server/>	HtmlInputButton
<Input type = submit runat = server/>	HtmlInputButton
<Input type = reset runat = server/>	HtmlInputButton

9. WebControl Control

Figure 2-8. WebControl Hierarchy

List controls:

Listing 2-13 ListControl Properties

public class ListControl : WebControl
{
  public virtual bool     AutoPostBack          {get; set;}
  public virtual string   DataMember            {get; set;}
  public virtual object   DataSource            {get; set;}
  public virtual string   DataTextField         {get; set;}
  public virtual string   DataTextFormatString  {get; set;}
  public virtual string   DataValueField        {get; set;}
  public virtual ListItemCollection Items       {get; set;}
  public virtual int      SelectedIndex         {get; set;}
  public virtual ListItem SelectedItem          {get;}

  public event EventHandler SelectedIndexChanged;
  //...
}

Figure 2-9. Rendering of CheckBoxList and RadioButtonList Controls

Listing 2-14 Sample Use of Xml, AdRotator, and Panel Controls

<!— File: XmlAdPanel.aspx —>
<%@ Page language="c#" %>
<HTML>
<body>
<form runat="server">
<asp:Xml id=_xml1 runat="server"
         DocumentSource="sample.xml"
         TransformSource="sampleTransform.xsl">
</asp:Xml><br/>
<asp:AdRotator id=_ar1 runat="server"
     Width="468px" Height="60px"
     AdvertisementFile="pics.xml"></asp:AdRotator>

<asp:Panel id=_p1 runat=server HorizontalAlign='center'
                  Visible='true' bgColor='cornsilk'>
  <asp:Label id=_l1 runat=server>Panel label</asp:Label>
  <br/>
  <asp:TextBox id=_tb1 runat=server/>
  <br/>
  <asp:Button Text='Push me!' runat=server/>
</asp:Panel>
</FORM>

  </body>
</HTML>

10. Differences between Web controls and Html controls

Web Control layers and processing are relatively simple

Html controls facilitate upgrading asp and html pages to. net

11. VS.net processes WebForm
12. Summary
AsP. NET uses webForm to introduce control-based programming methods into web application development. Drawing on the familiar desktop application control model, ASP. NET defines many control classes used to represent elements on Web forms. These controls generate themselves into HTML as part of the response to HTTP requests. Any changes made to these controls on the server will be reflected in customer generation in the future, so that developers can focus more on application construction, you don't have to spend too much energy on the details of browser generation. To enable this control-based programming model to be used for all elements on the web page. asP. NET introduces viewstate as a means to convert the control state (this state cannot be transferred as part of the standard PosT request. Server events improve the control model.
You can use two sets of server-side controls: Htmlcontrol and Webcontrol. The Htmlcontrol class strictly reflects their equivalent HTML tags, which can easily convert existing HTML webpages to ASP. NET. The Webcontrol class provides a more unified programming interface. Most developers choose to use it when building an asp.net webpage from the beginning.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

Learning notes on ASP.net (1.1) principles-Chapter 2 web Form webpage window

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support