ASP.net(1.1)原理學習筆記–第二章 web Form 網頁視窗

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

一，伺服器端控制項
ASP.NET使用伺服器端控制項，建立WEB Form模型。
在傳統的html元素中添加一個屬性runat = server，就能建立一個伺服器端控制項，並且會自動在Page衍生類別中建立一個欄位，以該元素名為欄位名，以該元素的類型為控制項類型。
如此一來，該.aspx頁面就和案頭控制項類似，用同一個頁面就能處理和客戶的互動與響應。相反，在傳統的asp中，需要額外的編程。

二，使用隱藏欄位_VIEWSTATE
.net使用名為_VIEWSTATE的hidden控制項來儲存網頁的所有狀態，可用來儲存控制項的先前值。
Listing 2-3 Accumulator Page

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

<html>
<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>
    <h2>ASP.NET accumulator page</h2>
    <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</h2>
    <input name="_op" id="_op" type="text" size="2" />
    Sum:<span id="_sum"></span>
    <p>
     <input type=submit value="Add" />
    </p>
  </form>
</body>

</html>

三，事件
標準CLR伺服器端事件機制:委託。
1，顯式自動綁定委託訂閱事件:一般伺服器端控制項都提供一個EventHandler委託(DataGridItemEventHandler使用DataGridItemEventArgs)

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

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

<html>
<script runat=server>
protected void OnClickMyButton(object src, EventArgs e)//顯式建立EventHandler的新執行個體，並用OnClickMyButton函數初始化該執行個體ServerClick
 _message.InnerText = "You clicked the button!";
}

protected void Page_Init(object src, EventArgs e)//利用了Page_Init自動事件綁定技術
{
  _MyButton.ServerClick +=
                        new EventHandler(OnClickMyButton);//委託訂閱_MyButton的ServerClick事件
</script>
<body>
  <form runat=server>

    <h2>ASP.NET event page</h2>
    <p>
    <input type=button id=_MyButton
           value="Click me!" runat=server />
    </p>
    <span id=_message runat=server/>
  </form>
</body>
</html>


２，使用OnEvent文法來綁定事件：

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

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

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

四，使用兩個隱藏欄位來控制回送的控制項，__EVENTTARGET產生回送的控制項的標誌符, __EVENTARGUMENT傳遞事件的參數,

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

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

    <h2>ASP.NET color page</h2>
    <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>



</html>

Listing 2-8 Color Page Rendering

<html><body>
  <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>

    <h2>ASP.NET color page</h2>
    <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>
</html>

五，web頁面的生命週期

Figure 2-5. Page Event Sequence


六，使用Code-Behind技術來寫Web Form代碼

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

<html>

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

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-between"));
    }
  }

  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;
  }
}

採用了欄位綁定技術

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

七，如果要在伺服器端控制項中引用根目錄，可以使用 "~"，它被解釋成對Request.ApplicationPath的引用。

Listing 2-12 Using Root Path Reference Syntax

<!— RootPathSyntax.aspx —>
<html>
<body>
<h1>Root path reference test page</h1>
<form runat="server">
<a href="~/otherpages/hi.aspx" runat="server">
<img runat="server" src="~/images/hi.gif"/>
</a>
</form>
</body> </html>


八，HtmlControl控制項

都是從System.Web.UI.Control，尤其是System.Web.UI.HtmlControls.HtmlControl基類派生。

Figure 2-7. HtmlControl Hierarchy

Table 2-1. Tag Mappings for HtmlControls
Tag	HtmlControl Class
<img runat=server/>	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

九，WebControl控制項

Figure 2-8. WebControl Hierarchy

清單控制項：

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>

十，Web控制項和Html控制項的區別

Web控制項的層次與處理都比較簡單

Html控制項對asp和html頁面的升級到.net比較方便

十一，VS.net處理WebForm
十二，小結
AsP．NET用webForm將基於控制項的編程方法引入web應用程式開發。借鑒於熟悉的傳統型應用程式控制項模型， ASP．NET定義了許多控制項類，用於表示Web表單上的元素。這些控制項把它們自己產生為HTML，作為對HTTP請求的響應的一部分。在伺服器上對這些控制項所做的任何更改，以後都會在客戶產生方面反映出來，從而讓開發人員更專註於應用程式的構造，而不必花費太多的精力於瀏覽器產生方面的細節。為了使這種基於控制項的編程模型能用於網頁上的所有元素．AsP．NET引入了viewstate，作為一種轉換控制項狀態(該狀態不能作為標準PosT請求的一部分來傳送)的手段。伺服器端事件完善了控制項模型。
可以使用兩套伺服器端控制項類：Htmlcontrol控制項類和Webcontrol控制項類。Htmlcontrol類嚴格地反映了它們對等的HTML標記，能方便地將現有的HTML網頁轉換為ASP.NET。而Webcontrol類提供了一種更加統一的編程介面，大多數開發人員在從頭開始構建 asp.net網頁時，都會選擇使用它。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

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