我如何獲得Ajax以使用Telerik DockZone，ListView和DataPager

我有點困難時間試圖弄清楚如何使用Telerik DockZone，ListView和DataPager進行正確的Ajax調用。我希望有人能幫助一下。我如何獲得Ajax以使用Telerik DockZone，ListView和DataPager

我在後面的代碼中動態地添加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被更新。目前正在發生的事情是主頁上的所有碼頭正在更新。我在想（或者希望）我沒有把所有東西都聯繫在一起。

<%@ 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(); 

      } 

     } 
    }

來源

2010-01-26 sugarcrum

您當前的實現過於複雜，我不認爲您需要使用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>

通過這種方式，您可以確保與一個碼頭的內容進行交互不會影響其他碼頭。

來源

2010-01-26 14:45:20 lingvomir

與往常一樣，花太多時間查看代碼，使其變得複雜，它總是最簡單的解決方案。這很有效！非常感謝您的快速回復！ – sugarcrum 2010-01-26 14:56:44

我如何獲得Ajax以使用Telerik DockZone，ListView和DataPager

回答

相關問題