Dev系列控件的AJAX

xiaolinvfp

于 2015-01-30 11:33:51 发布

阅读量294

点赞数

分类专栏： DevWeb

DevWeb 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在我的其他随笔里已经介绍了后台也就是服务端Dev系列控件的一些用法，接下来我介绍Dev系列控件在前台也就是客户端的一些常用方法介绍以及前后台异步通信的方法。

一.Dev Data Edit控件通用属性以及方法:

属性

1.GetEnabled():返回控件是否为可操作状态

2.GetText():返回控件的Text的值

3.SetEnabled():设置控件状态

4.GetValue():返回控件的Value

5.SetValue():设置控件的Value

注意：在客户端进行Dev控件编程必须为Dev控件指定一个客户端的名称即ClientInstanceName，客户端直接根据ClientInstanceName来进行相关的

操作。一个简单的例子来从客户端改变AspxTextBox的值

Code
<head runat="server">
    <title>ClientTest</title>
    <script language="javascript" type="text/javascript">
    function onSendText(s,e){
       //得到AspxTextBox1的值
       var txt=txtSend.GetText();
       //根据AspxTextBox1的值设置AspxTextBox2的值
       var sendtxt="Get "+ txt+" from Client";
       txtGet.SetText(sendtxt);

    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <dxe:ASPxTextBox ID="ASPxTextBox1" runat="server" Width="170px" ClientInstanceName="txtSend" ClientEnabled="true">
          </dxe:ASPxTextBox>
          <dxe:ASPxButton ID="ASPxButton1" runat="server" Text="Post Dev系列控件的AJAX - candy - Candy

" AutoPostBack="False" ClientInstanceName="btnSend">
              <ClientSideEvents Click="function(s, e) {
         onSendText(s,e);
     }" />
          </dxe:ASPxButton>
   <dxe:ASPxTextBox ID="ASPxTextBox2" runat="server" Width="170px" ClientInstanceName="txtGet" ClientEnabled="true" >
          </dxe:ASPxTextBox>


    </div>
    </form>
</body>

运行效果如下图： Dev系列控件的AJAX - candy - Candy

怎么样？是不是和ASP.NET AJAX有异曲同工之妙。

接下来，第二个例子，ASPXComBox下拉框无刷新连动

当然，已经有很多种方法，AJAX插件来实现下拉框的级联连动更新。Dev的下拉框也不例外。在介绍这个例子之间，首先节点介绍下Dev的控件是如何

实现客户端，服务端异步通信的。

从客户端到服务端的通信：PerformCallback()。PerformCallback就是从客户端到服务端的桥梁，它是单向的只能从客户端发起到服务端。在Perform

Callback()括号当中我们可以传递一些参数到服务器端，从而达到更新效果。

服务器端的接受并异步刷新：Callback()。当从服务端PerformCallback唤醒以后，响应的控件Callback事件开始执行(控件的服务器事件中可以找到)。

并且通过Parameter键值来获取从客户端传过来的值进行相关的处理。

客户端：

Code
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>PerTest</title>
    <script language="javascript" type="text/javascript">
    //客户端处理下拉框选择项改变事件,client端aspxcombox下拉框改变事件为SelectedIndexChanged
    function OnEmployeesChanged(s){
    //PerformCallback事件实际上时dev系列控件客户端服务器端异步通信的"大使"，通过PerfromCallback事件
    //将客户端的通信要求传递给服务端,在服务端通过控件的callback事件来接受相关参数并进行页面异步刷新
      devcbxChi.PerformCallback(s.GetValue());
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <dxe:ASPxComboBox runat="server" ID="devcbxPar2" DropDownStyle="DropDownList" EnableIncrementalFiltering="True"
                         EnableSynchronization="False" ClientInstanceName="devcbxPar2"
            Width="160px">
                         <ClientSideEvents SelectedIndexChanged="function(s, e) { OnEmployeesChanged(s); }"></ClientSideEvents>
                     </dxe:ASPxComboBox>

      <dxe:ASPxComboBox runat="server" ID="devcbxChi" DropDownStyle="DropDownList" EnableIncrementalFiltering="True"
                         EnableSynchronization="False" ClientInstanceName="devcbxChi"
            Width="160px" oncallback="devcbxChi_Callback">
                     </dxe:ASPxComboBox>
    </div>
    </form>
</body>
</html>

服务端：

Code
using DevExpress.Web.ASPxEditors;

Code
SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["northwind"].ConnectionString);
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            devcbxPar2.Items.Clear();
            string selectSQL = "select EmployeeID,FirstName from Employees";
            SqlDataAdapter SDA = new SqlDataAdapter(selectSQL, conn);
            DataSet DS = new DataSet();
            SDA.Fill(DS);
            for (int i = 0; i < DS.Tables[0].Rows.Count; i++)
            {
                devcbxPar2.Items.Add(new ListEditItem(DS.Tables[0].Rows[i]["FirstName"].ToString().Trim(), DS.Tables[0].Rows[i]["EmployeeID"]
                    .ToString().Trim()));
            }
        }
    }
    protected void devcbxChi_Callback(object source, DevExpress.Web.ASPxClasses.CallbackEventArgsBase e)
    {
        //得到从客户端传递过来的参数来进行异步通信响应
        string parm = e.Parameter.Trim();
        string selectSQL = "select TerritoryID from EmployeeTerritories where EmployeeID='" + parm + "'";
        SqlDataAdapter SDA = new SqlDataAdapter(selectSQL, conn);
        DataSet DS = new DataSet();
        SDA.Fill(DS);
        devcbxChi.Items.Clear();
        for (int i = 0; i < DS.Tables[0].Rows.Count; i++)
        {
            devcbxChi.Items.Add(DS.Tables[0].Rows[i]["TerritoryID"].ToString().Trim());
        }
        devcbxChi.SelectedIndex = 0;
    }

Dev系列控件的AJAX - candy - Candy

OK，一个简单的异步刷新下拉框连动实现。那么思索下dev控件的异步通信，既然这么容易能实现从客户端服务端的异步刷新，那么要求再高点，

怎样通过服务端的发起来异步改变客户端的元素呢？我们把上面的程序稍微改下

Code
<head runat="server">
    <title>PerTest</title>
    <script language="javascript" type="text/javascript">
    //客户端处理下拉框选择项改变事件,client端aspxcombox下拉框改变事件为SelectedIndexChanged
    function OnEmployeesChanged(s){
    //PerformCallback事件实际上时dev系列控件客户端服务器端异步通信的"大使"，通过PerfromCallback事件
    //将客户端的通信要求传递给服务端,在服务端通过控件的callback事件来接受相关参数并进行页面异步刷新
      devcbxChi.PerformCallback(s.GetValue());
    }
    function onEndCallback(s,e){
    var result=s.cp_result;
    txtresult.SetText(result);
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <dxe:ASPxComboBox runat="server" ID="devcbxPar2" DropDownStyle="DropDownList" EnableIncrementalFiltering="True"
                         EnableSynchronization="False" ClientInstanceName="devcbxPar2"
            Width="160px">
                         <ClientSideEvents SelectedIndexChanged="function(s, e) { OnEmployeesChanged(s); }"></ClientSideEvents>
                     </dxe:ASPxComboBox>

      <dxe:ASPxComboBox runat="server" ID="devcbxChi" EnableIncrementalFiltering="True"
                         EnableSynchronization="False" ClientInstanceName="devcbxChi"
            Width="160px" oncallback="devcbxChi_Callback" ValueType="System.String">
          <ClientSideEvents EndCallback="function(s, e) {
    onEndCallback(s,e);
}" />
                     </dxe:ASPxComboBox>
        <dxe:ASPxTextBox ID="ASPxTextBox1" runat="server" Width="170px"
            ClientInstanceName="txtresult" ForeColor="Red">
        </dxe:ASPxTextBox>
    </div>
    </form>
</body>

服务端：

Code
protected void devcbxChi_Callback(object source, DevExpress.Web.ASPxClasses.CallbackEventArgsBase e)
    {
        //得到从客户端传递过来的参数来进行异步通信响应
        string parm = e.Parameter.Trim();
        string selectSQL = "select TerritoryID from EmployeeTerritories where EmployeeID='" + parm + "'";
        SqlDataAdapter SDA = new SqlDataAdapter(selectSQL, conn);
        DataSet DS = new DataSet();
        SDA.Fill(DS);
        devcbxChi.Items.Clear();
        for (int i = 0; i < DS.Tables[0].Rows.Count; i++)
        {
            devcbxChi.Items.Add(DS.Tables[0].Rows[i]["TerritoryID"].ToString().Trim());
        }
        devcbxChi.SelectedIndex = 0;
        //定义JSProperties参数值回传给客户端
        devcbxChi.JSProperties["cp_result"] = "更新成功";
    }

看看效果： Dev系列控件的AJAX - candy - Candy 。没错"更新成功"是从服务端回传给了客户端！是不是很简单？一个重要的属性JSProperties

JSProperties属性可以从服务端的参数传到客户端。我们可以定义很多个参数，但是在定义JSProperties属性的参数时，一定要记得参数

的值以"cp"开头，以此来与Dev的基类区别开来。接下来我们在控件的客户端EndCallback()事件来接受JSProperties的参数来进行相关

的设置。

Dev的Data Edit相关控件的客户端编程也非常强大，让我们非常轻松的就可以实现异步通信。将Dev的客户端，服务端编程相结合，我们

的程序将效率更高，实现效果也更好。

xiaolinvfp

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Dev系列控件的AJAX

在我的其他随笔里已经介绍了后台也就是服务端Dev系列控件的一些用法，接下来我介绍Dev系列控件在前台也就是客户端的一些常用方法介绍以及前后台异步通信的方法。一.Dev Data Edit控件通用属性以及方法: 属性 1.GetEnabled():返回控件是否为可操作状态 2.GetText():返回控件的Text的值 3.SetEnable
复制链接

扫一扫