通过Ajax来简单的实现局部刷新（主要为C#中使用的UpdatePanel控件和ScriptManager控件）

Posted 2021-02-12 JessePeng

局部刷新,UpdatePanel控件

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

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

一、实例一

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

    <div id="zcfl" class="field" style="display: none">
        <legend class="legend" style="text-align: center;">资产分类</legend>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <table class="tablebody">
                    <tr>
                        <td>
                            <span style="padding-left: 9px;">1.选好资产大类 ·····→ 2.再选择具体分类：</span>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align: center; padding: 8px 0px;">
                            <asp:RadioButtonList ID="ddlDl" runat="server" RepeatDirection="horizontal" CssClass="txt radiobutton"
                                RepeatLayout="Flow" OnSelectedIndexChanged="ddlDl_SelectedIndexChanged" AutoPostBack="True">
                                <asp:ListItem Value="1" Selected="true">固定资产</asp:ListItem>
                                <asp:ListItem Value="2">无形资产</asp:ListItem>
                                <asp:ListItem Value="3">其他</asp:ListItem>
                            </asp:RadioButtonList>
                        </td>
                    </tr>
                    <tr>
                        <td id="ddlzczl" style="text-align: center; padding: 12px 0px;">
                            <asp:RadioButtonList ID="ddlZcfl" runat="server" RepeatDirection="horizontal" CssClass="txt radiobutton"
                                RepeatLayout="flow">
                            </asp:RadioButtonList>
                        </td>
                    </tr>
                </table>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>

后台代码如下：

protected void ddlDl_SelectedIndexChanged(object sender, EventArgs e)
    {
        string id = ddlDl.SelectedValue;
        switch (id)
        {
            case "1": 
                GyHelp.BindListN(ddlZcfl, new ZcFlbAction().GetDataBindGdzc(), "text", "value", false, string.Empty, string.Empty); break;
            case "2":
                GyHelp.BindListN(ddlZcfl, new ZcFlbAction().GetDataBindWxzc(), "text", "value", false, string.Empty, string.Empty); break;
            default:
                GyHelp.BindListN(ddlZcfl, new ZcFlbAction().GetDataBindQtzc(), "text", "value", false, string.Empty, string.Empty);
                break;
        }    
    }

 

注意：
此时ScriptManager的EnablePartialRendering属性应设为true（默认即为true）；
UpdatePanel的UpdateMode属性应设为Always（默认即为Always）；
UpdatePanel的ChildAsTrigger属性应设为true（默认即为true）；

效果如图：

其他使用方法见 链接

以上是关于通过Ajax来简单的实现局部刷新（主要为C#中使用的UpdatePanel控件和ScriptManager控件）的主要内容，如果未能解决你的问题，请参考以下文章

ajax怎样从后台获取数据进行局部刷新

通过javascript&&ajax实现局部刷新

点击一个按钮如何实现div的局部刷新

点击一个按钮如何实现div的局部刷新

一个html网页，我想刷新里面的一部分，怎么办

利用ajax实现与php数据交互，并局部刷新页面