ASP.NET Web server controls

ASP.NET 有三种类型的Control：ASP.NET Web server controls 、ASP.NET User Controls 和 ASP.NET Web Parts Controls。

ASP.NET Web server controls are objects on ASP.NET Web pages that run when the page is requested and that render markup to a browser. Many Web server controls resemble familiar HTML elements, such as buttons and text boxes. Other controls encompass complex behavior, such as a calendar controls, and controls that manage data connections.

ASP.NET Web server controls又有4种类型：

HTML server controls ： HTML elements exposed to the server so you can program them. HTML server controls expose an object model that maps very closely to the HTML elements that they render.

Web server controls ： Controls with more built-in features than HTML server controls. Web server controls include not only form controls such as buttons and text boxes, but also special-purpose controls such as a calendar, menus, and a tree view control. Web server controls are more abstract than HTML server controls in that their object model does not necessarily reflect HTML syntax.

Validation controls ： Controls that incorporate logic to enable you to what users enter for input controls such as the TextBox control. Validation controls enable you to check for a required field, to test against a specific value or pattern of characters, to verify that a value lies within a range, and so on. For more information, see ASP.NET Validation Controls.

User controls ： Controls that you create as ASP.NET Web pages. You can embed ASP.NET user controls in other ASP.NET Web pages, which is an easy way to create toolbars and other reusable elements. For more information, see ASP.NET User Controls.

HTML Server Controls

HTML server controls are HTML elements (or elements in other supported markup, such as XHTML) containing attributes that make them programmable in server code. By default, HTML elements on an ASP.NET Web page are not available to the server. Instead, they are treated as opaque text and passed through to the browser. However, by converting HTML elements to HTML server controls, you expose them as elements you can program on the server.

下面是一个很简单的aspx的例子，其中包含两个HTML Server Controls：

<% @ Page Language = " C# " AutoEventWireup = " true " CodeBehind = " Default.aspx.cs " Inherits = " WebApplication1._Default "   %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
    < title ></ title >
</ head >
< body >
    < textarea id ="textarea001" runat ="server" rows ="2" cols ="20"   />
    < form id ="form10000000" runat ="server" >
    < div >
       
    </ div >
    </ form >
    < textarea id ="textarea2" runat ="server" rows ="2" cols ="20"   />
</ body >
</ html >

 

当这两个带有runat="server" 的HTML element被加入到这个aspx文件后，VS为自动在aspx.designer.cs中加入两个变量：

        ///   <summary>
        /// textarea001 control.
        ///   </summary>
        ///   <remarks>
        /// Auto-generated field.
        /// To modify move field declaration from designer file to code-behind file.
        ///   </remarks>
        protected   global ::System.Web.UI.HtmlControls.HtmlTextArea textarea001;
       
        ///   <summary>
        /// form10000000 control.
        ///   </summary>
        ///   <remarks>
        /// Auto-generated field.
        /// To modify move field declaration from designer file to code-behind file.
        ///   </remarks>
        protected   global ::System.Web.UI.HtmlControls.HtmlForm form10000000;
       
        ///   <summary>
        /// textarea2 control.
        ///   </summary>
        ///   <remarks>
        /// Auto-generated field.
        /// To modify move field declaration from designer file to code-behind file.
        ///   </remarks>
        protected   global ::System.Web.UI.HtmlControls.HtmlTextArea textarea2;

在Page的code-behind文件中就可以直接使用这些属性了：

 

 

namespace WebApplication1
{
    public   partial   class _Default : System.Web.UI.Page
    {
        protected   void Page_Load( object sender, EventArgs e)
        {
            textarea001.Focus();
            textarea001.InnerText =   " Hello Jackie " ;
            textarea2.InnerText +=   " Hello World " ;
            textarea2.Focus();
        }
       
    }
}

 

在客户端看到的代码如下所示，分析下面的代码，在form element中加入了若干其他的html element 和script 代码，其中有两个函数定义，但是没有看到在哪里被调用，这应该是通过导入的script脚本做了封装

 

<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
< html xmlns = " http://www.w3.org/1999/xhtml " >
< head >
    < title ></ title >
</ head >
< body >
    < textarea name = " textarea001 " id = " textarea001 " rows = " 2 " cols = " 20 " > Hello Jackie </ textarea >
    < form name = " form10000000 " method = " post " action = " Default.aspx " id = " form10000000 " >
    < div >
        < input type = " hidden " name = " __LASTFOCUS " id = " __LASTFOCUS " value = ""   />
        < input type = " hidden " name = " __VIEWSTATE " id = " __VIEWSTATE " value = " /wEPDwULLTEzNjI1OTc1ODEPZBYEAgMPFgIeCWlubmVyaHRtbAUMSGVsbG8gSmFja2llZAIHDxYCHwAFC0hlbGxvIFdvcmxkZGS41iAjdfI0H0gYU9g4/EkKmFQwmA== "   />
    </ div >
    < script type = " text/javascript " >
// <![CDATA[
        var theForm = document.forms[ ' form10000000 ' ];
        if ( ! theForm) {
            theForm = document.form10000000;
        }
        function __doPostBack(eventTarget, eventArgument) {
            if ( ! theForm.onsubmit || (theForm.onsubmit() !=   false )) {
                theForm.__EVENTTARGET.value = eventTarget;
                theForm.__EVENTARGUMENT.value = eventArgument;
                theForm.submit();
            }
        }
// ]]>
    </ script >
    < script src = " /WebResource.axd?d=W1NSiiA2akIHp9PLZSYwj7RjacMQZpvTUhpNraOlTU9-wEoKx2cccNhutsHwMsVthkzDvAJ45v6LYWvauK7ilMtpAGc1&amp;t=634209066757546466 "
        type = " text/javascript " ></ script >
    < script src = " /WebResource.axd?d=W2fvb5tZfguxpIBcLk2pnJJqAvJaEoZa5ygpiThwx-t5qO15pqosIXqAaFKQW8R7C_X-t7XMDM4MYEO1eERROpHkwW81&amp;t=634209066757546466 "
        type = " text/javascript " ></ script >
    < div >
        < input type = " hidden " name = " __EVENTTARGET " id = " __EVENTTARGET " value = ""   />
        < input type = " hidden " name = " __EVENTARGUMENT " id = " __EVENTARGUMENT " value = ""   />
        < input type = " hidden " name = " __EVENTVALIDATION " id = " __EVENTVALIDATION " value = " /wEWAgLyz6bkCAKwp7T4DwURadkBklIv6iKv9i7EVvhOjCxy "   />
    </ div >
    < div >
    </ div >
    < script type = " text/javascript " >
// <![CDATA[
        WebForm_AutoFocus( ' textarea2 ' ); // ]]>
    </ script >
    </ form >
    < textarea name = " textarea2 " id = " textarea2 " rows = " 2 " cols = " 20 " > Hello World </ textarea >
</ body >
</ html >

 

通过上面的了解，我们可以知道，ASP.NET可以用后台代码控制HTML Server Control的行为。

 

 

Web Server Controls

HTML Server Control 与html元素是一一对应的，一个form就生成一个form，不会变成两个li。而Web Server Control 就不一样了，它可以根据不同的浏览器输出不同的Html element，来实现一个特定的效果，而且可以是很多个html element的组合。

     < form  id ="form10000000"  runat ="server" >
     < div >
         < asp:CheckBoxList  ID ="CheckBoxList1"  runat ="server" >
         </ asp:CheckBoxList >
     </ div >
     </ form >

 

上面的代码在页面中加入了一个asp:CheckBoxList元素，这个元素在code中可以像属性一样访问，例如下面的code：

 

             this .CheckBoxList1.Items.Add( new  ListItem( " Microsoft " ));
             this .CheckBoxList1.Items.Add( new  ListItem( " IBM " ));
             this .CheckBoxList1.Items.Add( new  ListItem( " Apple " ));

 

这个页面中这三个元素最后被转化成了如下的代码：

   < table  id ="CheckBoxList1"  border ="0" >
     < tr >
         < td >< input  id ="CheckBoxList1_0"  type ="checkbox"  name ="CheckBoxList1$0"   />< label  for ="CheckBoxList1_0" > Microsoft </ label ></ td >
     </ tr >< tr >
         < td >< input  id ="CheckBoxList1_1"  type ="checkbox"  name ="CheckBoxList1$1"   />< label  for ="CheckBoxList1_1" > IBM </ label ></ td >
     </ tr >< tr >
         < td >< input  id ="CheckBoxList1_2"  type ="checkbox"  name ="CheckBoxList1$2"   />< label  for ="CheckBoxList1_2" > Apple </ label ></ td >
     </ tr >
   </ table >