文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >专栏 >UpdatePanel的简单用法（非嵌套）「建议收藏」

UpdatePanel的简单用法（非嵌套）「建议收藏」

作者头像
全栈程序员站长
发布于 2022-09-15 14:58:26
发布于 2022-09-15 14:58:26
1.4K0
举报
文章被收录于专栏：全栈程序员必看全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

ScriptManager和UpdatePanel控件联合使用可以实现页面局部异步刷新的效果。UpdatePanel用来设置页面中局部异步刷新的区域，它必须依赖于ScriptManager，因为ScriptManager控件提供了客户端脚本生成与管理UpdatePanel的功能。

ScriptManager属性

解释

EnablePartialRendering

如果启用了部分呈现且禁止了整页更新，则为 true；否则为 false。 默认值为 true。

UpdatePanel属性

解释

ChildrenAsTriggers

当UpdateMode属性为Conditional时，UpdatePanel中的子控件的异步回送是否会引发UpdatePanel的更新；当UpdateMode属性为Always时，ChildrenAsTriggers必须设置为true。

RenderMode

表示UpdatePanel最终呈现的HTML元素。Block（默认）表示< div>，Inline表示< span>。

UpdateMode

表示UpdatePanel的更新模式，有两个选项：Always和Conditional，默认值是Always。Always表示不管有没有Trigger，其他控件都将更新该UpdatePanel；Conditional表示只有当前UpdatePanel的Trigger或ChildrenAsTriggers属性为true时，当前UpdatePanel中控件引发的异步回送或整页回送，或是服务器端调用Update()方法才会引发更新该UpdatePanel。

一、实例一

UpdatePanel内部控件引起的回发，来异步更新当前UpdatePanel内部其他控件的内容。 前台代码如下：

代码语言：javascript
复制
<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>

后台代码如下：

代码语言：javascript
复制
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前台代码：

代码语言：javascript
复制
<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后台代码：

代码语言：javascript
复制
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();

代码语言：javascript
复制
<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后台代码：

代码语言：javascript
复制
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控件内容地更新

代码语言：javascript
复制
<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后台代码：

代码语言：javascript
复制
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。 前台代码：

代码语言：javascript
复制
<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>

后台代码：

代码语言：javascript
复制
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。 前台代码：

代码语言：javascript
复制
<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>

后台代码：

代码语言：javascript
复制
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事件

前台代码：

代码语言：javascript
复制
<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>

后台代码：

代码语言：javascript
复制
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

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/163530.html原文链接：https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
编程算法

本文分享自 作者个人站点/博客 前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ，欢迎热爱写作的你一起参与！

编程算法
评论
登录后参与评论
0 条评论
热度
最新
登录 后参与评论
推荐阅读
目录
  • 一、实例一
  • 二、实例二
  • 三、实例三
  • 四、示例四
  • 五、实例五
  • 六、UpdateProgress
  • 七、总结
领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

Copyright © 2013 - 2026 Tencent Cloud.

All Rights Reserved. 腾讯云 版权所有

登录 后参与评论