AjaxManager(简要概括)

最新推荐文章于 2022-08-17 17:24:02 发布

复制粘贴机QAQ

最新推荐文章于 2022-08-17 17:24:02 发布

阅读量121

点赞数

分类专栏： AjaxManager 文章标签： javascript ajax asp.net

原文链接：https://docs.telerik.com/devtools/aspnet-ajax/controls/ajaxmanager/getting-started

版权

AjaxManager 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.入门

完成使用 AjaxManager 和 AjaxLoadingPanel 为应用程序启用 AJAX 所需的步骤。

首先，创建 ASP.NET AJAX 应用程序并向其添加 AjaxManager 控件。使用 AjaxManager 启用 AJAX 的 Web 项目将是一个完全无代码的过程。
然后，您将通过定义 AjaxLoadingPanel 控件来增强用户体验。您的 Web 应用程序将使用其中一个图像模板，并在执行回调请求时（即加载页面时）将其显示为进度指示器。
最后，您将为控件添加一些样式。

//.net    
<%-- 在 Web 窗体上添加 ScriptManager 控件 --%>
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
            <%-- 将 AjaxManager 添加到页面 --%>
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
                <%-- 按钮事件局部更新，限定更新区域，点击按钮1只更新部分 --%>
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="RadButton1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="Panel1"/>
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
            <%-- 一个加载样式，将AjaxLoadingPanel添加到Page并将AjaxManager与其关联 --%>
            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">
            </telerik:RadAjaxLoadingPanel>

            <%-- 添加要更新的控件，两个按钮,两个面板内有两个标签 --%>
            <%-- 第一个按钮及其要更更新的控件 --%>
            <telerik:RadButton ID="RadButton1" runat="server" Text="RadButton" OnClick="RadButton1_Click">
            </telerik:RadButton>
            <asp:Panel ID="Panel1" runat="server" Height="200px" Width="400px">
                <telerik:RadLabel ID="RadLabel1" runat="server">
                    这是第一个Lable
                </telerik:RadLabel>
            </asp:Panel>
            <%-- 第二个按钮及其要更更新的控件 --%>
            <telerik:RadButton ID="RadButton2" runat="server" Text="RadButton" OnClick="RadButton2_Click">
            </telerik:RadButton>
            <asp:Panel ID="Panel2" runat="server">
                <telerik:RadLabel ID="RadLabel2" runat="server">
                    这是第二个Lable
                </telerik:RadLabel>
            </asp:Panel>

//c#
protected void RadButton1_Click(object sender, EventArgs e)
        {
            /*System.Threading.Thread.Sleep(2000);*///加上2秒的延迟
            RadLabel1.Text = "我被更新啦1111111";
            //此语句不会显示，因为是局部更新
            RadLabel2.Text = "我没有被更新，呜呜呜1111111";
        }

        protected void RadButton2_Click(object sender, EventArgs e)
        {
            RadLabel1.Text = "都被更新啦222";
            RadLabel2.Text = "都被更新啦222";
        }

2.设计时间

AjaxManager智能标记提供了一个配置 Ajax 管理器链接和一个选择 DefaultLoadingPanelID下拉列表。配置 Ajax 管理器：显示AjaxManager属性构建器。

一般特征

（仅在 IE 中可用）启用 AJAX — 选中此项时，对由AjaxManager管理的控件的所有请求均使用 AJAX 处理。如果未选中，则以传统回发方式处理请求。
启用 AJAX 历史记录— 选中后，即使使用 AJAX 也会启用浏览器历史记录。浏览器的前进和后退按钮在标准回发网站中按预期工作。
启用 Page<head>元素更新 —如果选中此选项，则<Head>可以在 AJAX 更新期间修改 Page 元素。
选择 DefaultLoadingPanelIDLoadingPanel— 从下拉列表中选择要在 AJAX 更新期间显示的实例。

AJAX 资源

添加 RadAjaxManager... — 将 AjaxManager 组件添加到表单。
Replace ScriptManager with RadScriptManager — 将 Microsoft Script Extensions ScriptManager 替换为 Telerik ScriptManager。Telerik ScriptManager 提供了处理 Web 资源和组合脚本以获得更好性能的增强功能。
添加 RadStyleSheetManager — 将 StyleSheetManager 添加到网页。Telerik StyleSheetManager 提供了处理 Web 资源和组合样式表以获得更好性能的增强功能。

3.多页项目

Ajaxifying Telerik 机制允许您在页面上仅使用单个 AjaxManager。

要解决此功能并处理复杂方案，例如，在使用WebUserControls或Master/Content Pages时，请将RadAjaxManager实例放置在主页或主页上，然后将RadAjaxManagerProxy控件添加到用户控件或内容页面。

RadAjaxManagerProxy复制完全相同的AjaxManager设计器配置，以便您可以完全通过设计器在 WebUserControl 或 ContentPage 中设置所有必要的 AJAX 设置。
设置RadAjaxManager实例并触发 AJAX 请求：

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function myUserControlClickHandler() {
            find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>").ajaxRequest("content");
        }
    </script>
 </telerik:RadCodeBlock>

如果您需要处理用户控件或内容页面中的主管理器事件，将事件处理程序附加到RadAjaxManager以下示例中所示：

//放置web3中
protected void Page_Load(object sender, EventArgs e)
{
    RadAjaxManager manager = RadAjaxManager.GetCurrent(Page);
    manager.ClientEvents.OnRequestStart = "onRequestStart";
    manager.ClientEvents.OnResponseEnd = "onResponseEnd";
    manager.AjaxRequest += new RadAjaxControl.AjaxRequestDelegate(manager_AjaxRequest);
}

protected void manager_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
{
    //handle the manager AjaxRequest event here
}

4.性能优化

拥有大量AJAX的控件进行更新，仅需更新页面的较小部分来解决性能问题，性能的优化处理通常在DOM更新触发一组布局时重新计算，会导致整个页面被刷新，可以通过更新table或外部div元素来优化流程，更新Header控件将更新两个标签，且只会触发一次DOM更新。table-layout可以适应表格宽度而不超过表格。

//一个div，一个table，两个Label 
<div id="Header" style="width: 100%;" runat="server">
     <table id="Table3" cellspacing="0" cellpadding="0" border="0" width="100%">
         <tr>
             <td>
                 <asp:Label ID="lblStatus" runat="server" />
             </td>
             <td>
                 &nbsp;
             </td>
             <td style="height: 25px">
                 <asp:Label ID="lblMessage" runat="server" />
             </td>
         </tr>
     </table>
 </div>

//固定表格布局
<style type="text/css">
    #Header table
    {
        table-layout: fixed;
    }
</style>

5.同时使用服务器和客户端脚本

要允许服务器和客户端脚本在 AjaxManager 启用的 AJAX 更新期间协同工作，使用RadCodeBlock和RadScriptBlock。

当服务器代码块放置在标记中时，使用RadCodeBlock. 当拥有在 AJAX 请求后评估的 JavaScript 时，请使用RadScriptBlock。

//RadCodeBlock
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function AjaxReq(args) {
            $find("<%= RadAjaxPanel1.ClientID %>").ajaxRequestWithTarget("<%= Button1.UniqueID %>", '');
        }
    </script>
</telerik:RadCodeBlock>

//RadScriptBlock
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
    <asp:Panel ID="Panel1" runat="server">
    <asp:Button ID="Button1" runat="server" />
    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script type="text/javascript">
            alert(1);            
        </script>
    </telerik:RadScriptBlock>
    </asp:Panel>
</telerik:RadAjaxPanel>

6.渲染模式

将UpdatePanelsRenderMode值设置为Inline。

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" UpdatePanelsRenderMode="Inline"></telerik:RadAjaxManager>

<UpdatedControls>
          <telerik:AjaxUpdatedControl ControlID="Label1" UpdatePanelRenderMode="Inline" />
</UpdatedControls>

RenderMode— 您可以通过将 AjaxManager 控件的RenderMode属性设置为Inlineor Block（默认值）来更改包装在 AjaxManager 控件中的控件的呈现模式。

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" RenderMode="Inline">
    <asp:Button ID="Button1" runat="server" Text="AJAX" />
    <asp:Label ID="Label1" runat="server" Text="Label1" />
</telerik:RadAjaxPanel>

当前不支持以下场景，包括 AjaxManager 和AjaxUpdatedControl。

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" UpdatePanelsRenderMode="Inline">
<AjaxSettings>
    <telerik:AjaxSetting AjaxControlID="Button1">
        <UpdatedControls>
            <telerik:AjaxUpdatedControl ControlID="Label1" UpdatePanelRenderMode="Block" />
            <telerik:AjaxUpdatedControl ControlID="Label2" />
        </UpdatedControls>
    </telerik:AjaxSetting>
 </AjaxSettings>
</telerik:RadAjaxManager>