Question

我有点困难，试图弄清楚如何使用Telerik DockZone，ListView和DataPager进行正确的Ajax调用。我希望有人可以提供一些帮助。

我在代码后面动态地将RadDock添加到区域。

这是主页面的代码（我不得不很快调整很多b / c和很多IE和Firefox的布局问题，但是，这与我在这里要求的内容不相符！）

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ClientView.aspx.cs" Inherits="News.UI.Form_ClientView" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<html>
<head>
    <title></title>
    <link href="Styles/ClientView.css" rel="stylesheet" type="text/css" />      
    <script src="Scripts/ClientView.js" type="text/javascript" ></script> 
</head>
<body>
<form id="Form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <div id="clientviewcontent">
    <telerik:RadDockLayout runat="server" ID="RadDockLayout1" EnableEmbeddedSkins="true" Skin="Office2007" Visible="true">
    <div id="clientviewlayout">
        <table class="tbldoclayout">
        <tr>
            <td class="totop" colspan="3"><telerik:RadDockZone Width="100%" MinHeight="0" BorderStyle="None" runat="server" ID="RadDockZoneTop" Orientation="Vertical" Visible="true"></telerik:RadDockZone></td>
        </tr>
        <tr>
            <td class="tdleft"><telerik:RadDockZone Width="100%" Height="100%" MinHeight="0" BorderStyle="None" BorderWidth="0" runat="server" ID="RadDockZoneV1" Orientation="Vertical"></telerik:RadDockZone></td>
            <td class="tdmid"><telerik:RadDockZone Width="100%" Height="100%" MinHeight="0" BorderStyle="None" BorderWidth="0" runat="server" ID="RadDockZoneV2" Orientation="Vertical"></telerik:RadDockZone></td>
            <td class="tdright"><telerik:RadDockZone Width="100%" Height="100%" MinHeight="0" BorderStyle="None" BorderWidth="0" runat="server" ID="RadDockZoneV3" Orientation="Vertical"></telerik:RadDockZone></td>
        </tr>        
        </table>
    </div>
    </telerik:RadDockLayout>
    </div>
</form>
</body>
</html>

从这里开始，我将添加RadDock，例如：

RadDock dockNews = new RadDock();
dockNews.DockMode = DockMode.Docked;
dockNews.ID = "dockNews";
dockNews.Tag = "dockNews";
dockNews.Title = "News";
dockNews.Skin = "Office2007";
dockNews.Width = Unit.Pixel(200);
dockNews.Style.Add("margin-bottom", "5px");
dockNews.DockHandle = DockHandle.TitleBar;
dockNews.DefaultCommands = Telerik.Web.UI.Dock.DefaultCommands.All;
Control ctrlNewsRoom = LoadControl("~/ClientView/ctlNewsRoom.ascx");
RadDockLayout1.Controls.Add(dockNews);
RadDockZoneV1.Controls.Add(dockNews);
dockNews.ContentContainer.Controls.Add(ctrlNewsRoom);

最后，在“ctlNewsRoom”中，我有一个使用DataPager的ListView。我想要做的是，在更改页面时，只更新一个Dock。现在发生的事情是主页上的所有Docks都在更新。我在想（或希望）我没有把所有东西连在一起。

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ctlNewsRoom.ascx.cs" Inherits="News.UI.ctlNewsRoom_Control" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<telerik:RadAjaxManagerProxy ID="Proxy" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="dsNews" EventName="dsNews_Selecting">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="dsNews" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManagerProxy>

<asp:LinqDataSource ID="dsNews" runat="server" OnSelecting="dsNews_Selecting" />

       <asp:ListView ID="lvNews" runat="server" DataKeyNames="RecordID"   DataSourceID="dsNews">   
            <LayoutTemplate>   
            <div id="itemPlaceholderContainer" runat="server">
                <div id="itemplaceholder" runat="server"></div> 
                </div>
                <div style="clear: left; text-align:center; vertical-align: middle; float:none;">  
                <asp:DataPager ID="pageTopics" runat="server" PageSize="3" PagedControlID="lvNews">    
                    <Fields>   
                        <asp:NextPreviousPagerField ShowFirstPageButton="true" ButtonType="Image" ShowPreviousPageButton="false" ShowNextPageButton="false" FirstPageImageUrl="../Images/PagingFirst.gif" />   
                        <asp:NextPreviousPagerField ShowFirstPageButton="false" ButtonType="Image" ShowPreviousPageButton="true" ShowNextPageButton="false" PreviousPageImageUrl="../Images/PagingPrev.gif" />   
                        <asp:NumericPagerField ButtonCount="9" />   
                        <asp:NextPreviousPagerField ShowFirstPageButton="false" ButtonType="Image" ShowPreviousPageButton="false" ShowNextPageButton="true" ShowLastPageButton="false" NextPageImageUrl="../Images/PagingNext.gif" />   
                        <asp:NextPreviousPagerField ShowFirstPageButton="false" ButtonType="Image" ShowPreviousPageButton="false" ShowNextPageButton="false" ShowLastPageButton="true" LastPageImageUrl="../Images/PagingLast.gif" />   
                    </Fields>   
               </asp:DataPager>   
            </LayoutTemplate>   
            <ItemTemplate>   
                <div>
                    <ul id="newsul">
                        <li id="newstitle"><%# Eval("Name")%></li>
                        <li id="newspub">
                        <div style="width:100%;margin:0;padding:0;">
                            <div style="text-align:left;float:left;">Published: <%# Eval("PublishDate")%></div>
                            <div style="text-align:right;"><asp:HyperLink runat="server" ID="newNav" ImageUrl="../Images/world_go.png" NavigateUrl='<%# Eval("URL")%>' Target="_blank" /></div>
                         </div>                         
                        </li>
                        <li id="newsdesc"><%# Eval("Description").ToString()%></li>
                    </ul>
                </div>   
            </ItemTemplate>   
            <EmptyDataTemplate>No news found</EmptyDataTemplate>   
        </asp:ListView>

下面是加载数据的简单代码。

using News.UI;
    using News.DataModel;
    using System.Linq;
    using System.Xml.Linq;
    using System;
    using System.Data;
    using System.Configuration;
    using System.Collections;
    using System.Collections.Generic;
    using System.Web;
    using System.Web.Security;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;
    using System.Xml;
    using System.Xml.XPath;

namespace News.UI
    {
        public partial class ctlNewsRoom_Control : System.Web.UI.UserControl
        {

            private SettingManager m_SettingManager;
            private GBMDataContext m_Context;


            protected void dsNews_Selecting(object sender, LinqDataSourceSelectEventArgs args)
            {

                args.Result = LoadData();
            }

            private IList LoadData()
            {

                m_SettingManager = new SettingManager();
                m_Context = m_SettingManager.DataContext;

                var q = from tmp in m_Context.NewsRooms where
                                         (!(tmp.RecordExpiration.HasValue) || tmp.RecordExpiration.Value >= DateTime.UtcNow)
                                         orderby tmp.PublishDate descending
                        select new { tmp.RecordID, Name=tmp.Name.Substring(0,75), PublishDate = tmp.PublishDate.ToShortDateString(), Description=tmp.Description.Substring(0,175), URL=tmp.URL };


                return q.ToList();

            }

        }
    }

Answer 1

您当前的实现过于复杂，我认为您不需要使用RadAjaxManager控件。您所描述的内容 - 能够更新单个停靠而不影响页面的其余部分 - 只需将停靠内容（用户控件）包装在RadAjaxPanel中即可。例如：

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
    <asp:LinqDataSource ID="dsNews" runat="server" OnSelecting="dsNews_Selecting" />
    <asp:ListView ID="lvNews" runat="server" DataKeyNames="RecordID"   DataSourceID="dsNews">   
        ...
    </asp:ListView>
</telerik:RadAjaxPanel>

通过这种方式，您可以确保与一个基座的内容进行交互不会影响其他基座。

如何让Ajax与Telerik DockZone，ListView和DataPager一起使用

1 个答案: