UpdatePanel控件也是Ajax里用得最多的控件之一,UpdatePanel控件是用來(lái)局部更新網(wǎng)頁(yè)上的內容,網(wǎng)頁(yè)上要局部更新的內容必須放在UpdatePanel控件里,他必須和上一次說(shuō)的ScriptManager控件一起使用?,F在來(lái)看UpdatePanel的屬性
UpdatePanel重要的屬性如下:
屬性
說(shuō)明
ChildrenAsTriggers
當UpdateMode屬性為Conditional時(shí),UpdatePanel中的子控件的異步回送是否會(huì )引發(fā)UpdatePanle的更新。
RenderMode
表示UpdatePanel最終呈現的HTML元素。Block(默認)表示<div>,Inline表示<span>
UpdateMode
表示UpdatePanel的更新模式,有兩個(gè)選項:Always和Conditional。Always是不管有沒(méi)有Trigger,其他控件都將更新該UpdatePanel,Conditional表示只有當前UpdatePanel的Trigger,或ChildrenAsTriggers屬性為true時(shí)當前UpdatePanel中控件引發(fā)的異步回送或者整頁(yè)回送,或是服務(wù)器端調用Update()方法才會(huì )引發(fā)更新該UpdatePanel。
ChildrenAsTriggers:當UpdateMode屬性為Conditional時(shí),UpdatePanel中的子控件的異步回送是否會(huì )引發(fā)UpdatePanle的更新。RenderMode:表示UpdatePanel最終呈現的HTML元素。Block(默認)表示<div>,Inline表示<span>UpdateMode:表示UpdatePanel的更新模式,有兩個(gè)選項:Always和Conditional。Always是不管有沒(méi)有Trigger,其他控件都將更新該UpdatePanel,Conditional表示只有當前UpdatePanel的Trigger,或ChildrenAsTriggers屬性為true時(shí)當前UpdatePanel中控件引發(fā)的異步回送或者整頁(yè)回送,或是服務(wù)器端調用Update()方法才會(huì )引發(fā)更新該UpdatePanel。
Contente Template:用來(lái)定義UpdatePanel的內容
Triggers:分別為AsyncPostBackTrigger和PostBackTrigger
AsyncPostBackTrigge用來(lái)指定某個(gè)服務(wù)器端控件以及其將觸發(fā)的服務(wù)器端事件作為該UpdatePanel的異步更新觸發(fā)器,它需要設置的屬性有控件ID和服務(wù)端控件的事件;PostBackTrigger用來(lái)指定在UpdatePanel中的某個(gè)服務(wù)端控件,它所引發(fā)的回送不使用異步回送,而仍然是傳統的整頁(yè)回送
現在我們來(lái)做一個(gè)簡(jiǎn)單的實(shí)例:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
body
{ background-attachment:fixed;
background-image:url(Blue hills.jpg);
}
.style1
{
background-position:top center;
}
</style>
</head>
<body onload="oSpan.className='style1'" >
<form id="form1" runat="server">
<span style="font-size:14; width:250;" ID="oSpan"
onmouseover="this.className='style2'" onmouseout="this.className='style1'"></span>
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</div>
<asp:UpdatePanel ID="uid" runat="server">
<ContentTemplate>
<div >
<asp:Button ID="Button1" runat="server" Text="異步回送" OnClick="Button1_Click1" />
<asp:Button ID="Button2" runat="server" Text="整頁(yè)回送" OnClick="Button2_Click" /><br />
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" Width="197px">
<Columns>
<asp:BoundField DataField="au_lname" FooterText="aaaa" HeaderText="au_lname" />
</Columns>
</asp:GridView>
<br />
<asp:Label ID="Label1" runat="server" Text="當前時(shí)間" Font-Bold="True" Font-Size="Large"></asp:Label>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" />
<asp:PostBackTrigger ControlID="Button2" />
</Triggers>
</asp:UpdatePanel>
<div id="div1" >
</div>
</form>
</body>
</html>
表示UpdatePanel最終呈現的HTML元素。Block(默認)表示<div>,Inline表示<span>
里面包含了一個(gè)Triggers,里面第一個(gè)屬性AsyncPostBackTrigger指定Button1實(shí)現異步更新,而PostBackTrigger
指定Button2實(shí)現整頁(yè)更新。
.CS代碼為:
protected void Button1_Click1(object sender, EventArgs e)
{
SqlConnection conn = new SqlConnection("server=.;uid=sa;pwd=;database=pubs");
string sql1 = "select top 5 au_lname from authors ";
SqlDataAdapter myAdapter = new SqlDataAdapter(sql1, conn);
DataSet ds = new DataSet();
myAdapter.Fill(ds, "bieminG");
//來(lái)自web service的dataset,這里隨便一個(gè)ds就可以;
this.GridView1.DataSource = ds.Tables["bieminG"].DefaultView; ;
this.GridView1.DataBind(); //數據綁定
}
protected void Button2_Click(object sender, EventArgs e)
{
this.Label1.Text = "11111";
}