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

时间:2022-06-12 16:18:24

I'm having a bit of a difficult time trying to figure out exactly how to make a correct Ajax call work with the Telerik DockZone, ListView and DataPager. I'm hoping someone can help out a bit.

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

I am dynamically adding RadDock in code behind to the Zones.

我在代码后面动态地将RadDock添加到Zones中。

Here is code for main page (which I have to restructure soon b/c of lots and lots of layout issues with IE and Firefox, but, that's out of context of what I'm asking here!)

这是主页面的代码(我不得不重新调整很多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>

From here, in the code behind I will add RadDock, example like this:

从这里开始,我将在后面的代码中添加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);

Finally, in the "ctlNewsRoom" I have a ListView using a DataPager. What I would like to do is, on the change of pages is that only the one Dock be updated. Right now what is happening is that all Docks on the main page are being updated. I'm thinking (or hoping) that I just don't have everything hooked up together.

最后,在“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>

Below is simple code that loads the data.

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

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

            }

        }
    }

1 个解决方案

#1


1  

Your current implementation is too complex and I don't think you need to use the RadAjaxManager control. What you are describing - being able to update a single dock without affecting the rest of the page - can happen by simply wrapping the dock content (the user control) in a RadAjaxPanel. For example:

您当前的实现过于复杂,我认为您不需要使用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>

This way you can be sure that interacting with the content of one dock will not affect the others.

这样,您可以确保与一个扩展坞的内容进行交互不会影响其他扩展坞。

#1


1  

Your current implementation is too complex and I don't think you need to use the RadAjaxManager control. What you are describing - being able to update a single dock without affecting the rest of the page - can happen by simply wrapping the dock content (the user control) in a RadAjaxPanel. For example:

您当前的实现过于复杂,我认为您不需要使用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>

This way you can be sure that interacting with the content of one dock will not affect the others.

这样,您可以确保与一个扩展坞的内容进行交互不会影响其他扩展坞。