Dev系列控件的AJAX使用Demo

時間 2019-11-06

標籤 dev 系列控件 ajax 使用 demo 欄目 Ajax 简体版

原文原文鏈接

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

屬性html

1.GetEnabled():返回控件是否爲可操做狀態java

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

3.SetEnabled():設置控件狀態服務器

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

5.SetValue():設置控件的Valueide

注意：在客戶端進行Dev控件編程必須爲Dev控件指定一個客戶端的名稱即ClientInstanceName，客戶端直接根據ClientInstanceName來進行相關的post

操做。一個簡單的例子來從客戶端改變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>

　運行效果以下圖：

　orm

　　怎麼樣？是否是和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的客戶端，服務端編程相結合，咱們

的程序將效率更高，實現效果也更好。