DevExpress Asp.net

DevExpress Asp.net(3) ASPxCallback组件

时间:2009-07-30 17:14来源: 作者:深挖三尺 点击: 8次

ASPxCallback 控件为我们封装了大量的Ajax操作，使用起来非常的方便，如果页面中遇到需要局部刷的操作而又不想自动动手写ajax的话，使用它就是非常不错选择。ASPxCallback主要是通过注册客户端事件与服务器端的事件来相互通信完成任务。 如何使用ASPXCallbac

　　

ASPxCallback控件为我们封装了大量的Ajax操作，使用起来非常的方便，如果页面中遇到需要局部刷的操作而又不想自动动手写ajax的话，使用它就是非常不错选择。ASPxCallback主要是通过注册客户端事件与服务器端的事件来相互通信完成任务。

  如何使用ASPXCallback:

1. 向页面添加CallBack组件，并设置ClientInstanceName属性(客户端标识,如 ClientInstanceName="Callback1")。
2. 注册CallBack组件的服务器端事件ASPxCallback_Callback,这个方法就是客户端将要调用的服务器端的处理程序。
3. 注册CallBack组件的CallbackComplete事件，引事件是当回调完服务器事件之后自动调用的，可用来处理回调完之后的操作，并可通过参数e获取parameter和设置返回的result的值。
4. 在客户端用户CallBack组件的客户端方法PerformCallback方法，以调用服务器端的ASPxCallback_Callback事件。
             代码：Callback1.PerformCallback(id)
5. CallBack组件自动调用CallbackComplete事件，完成此次操作。

 

下面这个例子将说明如何通过客户端启用服务器端的方法来更新DIV中的数据。

HTML代码
三个DIV，每个DIV分别有一个<a/>标签，通过调用Javascript函数ShowDetails来更新DIV的内容，其中参数为Div ID的最后一个数字。ASPxCallback组件同时注册服务器的OnCallback事件，用来处理回调时处理，ClientSideEvents的 CallbackComplete方法当回调完成时将自动调用。
JS，通过Callback1.PerformCallback(id)调用服务器的OnCallback事件

    <script type="text/javascript"><!--
        function GetDetailsContainer(id) {
            return document.getElementById("Detail" + id.toString());
        }
        function ShowDetails(id) {

            GetDetailsContainer(id).innerHTML = "Loading&hellip;";
            Callback1.PerformCallback(id);  //回调方法，将调用服务器端注册的Callback方法。
        }
   
//--></script>

HTML：

    <div id="Detail1">
        <a href="javascript:ShowDetails('1');">Show Detail</a>
    </div>
    <div id="Detail2">
        <a href="javascript:ShowDetails('2');">Show Detail</a>
    </div>
    <div id="Detail3">
        <a href="javascript:ShowDetails('3');">Show Detail</a>
    </div>
     
    <dxcb:ASPxCallback ID="ASPxCallback1" runat="server" ClientInstanceName="Callback1"
        OnCallback="ASPxCallback1_Callback">
        <ClientSideEvents CallbackComplete="function(s, e) {
        var element = GetDetailsContainer(e.parameter);
        element.innerHTML = e.result;
    }" />
    </dxcb:ASPxCallback>
    
<!--
-------------------------------------------------
 CallbackComplete 方法原型：   
function ASPxClientCallbackCompleteEventHandler( 
   source : object,  
   e : ASPxClientCallbackCompleteEventArgs 
) : Void;
parameter：获取AspxCallBack进行回调的参数值。 
result：获取回调之后的结果值。

这个方法会在回调完成之后自动的调用。
------------------------------------------------
-->

C#，在OnCallback事件中接受客户端传递过来的参数，以进行判断是更新的哪一个DIV，并通过e.Result返回处理后的结果：

protected void ASPxCallback1_Callback(object source, CallbackEventArgs e)
    {
        switch (e.Parameter)
        {
            case "1":
                e.Result = "WCF分布式开发步步为赢(1)：WCF分布式框架基础概念";
                break;
            case "2":
                e.Result = "WCF分布式开发步步为赢(2)自定义托管宿主WCF解决方案开发配置过程详解";
                break;
            case "3":
                e.Result = "WCF分布式开发步步为赢(3)WCF服务元数据交换、配置及编程开发";
                break;
        }
    }

最后，Aspx系列控件的所有的客户端回调都是通过这种模块完成的，如设置Aspx的ClientInstanceName属性，添加注册Aspx服务器端的Callback方法，在客户端调用Aspx的PerformCallback()方法等。这种模式在以后的使用过程中会经常的见到。

 

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

时间:2009-08-02 13:11来源: 作者:深挖三尺 点击: 13次

DevExpress Asp.net(4) ASPxCallbackPanel的基本使用 AspxCallbackPanel主要作用是对CallbackPanel内的内容进行异步刷新，实现此种效果的方法有很多，如Microsoft AJAX控件中的UpdatePanel，比这种方式更为方便和好用. 下面这个例子就是通过一个 ListBox ，

　　

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

AspxCallbackPanel主要作用是对CallbackPanel内的内容进行异步刷新，实现此种效果的方法有很多，如Microsoft AJAX控件中的UpdatePanel，比这种方式更为方便和好用.
下面这个例子就是通过一个ListBox，从客户端回调AspxCallbackPanel，从而更新AspxCallbackPanel内的MultiView控件显示信息。
 

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

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

设置ASPxCallbackPanel的ClientInstanceName属性,并注册OnCallback服务器事件.上一节已经说明,DevExpress的Aspx系统控件的异步更新方式都是一样的,所以AspxCallbackPanel也同样,注册服务器端的OnCallback事件,并从客户端调用AspxCallbackPanel的 PerformCallback()方法.
接着看以下代码,在AspxCallbackPanel中放置一个MultiView.注意,MulitView中放置在AspxCallbackPanle的<PanelCollection>子元素下的.

<dxrp:PanelContent ID="PanelContent1" runat="server">
                <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>
            </dxrp:PanelContent>

接下来就是调用AspxCallbackPanel的PerformCallback()方法了,这里我们放置了一个ASPxListBox,并注册ASPxListbox的 ClientSideEvents事件中的 SelectedIndexChanged事件,如下:

<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>

当从客户调用CallbackPanel.PerformCallback(value)的方法时,它会调用在服务器端的OnCallback事件.

protected void ASPxCallbackPanel_Callback(object source, CallbackEventArgsBase e)
    {
        MultiView.ActiveViewIndex = Convert.ToInt32(e.Parameter); //激活显示的ViewID
    }

 

总结：
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如用。
但通过ASPxCallbackPanel和CallBack组件的回调学习，使我们知道了ASPx系列操作的回调机制与流程，对于学习和了解其他ASPx控件来说还是有很大的帮助的。

 

 

 

DevExpress Asp.net(7) ASPxTreeList的基本使用之一

时间:2009-08-02 13:55来源: 作者:深挖三尺 点击: 92次

DevExpress Asp.net(7) ASPxTreeList的基本使用之一 ASPxTreeList是结合了Tree控件与GridView控件,不仅可以显示树形结构视图,而且可以还编辑\删除\统计等制作,以下只是进行了一些基本的AspxTreeList操作的总结. 此事例主要说明了ASPxTreeList的一些基本使用

　　

DevExpress Asp.net(7) ASPxTreeList的基本使用之一

ASPxTreeList是结合了Tree控件与GridView控件,不仅可以显示树形结构视图,而且可以还编辑\删除\统计等制作,以下只是进行了一些基本的AspxTreeList操作的总结.
此事例主要说明了ASPxTreeList的一些基本使用
        1 数据绑定
        2 数据导出
        3 分页设置
        4 用户弹出面板设置
        5 样式设置
        6 ShowPreview
        8 数据模板
        9 选择事件
        10 数据统计
       
       
        绑定绑定
        ASPxTreeList其他数据绑定一样，可用各种类型的数据源。但因为要显示树形结构，
        所以除了DataSourceID必须进行设置以外，还得必须设置KeyFieldName与ParentFieldName，
        KeyFieldName与ParentFieldName就是主、子的关系，用于创建树形结构。
        同时可以指定在ASPxTreeList默认展开的级数，代码如下：       
        this.ASPxTreeList1.ExpandToLevel(2);   //展开2级
        
        数据导出
        关于ASPxTreeList数据导出，DevExpress同样为我们提供了解决方案，即ASPxTreeListExporter,
        数据导出组件。
        ASPxTreeListExproter的用法非常简单，但同时提供了3种文件格式的导出方案，xls|pdf|rft
        使用方法：
            1 向有ASPxTreeList数据的面页添加ASPxTreeListExporter，并设置Exporter的TreeListID属
              性，即导出哪一个ASPxTreeList.默认不指定的情况下会导出页面中第一个ASPxTreeList，但
              当有多个时并希望导出指定ASPxTreeList时，则必须指定。
            2 指定ASPxTreeListExporter的导出方法，格式文件格式和导出策略不同，ASPxTreeListExporter
              提供了以下方法：              
                void WritePdf(Stream stream); 
                void WritePdfToResponse();

                void WriteRtf(Stream stream);
                void WriteRtfToResponse();    
     
                void WriteXls(Stream stream);
                void WriteXlsToResponse();

               每个方法都有多个重载，可权限需要进行调用。另外需要说明的是，如果ASPxTreeList设置的分页
               功能，调用以下方法时可能出现只导出当前面的现象，所以调用以上方法进，可以设置导出的详细
               设置，如下：
                    ASPxTreeListExporter.Settings.ExpandAllNodes = true;
                    ASPxTreeListExporter.Settings.ExportAllPages = true;
                    ASPxTreeListExporter.Settings.ShowTreeButtons = true;
                   
           分面设置
           默认情况下，ASPxTreeList不进行分页处理，如果需要分面功能，可以设置其属性SettingsPager
           如下代码：
                <SettingsPager AlwaysShowPager="True" Mode="ShowPager">
                </SettingsPager>
             默认页大小为10，可以通过SettingPager的 PageSize属性设置，PageSize="20"
            
            
           用户弹出面板设置
           即让用户自定义ASPxTreeList显示的字段名称，如下设置
            <SettingsCustomizationWindow Enabled="True" />
            如果当某一字段在初始时设置Visible=false，那么此字段将会放在CustomizationWindow中，
            当然，用户也可以把它拖放出来，也可以拖放进去。以下代码就是控制如果显示与隐藏
            CustomizationWindow.   
                     treeList.ShowCustomizationWindow();    //ClientInstanceName="treeList"
                     treeList.HideCustomizationWindow();
                    
           样式设置
           样式设置最基本就是设置边框样式、页脚、tree线等。如下
           <Settings GridLines="Both"
             ShowFooter="True"
             ShowGroupFooter="True"
             ShowPreview="True" />
            
          ShowPreview
          可显示数据内容较多的View，不影响TreeList的展示。
            1 设置ASPxTreeList的PreviewFieldName="Location"
            2  <Settings ShowPreview="True" />
        
         数据模板 
         <Templates>
         <DataCell>
          <%# Eval("Common_Name") %>
            </DataCell>
        </Templates>
       
        选择事件
        可添加treelist的FocuseNodeChnaged事件来处理选择Node时的逻辑，但ASPxTreeList必须
        设置AllowFocusedNode=true，如下：
         <SettingsBehavior AllowFocusedNode="True" />
         通过FocuseNodeChnaged事件来回调整ASPxTreeList的服务端事件来完成通信，发下：
        
         <ClientSideEvents CustomDataCallback="function(s, e) {
         alert(e.result);
        }" FocusedNodeChanged="function(s, e) {
         var key = treeList.GetFocusedNodeKey();
   treeList.PerformCustomDataCallback(key);
        }" />
         
         以下代码设置为可多选，并且可以递归选择。
        <SettingsSelection Enabled="True" Recursive="True" />
       

 演示代码:

Js:

<script type="text/javascript">
        function CwShow() {
            treeList.ShowCustomizationWindow();
            btnCustWin.SetText("Hide Customization Window");
        }
        function CwHide() {
            treeList.HideCustomizationWindow();
            btnCustWin.SetText("Show Customization Window");
        }
        function CwToggle() {
            if (treeList.IsCustomizationWindowVisible())
                CwHide();
            else
                CwShow();
        }
    </script>

 

HTML:

 

   <%-- 导出代码--%>
    <dxe:ASPxButton ID="ASPxButton1" runat="server" OnClick="ASPxButton1_Click" Text="Export to XLS">
    </dxe:ASPxButton>
    <dxe:ASPxButton ID="ASPxButton2" runat="server" OnClick="ASPxButton2_Click" Text="Export to PDF">
    </dxe:ASPxButton>
    <dxwtl:ASPxTreeListExporter ID="ASPxTreeListExporter1" runat="server" TreeListID="ASPxTreeList2">
    </dxwtl:ASPxTreeListExporter>
    
    <%-- 显示控制面板--%>
    <dxe:ASPxButton ID="ASPxButton3" runat="server" AutoPostBack="false" Text="Show Customer Window">
        <ClientSideEvents Click="function(s, e) { CwToggle(); }" />
    </dxe:ASPxButton>    
    
    <%-- ASPxTreeList--%>
    <dxwtl:ASPxTreeList ID="ASPxTreeList1" runat="server" AutoGenerateColumns="False"
        ClientInstanceName="treeList" DataSourceID="AccessDataSource1" 
        Width="100%" KeyFieldName="ID"
        ParentFieldName="ParentID" PreviewFieldName="Location" 
        oncustomdatacallback="ASPxTreeList1_CustomDataCallback">
        <ClientSideEvents CustomDataCallback="function(s, e) {
    alert(e.result);
}" FocusedNodeChanged="function(s, e) {
    var key = treeList.GetFocusedNodeKey();
            treeList.PerformCustomDataCallback(key); 
}" />
        <Columns>
            <dxwtl:TreeListTextColumn FieldName="Department" VisibleIndex="1">
            </dxwtl:TreeListTextColumn>
            <dxwtl:TreeListTextColumn FieldName="Budget" VisibleIndex="2" AllowSort="True" SortIndex="0"
                SortOrder="Ascending">
            </dxwtl:TreeListTextColumn>
            <dxwtl:TreeListTextColumn FieldName="Location" VisibleIndex="3">
            </dxwtl:TreeListTextColumn>
            <dxwtl:TreeListTextColumn FieldName="Phone1" VisibleIndex="4">
            </dxwtl:TreeListTextColumn>
            <dxwtl:TreeListTextColumn FieldName="Phone2" VisibleIndex="5" Visible="false">
            </dxwtl:TreeListTextColumn>
        </Columns>
        <SettingsSelection Enabled="True" Recursive="True" />
        <Summary>
            <dxwtl:TreeListSummaryItem DisplayFormat="Count={0}" FieldName="Department" 
                ShowInColumn="Department" SummaryType="Count" />
            <dxwtl:TreeListSummaryItem DisplayFormat="Sum={0:C}" FieldName="Budget" 
                ShowInColumn="Budget" SummaryType="Sum" />
        </Summary>
        <SettingsPager AlwaysShowPager="True" Mode="ShowPager" PageSize="20">
        </SettingsPager>
        <Settings GridLines="Both" ShowFooter="True" ShowGroupFooter="True" ShowPreview="True" />
        <SettingsBehavior ExpandCollapseAction="NodeDblClick" AllowFocusedNode="True" />
        <SettingsCustomizationWindow Enabled="True" />
    </dxwtl:ASPxTreeList>

 

C#:

protected void Page_Load(object sender, EventArgs e)
    {      
        if (!IsPostBack)
        {
            DataBind();
            this.ASPxTreeList1.ExpandToLevel(2);
        }
    }

    // 导出xls
    protected void ASPxButton1_Click(object sender, EventArgs e)
    {
        ASPxTreeListExporter1.WriteXlsToResponse();
    }
    //导出pdf
    protected void ASPxButton2_Click(object sender, EventArgs e)
    {
        ASPxTreeListExporter1.Settings.ExpandAllNodes = true;
        ASPxTreeListExporter1.Settings.ExportAllPages = true;
        ASPxTreeListExporter1.Settings.ShowTreeButtons = true;
        ASPxTreeListExporter1.WritePdfToResponse();
    }

    protected void ASPxTreeList1_CustomDataCallback(object sender, DevExpress.Web.ASPxTreeList.TreeListCustomDataCallbackEventArgs e)
    {
        e.Result = "Key=" + e.Argument;
    }