zoukankan      html  css  js  c++  java
  • Dev系列控件的AJAX使用Demo

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

        属性

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

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

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

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

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

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

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

    <head id="Head1" 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" 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>
    

     运行效果如下图:

     

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

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

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

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

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

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

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

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

    客户端:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" 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>
    

      服务端:

    using DevExpress.Web.ASPxEditors;
        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;
        }
    

      

    OK,一个简单的异步刷新下拉框连动实现。那么思索下dev控件的异步通信,既然这么容易能实现从客户端服务端的异步刷新,那么要求再高点,怎样通过服务端的发起来异步改变客户端的元素呢?我们把上面的程序稍微改下

    <head id="Head1" 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>
    

      服务端:

        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"] = "更新成功";
        }
    

      

    看看效果:


      没错"更新成功"是从服务端回传给了客户端!是不是很简单?一个重要的属性JSProperties

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

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

    的设置。

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

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

  • 相关阅读:
    201871010104-陈园园《面向对象程序设计(java)》课程学习总结
    201871010104-陈园园《面向对象程序设计(java)》第十七周学习总结
    201871010104-陈园园《面向对象程序设计(java)》第十六周学习总结
    201871010104-陈园园 《面向对象程序设计(java)》第十五周学习总结
    201871010104-陈园园 《面向对象程序设计(java)》第十四周学习总结
    201871010104-陈园园 《面向对象程序设计(java)》第十三周学习总结
    201871010105-曹玉中 实验四 团队作业1:软件研发团队组建
    201871010105-曹玉中 实验三 结对项目—《D{0-1}KP 实例数据集算法实验平台》项目报告
    201871010105-曹玉中 实验二 个人项目—《背包问题》项目报告
    201871010105-曹玉中 实验一 软件工程准备——初识软件工程
  • 原文地址:https://www.cnblogs.com/wolfocme110/p/6001140.html
Copyright © 2011-2022 走看看