将 updatePanel 转换为 TELERIK答案

【问题标题】：converting an updatePanel to TELERIK将 updatePanel 转换为 TELERIK
【发布时间】：2015-05-16 02:26:13
【问题描述】：

使用 ASP.Net 网络表单，我有一个包含 2 个选项卡的弹出窗口，它们显示有关功能的信息，“特征属性”和“图像”。每次单击新功能时，弹出窗口都会更新新功能详细信息。

我正在调用更新 updatePanel8 的服务器。不幸的是，我正在尝试将我的网站转换为 Telerik，但我很难实现这一点。我已经阅读了许多关于 Telerik 表单的 Q，有些人建议尝试 RadAjaxPanel，其他人建议尝试 RadAjaxManager，但无论哪种方式，我似乎都无法让它工作，因为当我使用 Telerik 时，我无法在面板内使用更新面板。

**MY CODE:**
      <asp:Panel ID="ViewFeatureProperties" runat="server" BackColor="Snow" Width="300"
               HorizontalAlign="Center"> 
               <asp:UpdatePanel runat="server" ID="UpdatePanel8" UpdateMode="Conditional" ChildrenAsTriggers="true"
                   Style="position: relative; overflow: hidden; background-color: White;               
                  width: 300px; height: 300px; margin: 5px; text-align: center; outline-style: none; overflow-y: hidden; overflow-x:hidden;">

                   <ContentTemplate>
                           <div id="DivHolding2Tabs" class="overflowcontent webkit-scrollbar webkit-scrollbar-track webkit-scrollbar-thumb" style="width:100%;border-color:Black;border-width:1px;border-style:solid;">
                               <ul id="tabList" style="width:100%"> 
                                   <li><a href="#tabs-1">Info</a> </li>
                                   <li><a href="#tabs-2" style="display:none;">Images</a> </li>
                               </ul>

                               <div id="tabs-1" class="WorkFlowLayout">
                                       <b><font color="FF6600">Feature Properties </font></b>
                                        <div id="divFeatureInfo" runat="server">
                                        </div>
                               </div>

                               <div id="tabs-2" class="WorkFlowLayout">
                                        <b><font color="FF6600">Images</font></b>
                                        <div id="ImagesRelatingToFeatureDIV" runat="server">  
                                       </div>
                               </div>
                           </div>
                           <br />
                           <br />
                           <div class="buttonwrap">
                               <span id="Span5" class="ActionBtns">
                                   <asp:Button ID="ViewFeatureWorkflowImagePostBackBtn" runat="server" Style="display: none;
                                       visibility: hidden;" OnClick="ViewFeatureWorkflowImagePostBackBtn_Click" />
                               </span>
                           </div>

                   </ContentTemplate>
                   <Triggers>
                       <asp:AsyncPostBackTrigger ControlID="ViewFeatureWorkflowImagePostBackBtn" EventName="Click" />
                   </Triggers>
               </asp:UpdatePanel>
           </asp:Panel>

**CODE BEHIND**
protected void ViewFeatureWorkflowImagePostBackBtn_Click(object sender, EventArgs e)
{
ReloadUploadedImagesForFeatureWorkflow();
}


private void ReloadUploadedImagesForFeatureWorkflow()
{
//generate the new details for the popup
UpdatePanel8.Update();
script.Append("OpenPropertiesPopUp();");

ScriptManager.RegisterClientScriptBlock(UpdatePanel8,                                                        UpdatePanel8.GetType(),                                             "OpenPropertiesPopupCall()",
script.ToString(),
true);
}

我尝试过的一些例子是：

   <telerik:radajaxmanager id="ajaxManager1"  runat="server" UpdatePanelsRenderMode="Inline"><%-- defaultloadingpanelid="RadAjaxLoadingPanel1" runat="server">--%>
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="ajaxManager1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="Panel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:radajaxmanager>

         <asp:Panel ID="Panel1" runat="server">
                        <div id="Div1" class="overflowcontent webkit-scrollbar webkit-scrollbar-track webkit-scrollbar-thumb"
                             style="width: 100%; border-color: Black; border-width: 1px; border-style: solid;">

                         <asp:Button ID="ViewFeatureWorkflowImagePostBackBtn" runat="server" Text="Update the first Panel" OnClick="ViewFeatureWorkflowImagePostBackBtn_Click" />
                         <asp:Label ID="Label4" runat="server" Text="Label4"></asp:Label>


                             <ul id="Ul1" style="width: 100%">
                                 <li><a href="#tabs-1">Info</a> </li>
                                 <li><a href="#tabs-2" style="display: none;">Images</a> </li>
                             </ul>
                             <div id="tabs-1" class="WorkFlowLayout">
                                 <b><font color="FF6600">Feature Properties </font></b>
                                 <div id="divFeatureInfo" runat="server">
                                 </div>
                             </div>
                             <div id="tabs-2" class="WorkFlowLayout">
                                 <b><font color="FF6600">Images</font></b>
                                 <div id="ImagesRelatingToFeatureDIV" runat="server">
                                 </div>
                             </div>
                         </div>
                         <br />
                         <br />
                         <div class="buttonwrap">
                             <span id="Span6" class="ActionBtns">
                                 <asp:Button ID="Button2" runat="server" Style="display: none; visibility: hidden;"
                                     OnClick="ViewFeatureWorkflowImagePostBackBtn_Click" />
                             </span>
                         </div>

         </asp:Panel>
         <br />

            <telerik:radajaxloadingpanel id="RadAjaxLoadingPanel2" runat="server" skin="Default"></telerik:radajaxloadingpanel>

后面的代码 UpdatePanel8.AjaxRequest;

        // UpdatePanel8.ResponseScripts.Add(String.Format("$find('{0}').ajaxRequest();", UpdatePanel8.ClientID));

【问题讨论】：

标签： c# asp.net ajax telerik

【解决方案1】：

如果您需要调用 Update() 服务器方法，我认为您无法迁移到 RadAjax。那里没有服务器 Update() 方法，因为更新面板是动态创建的。

但是，如果您想在单击 ViewFeatureWorkflowImagePostBackBtn 时更新 Panel1，则需要这样的 AJAX 设置：

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Black"></telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="ViewFeatureWorkflowImagePostBackBtn">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="Panel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="Panel1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="Panel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

我假设 ViewFeatureWorkflowImagePostBackBtn 按钮仍在代码中的某个位置。如果将其替换为 ID 为 Button2 的按钮，则 AjaxControlID 设置应使用 Button2。

【讨论】：