深瞳

夜如深瞳，瞳深如夜
  :: :: 博问 :: 闪存 :: :: 联系 :: 订阅 订阅 :: 管理 ::
ASP.net(1.1)原理学习笔记--第二章 web Form 网页视窗
一，服务器端控件
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 Handlers
Listing 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网页时，都会选择使用它。








	

	
	

		posted on 
2005-08-06 09:47 
深瞳 
阅读(1020) 
评论(0) 
编辑 
收藏 
举报