DevExpress Asp.net(4) ASPxCallbackPanel的基本使用

  

c

 

下面这个例子就是通过一个ListBox，从客户端回调AspxCallbackPanel，从而更新AspxCallbackPanel内的MultiView控件显示信息。

 

首选，先在页面中放置一个AspxCallbackPanel控件，并设置ClientInstanceName属性为“CallbackPanel”。

代码如下：

dxcp:ASPxCallbackPanel ID="ASPxCallbackPanel" runat="server" ClientInstanceName="CallbackPanel" OnCallback="ASPxCallbackPanel_Callback" Width="100%"> </dxcp:ASPxCallbackPanel>

接下来再放置一个MultiView控件，设置多个View，让他显示不同的内容,注意，MultiView是放置在ASPCallbackPane的<PanelCollection>中，如代码所示：

<dxcp:ASPxCallbackPanel ID="ASPxCallbackPanel" runat="server" ClientInstanceName="CallbackPanel" OnCallback="ASPxCallbackPanel_Callback" Width="100%"> <PanelCollection> <dxp:PanelContent ID="PanelContent2" runat="server"> <asp:MultiView ID="MultiView" runat="server"> <asp:View ID="View1" runat="server"> <table> <tr> <td valign="top"> <dxe:ASPxLabel ID="ASPxLabel1" runat="server" Text="♣我是谁？不要告诉我是上班族，现在的上班族太民工；不要告诉我是民工，现在民工太缺钱；不要告诉我是富翁，富翁大都是暴发户；不要告诉我是暴发户，暴发户都想当明星；不要告诉我是明星，现在明星就像上班族。" Font-Bold="True"> </dxe:ASPxLabel> </td> </tr> </table> </asp:View> <asp:View ID="View2" runat="server"> <table> <tr> <td valign="top"> <dxe:ASPxLabel ID="ASPxLabel3" runat="server" Text="♣许多人不知道自己失去过什么，而时间总是耐心地给出答案。看着过去失去的东西，会有一种心痛的感觉！算是一种悔悟吧！" Font-Bold="True"> </dxe:ASPxLabel> </td> </tr> </table> </asp:View> <asp:View ID="View3" runat="server"> <table> <tr> <td valign="top"> <dxe:ASPxLabel ID="ASPxLabel5" runat="server" Text="♣一个人吻你，你一定被人深爱；不少人吻你，你一定是个漂亮的小孩；非常多的人吻你，你会被口水淹死" Font-Bold="True"> </dxe:ASPxLabel> </td> </tr> </table> </asp:View> </asp:MultiView> </dxp:PanelContent> </PanelCollection> </dxcp:ASPxCallbackPanel>

然后，在页面中添另一个ListBox，用来控制显示NulitView中的哪一个View,如下：

<dxe:ASPxListBox ID="ASPxListBox1" runat="server" ClientInstanceName="ListBox" Height="83px"> <Items> <dxe:ListEditItem Text="雷语1" Value="0" /> <dxe:ListEditItem Text="雷语2" Value="1" /> <dxe:ListEditItem Text="雷语3" Value="2" /> </Items> <ClientSideEvents SelectedIndexChanged="function(s, e) { var item = ListBox.GetSelectedItem(); CallbackPanel.PerformCallback(item.value); <!--此行就是调用AspxCallbackPanel的回调方法 --> }" Init="function(s, e) { ListBox.SetSelectedIndex(0); CallbackPanel.PerformCallback(0); }" /> </dxe:ASPxListBox>

最后就是服务器端的处理程序，如下：

protected void ASPxCallbackPanel_Callback(object source, CallbackEventArgsBase e) { MultiView.ActiveViewIndex = Convert.ToInt32(e.Parameter); }

总结：
1 向页面添加ASPxCallbackPanel组件，并设置ClientInstanceName属性(客户端标识,如 ClientInstanceName="CallbackPanel")。
2 注册ASPxCallbackPanel组件的服务器端事件ASPxCallback_Callback。
3 在客户端用户CallBack组件的客户端方法PerformCallback方法，以调用服务器端的ASPxCallbackPanel_Callback事件。
          代码：CallbackPanel.PerformCallback(id)

 

 

结论： 

通过ASPxCallbackpanel与上一节的AspxCallBack的使用，我们发现DevExpress Aspx控件的回调方法都是一致的。
     即添加ClientInstanceName
     注册服务器端的Callback事件
     调用ClientInstanceName.PerformCallback方法以执行服务器端的Callback中的代码
     最后调用CallbackComplete事件，进行必要的处理(可选)

个人观点：
ASPxCallbackPanel和AspxCallBack虽然提供了很多的机制来完成AJAx的操作，但从控件易用性上来讲，ASPxCallbackPanel并不如UpdataPanel如用。所有建议进行局部更新操作时，使用UpdataPanel进行更新。但通过ASPxCallbackPanel和CallBack组件的回调学习，使我们知道了ASPx系列操作的回调机制与流程，
对于学习和使用其他控件来说还是有很大的帮助的。