[关闭]
@Aiti 2018-05-07T06:50:54.000000Z 字数 5575 阅读 202

同页面异步局部刷新控件内容

未分类

案列1

下面这个例子就是通过一个ListBox，从客户端回调AspxCallbackPanel，从而更新AspxCallbackPanel内的MultiView控件显示
信息。
首选，先在页面中放置一个AspxCallbackPanel控件，并设置ClientInstanceName属性为“CallbackPanel”,其作用就是通过客户
端的javascript脚本引用ASPxCallbackPanel控件。

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

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

  1. <dxcp:ASPxCallbackPanel ID="ASPxCallbackPanel" runat="server" ClientInstanceName="CallbackPanel"  
  2.    OnCallback="ASPxCallbackPanel_Callback" Width="100%">  
  3.    <PanelCollection>  
  4.        <dxp:PanelContent ID="PanelContent1" runat="server">  
  5.            <asp:MultiView ID="MultiView" runat="server">  
  6.                <asp:View ID="View1" runat="server">  
  7.                    <table>  
  8.                        <tr>  
  9.                            <td valign="top">  
  10.                                <dxe:ASPxLabel ID="ASPxLabel1" runat="server" Text="♣我是谁？不要告诉我是上班族，现在的上班族太民工；不要告诉我是民工，现在民工太缺钱；不要告诉我是富翁，富翁大都是暴发户；不要告诉我是暴发户，暴发户都想当明星；不要告诉我是明星，现在明星就像上班族。"  
  11.                                    Font-Bold="True">  
  12.                                </dxe:ASPxLabel>  
  13.                            </td>  
  14.                        </tr>  
  15.                    </table>  
  16.                </asp:View>  
  17.                <asp:View ID="View2" runat="server">  
  18.                    <table>  
  19.                        <tr>  
  20.                            <td valign="top">  
  21.                                <dxe:ASPxLabel ID="ASPxLabel3" runat="server" Text="♣许多人不知道自己失去过什么，而时间总是耐心地给出答案。看着过去失去的东西，会有一种心痛的感觉！算是一种悔悟吧！"  
  22.                                    Font-Bold="True">  
  23.                                </dxe:ASPxLabel>  
  24.                            </td>  
  25.                        </tr>  
  26.                    </table>  
  27.                </asp:View>  
  28.                <asp:View ID="View3" runat="server">  
  29.                    <table>  
  30.                        <tr>  
  31.                            <td valign="top">  
  32.                                <dxe:ASPxLabel ID="ASPxLabel5" runat="server" Text="♣一个人吻你，你一定被人深爱；不少人吻你，你一定是个漂亮的小孩；非常多的人吻你，你会被口水淹死"  
  33.                                    Font-Bold="True">  
  34.                                </dxe:ASPxLabel>  
  35.                            </td>  
  36.                        </tr>  
  37.                    </table>  
  38.                </asp:View>  
  39.            </asp:MultiView></dxp:PanelContent>  
  40.    </PanelCollection>  
  41. </dxcp:ASPxCallbackPanel>

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

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

最后是服务器代码：

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

当客户端触发ListBox的SelectedIndexChanged事件时，就会执行在ListBox客户端注册的如下代码

  1.   SelectedIndexChanged="function(s, e) {
  2.               var item = ListBox.GetSelectedItem();  
  3.               CallbackPanel.PerformCallback(item.value);  //此行执行ASPxCallbackPanel的回调，即服务器事件ASPxCallbackPanel_Callback。
  5.           }"
  7. 说明：AspxCallbackPanel的PerformCallback的方法原型：
  8. function PerformCallback(
  9.    parameter : String
  10. ) : Void;

其中传递的参数可通过AspxCallbackPanel的Callback事件中的 CallbackEventArgsBase得到，如服务器端代码。
PerformCallback的回调还可用于ASPxDataView 等控件，使用方法均相同。

实例（新建GrideView编辑内容，Report控件更新）

下面GrideView控件

  1. <dx:ASPxGridView ID="gvAll" runat="server" ClientInstanceName="gvAll" AutoGenerateColumns="False" DataSourceID="XpoDs"  ClientIDMode="Static" KeyFieldName="Oid"  OnAfterPerformCallback="gvAll_AfterPerformCallback">
  2.     <ClientSideEvents EndCallback="gvCB"   SelectionChanged="function(s,e){ShowGV(s,e);}"/>
  3.     <Columns>
  4.         </dx:GridViewCommandColumn>
  5.         <dx:GridViewDataTextColumn FieldName="Name" VisibleIndex="3">
  6.         </dx:GridViewDataTextColumn>
  7.         <dx:GridViewDataTextColumn FieldName="Nums" VisibleIndex="4">
  8.         </dx:GridViewDataTextColumn>
  9.          <dx:GridViewDataTextColumn FieldName="MapLat" VisibleIndex="5">
  10.         </dx:GridViewDataTextColumn>
  11.          <dx:GridViewDataTextColumn FieldName="MapLng" VisibleIndex="6">
  12.         </dx:GridViewDataTextColumn>
  13.     </Columns>
  14.     <SettingsBehavior AllowSelectSingleRowOnly="true" />
  15. </dx:ASPxGridView>

把需要更新的控件放在ASPxCallbackPanel控件中

  1. <dx:ASPxCallbackPanel ID="ASPxCallbackPanel" runat="server" ClientInstanceName="CallbackPanel"   OnCallback="ASPxCallbackPanel_Callback" Width="100%">  
  2.     <PanelCollection>  
  3.         <dx:PanelContent ID="PanelContent1" runat="server">  
  5.            <!-- 这里放需要异步更新的控件，从Js客户端回调AspxCallbackPanel，从而更新AspxCallbackPanel内的控件显示
  6. 信息。-->
  8.         </dx:PanelContent>  
  9.     </PanelCollection>
  10.  </dx:ASPxCallbackPanel>

如下

  1.  <dx:ASPxCallbackPanel ID="ASPxCallbackPanel" runat="server" ClientInstanceName="CallbackPanel"   OnCallback="ASPxCallbackPanel_Callback" Width="100%">  
  2.     <PanelCollection>  
  3.         <dx:PanelContent ID="PanelContent1" runat="server">  
  5.              <asp:Repeater runat="server" ClientIDMode="Static" ID="rptMeetRoom" DataSourceID="XpoDs">
  6.                 <ItemTemplate>
  7.                     <a style="text-decoration:none" onclick='gvAll.StartEditRow(<%# Container.ItemIndex%>);return false;' >
  8.                     <div runat="server" class="m_rooms">
  9.                        <span style="font-size:16px;font-weight: bold;  "><%# Eval("Name") %> </span>
  10.                        <span style="color:#333333;display: block; margin-top: -60px;"><%# "可容纳"+Eval("Nums")+"人" %></span> 
  11.                     </div>
  12.                     </a>
  13.                 </ItemTemplate>
  14.               </asp:Repeater>
  15.              <a style="text-decoration:none" onclick="gvAll.AddNewRow();   return true; ">
  16.                 <div runat="server" id="NewRoom" class="m_rooms">
  17.                     <span style="color:#333333;font-size:50px;opacity:0.5;line-height:12px;">+</span>
  18.                     <span style="color:#333333;display: block;margin-top: -60px;">新建会议室</span>  
  19.                 </div>
  20.             </a>
  21.         </dx:PanelContent>  
  22.     </PanelCollection>
  23.  </dx:ASPxCallbackPanel>

重点就是如何通过JS调用ASPxCallbackPanel的回调，通过改变选择行触发事件

  1.  function ShowGV(s, e) {
  2.              CallbackPanel.PerformCallback();
  3.          }

GridView新建时属于回调，不能刷新页面，所以用到OnAfterPerformCallback事件。循环使用0/1行点击，后台如下：

  1. if (!IsPostBack)
  2. {
  3.     Session["SelectRow"] = 0;
  4. }
  5. if (Session["SelectRow"] != null && int.Parse(Session["SelectRow"].ToString())==2)
  6. {
  7.     Session["SelectRow"] = 0;
  8. }
  9.  protected void ASPxCallbackPanel_Callback(object sender, CallbackEventArgsBase e)
  10. {
  11.     XpoDs.Criteria = CriteriaOperator.Parse("Scope=?", ScopeHelper.CurrentScope()).ToString();
  12.     rptMeetRoom.DataBind();
  13.     rptTask.DataBind();
  14. }
  15. protected void gvAll_AfterPerformCallback(object sender, ASPxGridViewAfterPerformCallbackEventArgs e)
  16. {
  17.     gvAll.Selection.SelectAll();
  18.     int index = int.Parse(Session["SelectRow"] == null ? "0" : Session["SelectRow"].ToString());
  19.     gvAll.Selection.SelectRow(index);
  20.     index++;
  21.     Session["SelectRow"] = index;
  22. }
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注