0

Telerik DockZone、ListView、DataPagerで正しいAjax呼び出しを機能させる方法を正確に理解しようとすると、少し苦労します。誰かが少し助けてくれることを願っています。

コードビハインドでRadDockをゾーンに動的に追加しています。

これがメインページのコードです(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があります。私がやりたいのは、ページの変更時に、1つの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();

            }

        }
    }
4

1 に答える 1

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>

このようにして、1つのドックのコンテンツを操作しても、他のドックに影響を与えないようにすることができます。

于 2010-01-26T14:45:20.513 に答える