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

Posted JessePeng

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了通过Ajax来简单的实现局部刷新(主要为C#中使用的UpdatePanel控件和ScriptManager控件)相关的知识,希望对你有一定的参考价值。

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数据交互,并局部刷新页面