UpdatePanel的简单用法(非嵌套)
来源:互联网 发布:青鸟软件股份有限公司 编辑:程序博客网 时间:2024/05/17 20:33
ScriptManager和UpdatePanel控件联合使用可以实现页面局部异步刷新的效果。UpdatePanel用来设置页面中局部异步刷新的区域,它必须依赖于ScriptManager,因为ScriptManager控件提供了客户端脚本生成与管理UpdatePanel的功能。
一、实例一
UpdatePanel内部控件引起的回发,来异步更新当前UpdatePanel内部其他控件的内容。
前台代码如下:
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager><asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <div> <asp:DropDownList ID="ddlCity" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlCity_SelectedIndexChanged"></asp:DropDownList> <br /> <asp:DropDownList ID="ddlCounty" runat="server"></asp:DropDownList> <br /> 用户名:<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox> </div> </ContentTemplate></asp:UpdatePanel>
后台代码如下:
protected void Page_Load(object sender, EventArgs e){ if (!IsPostBack) { ddlCity.Items.Add(new ListItem("annotate", "1")); ddlCity.Items.Add(new ListItem("diagram", "2")); ddlCity.Items.Add(new ListItem("cryptography", "3")); ddlCity.Items.Add(new ListItem("explicit", "4")); ddlCity.Items.Add(new ListItem("implicit", "5")); ddlCounty.Items.Add(new ListItem("allot", "1")); ddlCounty.Items.Add(new ListItem("require", "2")); ddlCounty.Items.Add(new ListItem("assign", "3")); ddlCounty.Items.Add(new ListItem("redundant", "4")); ddlCounty.Items.Add(new ListItem("mandatory", "5")); txtUserName.Text = "guoguo"; }}protected void ddlCity_SelectedIndexChanged(object sender, EventArgs e){ ddlCounty.Items.Add(new ListItem("bonus", "6")); txtUserName.Text += "9";}
注意:
此时ScriptManager的EnablePartialRendering属性应设为true(默认即为true);
UpdatePanel的UpdateMode属性应设为Always(默认即为Always);
UpdatePanel的ChildAsTrigger属性应设为true(默认即为true);
二、实例二
UpdatePanel外部控件引起的回发,来异步更新UpdatePanel内部控件的内容。
上面的方式能够实现简单地异步局部更新的功能,但就性能方面考虑,我们应当只将数据确实会发生变化的控件放到UpdatePanel中,这就可能出现引起回发的控件不在UpdatePanel内的情况。我们有两种方式实现这种效果:
A、在Page_Load中用ScriptManager1.RegisterAsyncPostBackControl()注册一下要实现异步回发的控件。
B、用触发器来实现更新特定UpdatePanel。
(所有UpdatePanel都刷新)方法A前台代码:
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager><asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <div> <asp:DropDownList ID="ddlCity" runat="server" AutoPostBack="True"></asp:DropDownList> <br /> 用户名:<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox><%=DateTime.Now %> </div> </ContentTemplate></asp:UpdatePanel><asp:UpdatePanel ID="UpdatePanel2" runat="server"> <ContentTemplate> <div> <asp:DropDownList ID="ddlCounty" runat="server" AutoPostBack="True"></asp:DropDownList> <br /> 密码:<asp:TextBox ID="txtUserPwd" runat="server"></asp:TextBox><%=DateTime.Now %> </div> </ContentTemplate></asp:UpdatePanel><asp:Button ID="btnPart" runat="server" Text="局部刷新" OnClick="btnPart_Click" /><asp:Button ID="btnPage" runat="server" Text="整页刷新" OnClick="btnPage_Click" />
(所有UpdatePanel都刷新)方法A后台代码:
protected void Page_Load(object sender, EventArgs e){ ScriptManager1.RegisterAsyncPostBackControl(this.btnPart); if (!IsPostBack) { ddlCity.Items.Add(new ListItem("annotate", "1")); ddlCity.Items.Add(new ListItem("diagram", "2")); ddlCity.Items.Add(new ListItem("cryptography", "3")); ddlCity.Items.Add(new ListItem("explicit", "4")); ddlCity.Items.Add(new ListItem("implicit", "5")); ddlCounty.Items.Add(new ListItem("allot", "1")); ddlCounty.Items.Add(new ListItem("require", "2")); ddlCounty.Items.Add(new ListItem("assign", "3")); ddlCounty.Items.Add(new ListItem("redundant", "4")); ddlCounty.Items.Add(new ListItem("mandatory", "5")); txtUserName.Text = "guoguo"; txtUserPwd.Text = "bala"; }}protected void btnPart_Click(object sender, EventArgs e){ ddlCity.Items.Add(new ListItem("bonus", "6")); txtUserName.Text += "9";}protected void btnPage_Click(object sender, EventArgs e){ ddlCity.Items.Add(new ListItem("bonus", "6")); txtUserName.Text += "9";}
注意:
此时ScriptManager的EnablePartialRendering属性应设为true(默认即为true);
UpdatePanel的UpdateMode属性应设为Always(默认即为Always);
UpdatePanel的ChildAsTrigger属性应设为true(默认即为true);
(特定UpdatePanel刷新)方法A前台代码:
需要在btnPart控件的Click事件方法体的后面加入代码:UpdatePanel1.Update();
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager><asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> <ContentTemplate> <div> <asp:DropDownList ID="ddlCity" runat="server" AutoPostBack="True"></asp:DropDownList> <br /> 用户名:<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox><%=DateTime.Now %> </div> </ContentTemplate></asp:UpdatePanel><asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode=" Conditional"> <ContentTemplate> <div> <asp:DropDownList ID="ddlCounty" runat="server" AutoPostBack="True"></asp:DropDownList> <br /> 密码:<asp:TextBox ID="txtUserPwd" runat="server"></asp:TextBox><%=DateTime.Now %> </div> </ContentTemplate></asp:UpdatePanel><asp:Button ID="btnPart" runat="server" Text="局部刷新" OnClick="btnPart_Click" /><asp:Button ID="btnPage" runat="server" Text="整页刷新" OnClick="btnPage_Click" />
(特定UpdatePanel刷新)方法A后台代码:
protected void Page_Load(object sender, EventArgs e){ ScriptManager1.RegisterAsyncPostBackControl(this.btnPart);}protected void btnPart_Click(object sender, EventArgs e){ ddlCity.Items.Add(new ListItem("bonus", "6")); txtUserName.Text += "9"; this.UpdatePanel1.Update();}protected void btnPage_Click(object sender, EventArgs e){ ddlCity.Items.Add(new ListItem("bonus", "6")); txtUserName.Text += "9";}
注意,特定刷新UpdatePanel1时:
UpdatePanel1、UpdatePanel2的UpdateMode设为Conditional,可实现UpdatePanel1定向刷新;
UpdatePanel1、UpdatePanel2的UpdateMode设为Always,则所有的UpdatePanel都不能刷新;
UpdatePanel1的UpdateMode设为Conditional,UpdatePanel2的UpdateMode设为Always,则所有的UpdatePanel都刷新;
UpdatePanel1的UpdateMode设为Always,UpdatePanel2的UpdateMode设为Conditional,则所有的UpdatePanel都不能刷新;
方法B前台代码:
a.选中要进行局部更新的UpdatePanel控件
b.在属性页中点击Trigger(集合)属性右边的小按钮
c.在对话框中的成员列表中添加一个AsyncPostBackTriggers成员
d.指定AsyncPostBackTriggers成员的ControlID和EventName
e.所有UpdatePanel的UpdateMode都设为Conditional,否则四种情况的效果与上一示例相同
f.一个UpdatePanel上可以有多个触发器,实现在不同的情况下对该UpdatePanel控件内容地更新
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager><asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> <ContentTemplate> <div> <asp:DropDownList ID="ddlCity" runat="server" AutoPostBack="True"></asp:DropDownList> <br /> 用户名:<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox><%=DateTime.Now %> </div> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="btnPart" EventName="Click" /> </Triggers></asp:UpdatePanel><asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional"> <ContentTemplate> <div> <asp:DropDownList ID="ddlCounty" runat="server" AutoPostBack="True"></asp:DropDownList> <br /> 密码:<asp:TextBox ID="txtUserPwd" runat="server"></asp:TextBox><%=DateTime.Now %> </div> </ContentTemplate></asp:UpdatePanel><asp:Button ID="btnPart" runat="server" Text="局部刷新" OnClick="btnPart_Click" /><asp:Button ID="btnPage" runat="server" Text="整页刷新" OnClick="btnPage_Click" />
方法B后台代码:
protected void btnPart_Click(object sender, EventArgs e){ ddlCity.Items.Add(new ListItem("bonus", "6")); txtUserName.Text += "9"; this.UpdatePanel1.Update();}protected void btnPage_Click(object sender, EventArgs e){ ddlCity.Items.Add(new ListItem("bonus", "6")); txtUserName.Text += "9";}
三、实例三
两个UpdatePanel控件,其中一个UpdatePanel内部控件引发两个UpdatePanel控件同时刷新。
两个UpdatePanel的UpdateM必须是Always。
前台代码:
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager><asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always"> <ContentTemplate> <div> <asp:DropDownList ID="ddlCity" runat="server" AutoPostBack="True"></asp:DropDownList> <br /> 用户名:<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox><%=DateTime.Now %> <br /> <asp:Button ID="btnPart" runat="server" Text="局部刷新" OnClick="btnPart_Click" /> </div> </ContentTemplate></asp:UpdatePanel><asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Always"> <ContentTemplate> <div> <asp:DropDownList ID="ddlCounty" runat="server" AutoPostBack="True"></asp:DropDownList> <br /> 密码:<asp:TextBox ID="txtUserPwd" runat="server"></asp:TextBox><%=DateTime.Now %> </div> </ContentTemplate></asp:UpdatePanel>
后台代码:
protected void btnPart_Click(object sender, EventArgs e){ ddlCity.Items.Add(new ListItem("bonus", "6")); txtUserName.Text += "9";}
四、示例四
两个UpdatePanel控件,其中一个UpdatePanel内部控件引发当前UpdatePanel内部
其他控件刷新,而另一个UpdatePanel不刷新。
两个UpdatePanel的UpdateM必须是Conditional。
前台代码:
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager><asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> <ContentTemplate> <div> <asp:DropDownList ID="ddlCity" runat="server" AutoPostBack="True"></asp:DropDownList> <br /> 用户名:<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox><%=DateTime.Now %> <br /> <asp:Button ID="btnPart" runat="server" Text="局部刷新" OnClick="btnPart_Click" /> </div> </ContentTemplate></asp:UpdatePanel><asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional"> <ContentTemplate> <div> <asp:DropDownList ID="ddlCounty" runat="server" AutoPostBack="True"></asp:DropDownList> <br /> 密码:<asp:TextBox ID="txtUserPwd" runat="server"></asp:TextBox><%=DateTime.Now %> </div> </ContentTemplate></asp:UpdatePanel>
后台代码:
protected void btnPart_Click(object sender, EventArgs e){ ddlCity.Items.Add(new ListItem("bonus", "6")); txtUserName.Text += "9";}
五、实例五
两个UpdatePanel控件,其中一个UpdatePanel1内部控件引发另一个UpdatePanel2控件刷新,但本身不刷新。
a.两个UpdatePanel的UpdateM必须是Conditional。
b.两个UpdatePanel的ChildrenAsTriggers必须是false
c.在UpdatePanel2中添加一个触发器,触发源为UpdatePanel1中btnPart的Click事件
前台代码:
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager><asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false"> <ContentTemplate> <div> <asp:DropDownList ID="ddlCity" runat="server" AutoPostBack="True"></asp:DropDownList> <br /> 用户名:<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox><%=DateTime.Now %> <br /> <asp:Button ID="btnPart" runat="server" Text="局部刷新" OnClick="btnPart_Click" /> </div> </ContentTemplate></asp:UpdatePanel><asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false"> <ContentTemplate> <div> <asp:DropDownList ID="ddlCounty" runat="server" AutoPostBack="True"></asp:DropDownList> <br /> 密码:<asp:TextBox ID="txtUserPwd" runat="server"></asp:TextBox><%=DateTime.Now %> </div> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="btnPart" EventName="Click" /> </Triggers></asp:UpdatePanel>
后台代码:
protected void btnPart_Click(object sender, EventArgs e){ //ddlCity和txtUserName都是UpdatePanel1中的控件 //虽然后台做了处理但是前台控件内容不会发生变化 //因为btnPart的Click事件只能异步更新UpdatePanel2中的内容 ddlCity.Items.Add(new ListItem("bonus", "6")); txtUserName.Text += "9";}
六、UpdateProgress
属性:
DynamicLayout:隐藏时是否占位,默认值为true
DisplayAfter:延迟多少时间后显示,单位毫秒,默认值为500
AssociatedUpdatePanelID:关联的UpdatePanel的ID,默认为NULL
七、总结
UpdatePanel确实很有用,但是我们在使用过程中一定要注意它可能给我们带来的问题,例如:弹出框不显示等。使用的话确保UpdatePanel包含的内容都是自己需要更新的部分。
如果遇到了弹出框不显示的问题请参考:http://blog.csdn.net/xiaouncle/article/details/52290451
- UpdatePanel的简单用法(非嵌套)
- UpdatePanel的简单用法(1)
- UpdatePanel的简单用法(2)
- asp.net UpdatePanel的简单用法
- asp.net UpdatePanel的简单用法
- asp.net UpdatePanel的简单用法
- asp.net UpdatePanel的简单用法
- asp.net UpdatePanel的简单用法
- asp.net UpdatePanel的简单用法
- UpdatePanel简单用法
- Updatepanel的基础用法(1)
- UpdatePanel的用法详解
- UpdatePanel的用法详解
- UpdatePanel的用法详解
- UpdatePanel的用法详解
- UpdatePanel的用法详解
- UPdatePanel的简单用法(3) --客户端编程1
- UpdatePanel的简单用法(3) --客户端编程2
- Webstorm浏览器添加
- RabbitMQ之监控(2)
- MyBatis中的一二级缓存
- 第一周周末总结
- CAS原理分析
- UpdatePanel的简单用法(非嵌套)
- CSDN积分规则
- NOIP2016提高组D1T2天天爱跑步(lca+树上差分)
- hdu 1847 Good Luck in CET-4 Everybody! (博弈论)
- 编程马拉松----走迷宫
- Hihocoder1014 Tire前缀树 很好的模板
- 4.x版eclipse在windows下启动报a java runtime environment(JRE)的有效解决办法
- Android 高仿微信 你可能要发送的图片
- leetcode 53. Maximum Subarray DP+最大子串和