2012年10月25日 星期四

認識 Server Controls

Web server controls provide more functionality and a more consistent programming model than HTML server controls. Web server controls are based on .NET Framework classes, typically inherited from the WebControl class. ASP.NET renders web server controls as standardized HTML. In other words, if you use the Button web server control, ASP.NET renders it using the <button> HTML markup tag.

Life Cycle of an ASP.NET Web Page and Its Controls

Life Cycle of Page Processing

Life Cycle of Page Events

HTML vs. Web Server Controls

ASP.NET allows you to define actual HTML controls inside your page. By default, these HTML tags are not connected to any server control. Therefore, it can be difficult to use them from the server in that there are no instances of related controls with properties and methods. Instead, you can simply access the tag values through the Page.Request.Form collection. This model is fine for very simple pages and was the only model for classic ASP.

Alternatively, you can apply the attribute runat="server" to these control tags. In this case, ASP.NET will wire up the HTML tag to a related, server-side object that provides properties and methods designed to work with the given tag. This can make your programming experience much easier. In addition, ASP.NET automatically maintains state for these items between calls for you (recall the view state discussion).

HTML Server Controls

Creating HTML Server Controls

Add the runat="server" attribute to the Html Control

<body>
    <form id="form1" runat="server">
    <div>
        <input type="text" name="CustomerName" id="CustomerName" runat="server" />
        <input type="submit" id="HtmlSubmitButton" value="Html SubmitButton"  runat="server"  
            onclick="return Sure()" 
            onserverclick="HtmlSubmitButton_Click" 
            />
    </div>
    </form>
</body>

Setting HTML Server Control Properties

Setting Properties in Source View

<input type="button" id="myButton" runat="server" value="Click Me"
    style="position: absolute; top: 50px; left: 100px; width: 100px;" />

Setting Properties in Design View

Setting Properties in Code

myButton.Disabled = true;
myButton.Style.Add("background-color", "Black");
myButton.Style.Add("color", "Gray");

Web Server Controls

Web server controls are able to provide more functionality because they are not tied to a single HTML tag element. Instead, they typically render many HTML tags and may also include client-side JavaScript code. Web server controls also have the ability to detect the Web browser's capabilities and render the appropriate HTML based on those capabilities.

Creating Web Server Controls

Adding Web Server Controls Using Design View

Adding Web Server Controls Using Source View

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="WebSubmitButton" runat="server" Text="Web SubmitButton" 
    OnClientClick="return Sure()"
    OnClick="WebSubmitButton_Click" />

Adding Web Server Controls Dynamically Using Code

Recall that the PreInit event is typically used to create dynamic controls prior to their initialization inside the Init event.

protected void Page_PreInit(object sender, EventArgs e)
{
    TextBox textBoxUserName = new TextBox();
    textBoxUserName.ID = "TextBoxUserName";
    form1.Controls.Add(textBoxUserName);
}

protected void Button1_Click(object sender, EventArgs e)
{
    TextBox textBoxUserName = (TextBox)form1.FindControl("TextBoxUserName");
    myMessage.Show(this, textBoxUserName.Text);
}

Setting Web Server Control Properties

Setting Properties in Source View

<asp:Button ID="ButtonSave" runat="server" Text="Save"
  Style="position: absolute; top: 50px; left: 100px; width: 100px;" />

Setting Properties in Design View

Setting Properties in Code

Web server control properties can be set programmatically in the code-behind files of a Web page. Like all server controls, you reference the Web server controls by an instance variable named after the control's ID property. The following code was added to a Page_Load event handler. It sets the Style, Text, and Enabled properties of the button that has the ID of ButtonSave.

ButtonSave.Enabled = false;
ButtonSave.Text = "Click to Save";
ButtonSave.Style.Add("background-color", "Blue");

Upgrading from Earlier Versions of ASP.NET

通常 .NET 會將 Web Server Control 轉譯成最新的 Html 標準,所以,不同版本的 .Net ,在轉譯伺服器控制項時,有可能會發生不一樣的狀況。 你也可以使用 ControlRenderingCompatibilityVersion 屬性,來指定轉譯 HTML 相容的 ASP.NET 版本。

<system.web>
        <pages controlRenderingCompatibilityVersion="3.5"/>
    </system.web>

Controlling Automatic PostBack

Some Web server controls always cause a PostBack event when a specific event occurs. For example, the Button control's Click event.
Some Web server controls do not, for example, the TextBox control's TextChanged event. If required, you can set the AutoPostBack property as "True" to causes an automatic PostBack to the server.

<asp:TextBox ID="TextBox1" runat="server" AutoPostBack="true"></asp:TextBox>

Working with Naming Containers and Child Controls

Searching for Controls

Control c = FindControl("lblMessage");

Searching for child controls or controls created dynamically

Control c = GridView1.FindControl("ctl08");

沒有留言:

張貼留言