UpdatePanel的简单用法(非嵌套)「建议收藏」

UpdatePanel的简单用法(非嵌套)「建议收藏」ScriptManager和UpdatePanel控件联合使用可以实现页面局部异步刷新的效果。UpdatePanel用来设置页面中局部异步刷新的区域,它必须依赖于ScriptManager,因为ScriptManager控件提供了客户端脚本生成与管理UpdatePanel的功能。

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

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内部其他控件的内容。
前台代码如下:

<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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/163530.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • c语言入门教程–-4运算符

    c语言入门教程–-4运算符

  • 一个软件完整的开发流程介绍

    一个软件完整的开发流程介绍刚开始写博文的时候就应该将这个文章更新一下,虽然不是什么大牛,但是对于软件的开发流程还是比较了解的,毕竟大大小小做过了好几个项目了,今天就大概的说一下,用我做过的一个项目来说吧,写的不好的,请多多见谅,毕竟小生不才。开发流程百度的解释是:不是我懒得写,而是觉得写出来也不是自己的,还不如直接告诉你们我是百度的概念…但是下面的我们就不要百度了,因为百度说的太专业,让你看了很烦,最起码我是很烦(都是…

  • 关于苹果审核反馈的17.2

    关于苹果审核反馈的17.2

  • RPC接口简介「建议收藏」

    RPC接口简介「建议收藏」什么是RPCRPC(RemoteProcedureCallProtocol)远程过程调用协议。一个通俗的描述是:客户端在不知道调用细节的情况下,调用存在于远程计算机上的某个对象,就像调用本地应用程序中的对象一样。比较正式的描述是:一种通过网络从远程计算机程序上请求服务,而不需要了解底层网络技术的协议。RPC的特点:RPC是协议。只是协议,而非实现。RPC实现包括:Dubbo、Thri…

    2022年10月13日
  • 367. 学校网络(Tarjan强连通分量)[通俗易懂]

    367. 学校网络(Tarjan强连通分量)[通俗易懂]一些学校连接在一个计算机网络上,学校之间存在软件支援协议,每个学校都有它应支援的学校名单(学校 A 支援学校 B,并不表示学校 B 一定要支援学校 A)。当某校获得一个新软件时,无论是直接获得还是通过网络获得,该校都应立即将这个软件通过网络传送给它应支援的学校。因此,一个新软件若想让所有学校都能使用,只需将其提供给一些学校即可。现在请问最少需要将一个新软件直接提供给多少个学校,才能使软件能够通过网络被传送到所有学校?最少需要添加几条新的支援关系,使得将一个新软件提供给任何一个学校,其他所有学校就都可

  • Java 字符串包含_实现字符串的复制

    Java 字符串包含_实现字符串的复制1问题描述给定一长字符串A和一短字符串B。请问,如何最快地判断出短字符串B中的所有字符是否都在长字符串A中?请编写一个判断函数实现此功能。为简单起见,假设输入的字符串只包含小写英文字母。下面举几个例子。(1)如果字符串A是”abcd”,字符串B是”bad”,答案是包含,因为字符串B中的字母都在字符串A中,或者说B是A的真子集。(2)如果字符串A是”abcd”,字符串B是”bce”,答案是…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号