asp.net更新面板内的Telerik RadListView不刷新

时间:2013-08-09 18:04:32

标签: c# asp.net telerik updatepanel radlistview

在过去的几天里,我一直在撞墙,试图让这个场景发挥作用。

我在页面上有一个<asp:UpdatePanel>,它有一个外部触发器并包含一个Telerik RadListView

<asp:UpdatePanel runat="server" ID="RationUpdatePanel" UpdateMode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
    <telerik:RadListView ID="RationListView runat="server"
        DataSourceId="RationDataSource" 
        OnItemCanceling="ItemCancelingHandler"
        OnItemEditing="ItemEditingHandler"
        OnItemUpdating="ItemUpdateHandler">
        <LayoutTemplate>
            <table>
               <thead>
                   <tr>...</tr>
               </thead>
               <tbody>
                   <tr id="itemPlaceHolder" runat="server"/>
               </tbody>
            </table>
        </LayoutTemplate>
        <ItemTemplate>
            <tr>
               <td>
                   <asp:LinkButton ID="EditButton" runat="server" CausesValidation="False" CommandName="Edit" Text="Edit" ToolTip="Edit" />&nbsp;
                   <asp:LinkButton ID="DeleteButton" runat="server" CausesValidation="False" CommandName="Delete" Text="Delete" ToolTip="Delete" />
               </td>
               <td>...</td>
             </tr>
        </ItemTemplate>
        <EditItemTemplate>
            <tr>
               <td>
                   <asp:LinkButton ID="SaveButton" runat="server" CausesValidation="False" CommandName="Save" Text="Save" ToolTip="Save" />&nbsp;
                   <asp:LinkButton ID="CancelButton" runat="server" CausesValidation="False" CommandName="Cancel" Text="Cancel" ToolTip="Update" />
               </td>
               <td>...</td>
             </tr>
        </EditItemTemplate>
    </telerik:RadListView>
</ContentTemplate>
<Triggers>
    <asp:AsyncPostBackTrigger ControlID="UseRationButton" EventName="Click" />
</Triggers>
</UpdatePanel>

背后的代码如下:

    protected void RationListView_ItemEditing(object sender, RadListViewCommandEventArgs e)
    {
        ((RadListViewDataItem)e.ListViewItem).Edit = true;
    }

    protected void RationListView_ItemCanceling(object sender, RadListViewCommandEventArgs e)
    {
        RationListView.ClearEditItems();
        ((RadListViewDataItem)e.ListViewItem).Edit = false;
    }

单击EditButtonCancelButton生成预期事件,并调用ObjectDataSource例程来重新绑定列表,但更新面板不会刷新。从事件处理程序调用{​​{1}}不会改变这种情况。代码在更新面板之外正常工作:模式更改,并显示其他模板中的按钮。

在任一情况下,单击外部触发器都会显示列表。

更新:我在浏览器中为PageManager类添加了几个javascript回调,用于beginRequest和endRequest。这些只是在事件发生时显示警报。

该页面包含几个基本上如下所示的元素(详细信息省略):

RationUpdatePanel.Update()

第一个div中的<div> <div> <asp:DropDownList ID="RationDdl"/> <asp:Button ID="UseRationButton"/> </div> <div> <asp:DropDownList ID="AnimalGroupDdl"/> <asp:UpdatePanel ID="AnimalWeightUpdatePanel"/> <ContentTemplate> <asp:DropDownList ID="AnimalWeightDdl"/> </ContentTemplate> </asp:UpdatePanel> </div> </div> <div> <telerik:RadListBox> </telerik:RadListBox> </div> <div> <asp:UpdatePanel ID="FeedPreviewUpdatePanel"> <ContentTemplate> <asp:Repeater> </asp:Repeater> </ContentPanel> </asp:UpdatePanel> </div> <div> <!-- this contains the update panel shown above --> </div> UseFeedRationButton的外部触发器。 RationUpdatePanelAnimalGroupDdl的外部触发器。 AnimalWeightUpdatePanel上SelectedIndexChanged事件的处理程序使用可用的权重类填充AnimalGroupDdl 选定的组。它与AnimalWeightDdlRationUpdatePanel没有互动。

以下是FeedPreviewUpdatePanel的标记:

UseRationButton

这是背后的代码:

            <asp:Button ID="UseRationButton" runat="server" 
                Text="Use This Ration" 
                OnClick="UseRationButton_Click" 
                CausesValidation="true" 
                ValidationGroup="UseRation" 
                UseSubmitBehavior="false">
            </asp:Button>&nbsp;

我一直在测试两种情况:

1)从 protected void UseRationButton_Click(object sender, EventArgs e) { string text = this.RationDdl.SelectedItem.Text; this.RationNameLabel.Text = text; this.RationDataSource.SelectParameters["RationId"].DefaultValue = this.RationDdl.SelectedValue; } 中选择一个口粮,然后点击RationDdl 2)选择一个动物组,然后执行方案1.

在方案1中,客户端asp.net代码启动异步回发,服务器端处理按钮事件。将填充RationListView,但永远不会执行客户端endRequest代码(不显示警报)。对RadListView中的控件的后续单击会触发异步回发,但不会更改列表的状态,也不会执行客户端endRequest代码。

在方案2中,启动了异步回发,在服务器端处理事件并填充UseRationButton。在这种情况下执行客户端endRequest代码(显示警报IS)。在此选择配额并单击使用配给按钮启动回发之后,将填充列表视图并执行endRequest代码。在点击列表视图中的按钮时,将启动异步回发,更改列表状态并执行endRequest代码。

我的工作理论是,某些东西导致客户端上的页面请求管理器类的状态变得不稳定,但我无法弄清楚可能导致它的原因。

2 个答案:

答案 0 :(得分:0)

首先,如果您使用telerik rad控件,我建议您将asp:button更改为telerik:RadButton
这是示例

  <telerik:RadButton ID="v" runat="server" Text="Use This Ration"
         AutoPostBack="true" 
  ValidationGroup="UseRation" OnClick="UseRationButton_Click">
  </telerik:RadButton>


  protected void UseRationButton_Click(object sender, EventArgs e)
    {
     string text = this.RationDdl.SelectedItem.Text;
    this.RationNameLabel.Text = text;
    this.RationDataSource.SelectParameters["RationId"].DefaultValue = this.RationDdl.SelectedValue;
    }

请注意,您应该将AutoPostBack="true"添加到您的radButton中 此链接MSDN Reference1MSDN Reference2将显示使用更新面板的详细信息。

答案 1 :(得分:0)

我周五和周六早上做的研究提供了这个问题的答案。

我有一些代码附加到Sys.WebForms.PageRequestManager endRequest事件,该事件更新了一个文本框,其中包含新配给的临时标题。代码看起来像这样:

    ///
    /// reregister the change handlers after reloading the animal weight ddl and create a 
    /// temporary name for the ration based on animal choice and weight.
    ///
    function animalWeightDdlOnLoad() {
        var ddl = document.getElementById("<%= AnimalWeightDdl.ClientID %>");

        //
        // add event handler in a browser agnostic fashion
        //
        if (ddl.addEventListener) {
            ddl.addEventListener("change", animalWeightDdlOnChange);
        }
        else if (ddl.attachEvent) {
            ddl.attachEvent("onchange", animalWeightDdlOnChange);
        }
        else {
            ddl.onchange = animalWeightDdlOnChange;
        }

        animalWeightDdlOnChange();
    }

animalWeightDdlOnChange()引用了动物体重ddl的选项列表:

    ///
    /// create a temporary name for the ration
    ///
    function animalWeightDdlOnChange() {
        var ddl1 = document.getElementById("<%= AnimalGroupDdl.ClientID %>");
        var ddl2 = document.getElementById("<%= AnimalWeightDdl.ClientID %>");
        var text = document.getElementById("<%= RationNameText.ClientID %>");
        text.value = ddl1.options[ddl1.selectedIndex].text + ' ' + ddl2.options[ddl2.selectedIndex].text + ' - Copy';
    }

但是,如果列表尚未填充,则对选项的引用会导致停止endRequest处理的错误。我没有在每个异步请求上运行此代码,而是将其更改为动物组ddl上的change事件的处理程序,如下所示:

    function animalGroupDdlOnSelectedChanged() {
        //
        // add a handler for the endRequest event which will be triggered by
        // fetching the contents of the weight ddl.
        //
                         Sys.WebForms.PageRequestManager.getInstance().add_endRequest(animalWeightDdlOnLoad);
    }

然后在animalWeightDdlOnLoad()中,我添加了一行来删除请求后的处理程序 跑。这确保了权重ddl的更改处理程序仅在填充列表后才会运行。问题解决了。但为了以防万一,我在动物重量ddl选项列表的长度上添加了一个检查。

因此,即使看似无辜的javascript也会在浏览器中搞乱您的异步请求处理。