ajaxPro以及flot的一些小应用

最新推荐文章于 2014-09-17 10:07:23 发布

ldwtill

最新推荐文章于 2014-09-17 10:07:23 发布

阅读量675

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： session button textbox function callback server

本文链接：https://blog.youkuaiyun.com/ldwtill/article/details/6697123

前端专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何使用AjaxPro机制实现前后端交互，并通过Session存储数据。文章详细解释了为什么不适合使用单例模式存储数据，以及如何利用Session进行数据的存储和传输。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ajaxPro的机制导致每次调用后台代码都会重新生成后台方法类的对象。所以不能使用单例模式来存储传输数据，存储和传输数据要使用session等方法。

具体例子如下：

1 使用asp自带服务器端控件

文件结构如图：

defau.aspx

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src="js/jquery-1.6.js"></script>
 <script language="javascript" type="text/javascript" src="flot/jquery.flot.js"></script> 
    <title>show flot</title>
</head>
<body>
    <form id="form1" runat="server">
    <div id="placeholder" style="width:600px;height:300px;">
    </div> 
    <div>
        <asp:RequiredFieldValidator ID="RequiredDataOne" runat="server" 
            ControlToValidate="text_dataOne" ErrorMessage="Require a number"></asp:RequiredFieldValidator>
        <asp:RangeValidator ID="RangeValidator_DataOne" runat="server" 
            ControlToValidate="text_dataOne" ErrorMessage="you must input a mnumber" 
            Type="Double"></asp:RangeValidator>
     <asp:TextBox ID="text_dataOne" runat="server" ></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredDataTwo" runat="server" 
            ControlToValidate="text_dataTwo" ErrorMessage="Required a number"></asp:RequiredFieldValidator>
        <asp:RangeValidator ID="RangeValidator_DataTwo" runat="server" 
            ControlToValidate="text_dataTwo" 
            Type="Double" Visible="True">you must input a mnumber</asp:RangeValidator>  
        <asp:TextBox ID="text_dataTwo" runat="server"></asp:TextBox>
        <asp:Button ID="button_submitData" runat="server" onclick="Button_submitData_Click" Text="OK" />
    </div>
    <script type="text/javascript">
        $(function() {
            var dList = ShowFlot.AjaxForData.GetDataList().value;
            var newData = [];
            for (var i = 0; i < dList.length; i++) {
                newData.push([i, dList[i]]);
            }
        $.plot($("#placeholder"), [
        { label: "Data", data: newData }
        ], {
          series: {
              lines: { show: true },
              points: { show: true }
        }
    });
        });
    </script> 
    </form>
</body>
</html>

default.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using ShowFlot;


public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
        AjaxPro.Utility.RegisterTypeForAjax(typeof(AjaxForData));

        if (!IsPostBack)
        {
            DataForChart getData = DataForChart.GetSingleton();
            getData.DataOne = 1;
            getData.DataTwo = 2;
            Session["dataForChart"] = getData;
        }
    }
    protected void Button_submitData_Click(object sender, EventArgs e)
    {
        DataForChart getData = DataForChart.GetSingleton();
        try
        {
            getData.DataOne = Convert.ToInt32(text_dataOne.Text);
            getData.DataTwo = Convert.ToInt32(text_dataTwo.Text);
        }
        catch (Exception de)
        {
            getData.DataOne = 1;
            getData.DataTwo = 2;
            Session["dataForChart"] = getData;
        }
       
        Session["dataForChart"] = getData;
    }
}

AjaxForData.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

  namespace ShowFlot
 {
        /// <summary>
        /// the business logic for the data whhic are used by the flot
        /// </summary>
       public class AjaxForData
      {
           /// <summary>
          /// the constrctor for the class AjaxForData
          /// </summary>
           public AjaxForData()
          {
          }
            /// <summary>
            /// the mathod to deal with data
            /// </summary>
            /// <returns>the data list which is used to show the flot </returns>
          [AjaxPro.AjaxMethod(AjaxPro.HttpSessionStateRequirement.ReadWrite)]
          public List<int?> GetDataList()
          {
              List<int?> dataList = new List<int?>();
              DataForChart dataForChart = (DataForChart)HttpContext.Current.Session["dataForChart"];

              if (dataForChart == null)
              {
                  dataForChart = DataForChart.GetSingleton();
                  dataForChart.DataOne = 1;
                  dataForChart.DataTwo = 0;
              }

              dataList.Add(dataForChart.DataOne);
              dataList.Add(dataForChart.DataTwo);
              dataList.Add(0);
              dataList.Add(1);
              dataList.Add(1);
              dataList.Add(2);
             
              return dataList;
          }
      }
 }

DataForChart.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace ShowFlot
{
    /// <summary>
    /// the class to store the data form the page
    /// </summary>
    public class DataForChart
    {
        private int? dataOne;
        private int? dataTwo;
        private static DataForChart singletonDataForChart = null;
        /// <summary>
        /// the mathod to get a single instance of class DataForChart
        /// </summary>
        /// <returns>the instance of DataForChart</returns>
        public static DataForChart GetSingleton()
        {
            Object thisLock = new Object();
            if (singletonDataForChart == null)
            {
                lock (thisLock)
                {

                    if (singletonDataForChart == null)
                    {
                        singletonDataForChart = new DataForChart();
                    }
                }
            }
            return singletonDataForChart;
        }
        private DataForChart()
        {
        }
        /// <summary>
        /// to get and set dataOne
        /// </summary>
        public int? DataOne
        {
            get
            {
                return dataOne;
            }

            set
            {
                dataOne = value;
            }
        }
        /// <summary>
        /// to get and set dataTwo 
        /// </summary>
        public int? DataTwo
        {
            get
            {
                return dataTwo;
            }
            set
            {
                dataTwo = value;
            }
        }
    }
}

2、使用TML控件：

文件结构如图：

dafault.aspx

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src="js/jquery-1.6.js"></script>
 <script language="javascript" type="text/javascript" src="flot/jquery.flot.js"></script> 
    <title>try a query</title>
   
</head>
<body>
    <form id="form1" runat="server">
    <div id="placeholder" style="width:600px;height:300px;">
    </div> 
    <div>
        <input 
            id="button_submit" type="button" value="htmlButton" onclick="return Button_submit_onclick()" /><input id="dataone" type="text" />
            <input id="datatwo" type="text" /></div>
    <script type="text/javascript">
        $(function() {
        var dList = AjaxProDemo.DealWithFlotData.GetDataList().value;
            var d = [];
            for (var i = 0; i < dList.length; i++) {
                d.push([i, dList[i]]);
            }
            $.plot($("#placeholder"), [
        { label: "getData", data: d }
    ], {
        series: {
            lines: { show: true },
            points: { show: true }
        }
    });
        });
        function Button_submit_onclick() {
            var dataone = document.getElementById("dataone").value;
            var datatwo = document.getElementById("datatwo").value;
            var dataList = AjaxProDemo.DealWithFlotData.GetList(dataone, datatwo).value;
            var d = [];
            for (var i = 0; i < dataList.length; i++) {
                d.push([i, dataList[i]]);
         
            }
            $.plot($("#placeholder"), [
        { label: "getData", data: d }
    ], {
        series: {
            lines: { show: true },
            points: { show: true }
        }
    });
        }
    </script> 
    </form>
</body>
</html>

default.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using AjaxProDemo;

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
        AjaxPro.Utility.RegisterTypeForAjax(typeof(DealWithFlotData));
    }
   
}

data.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;




  namespace AjaxProDemo
 {
      /// <summary>
      /// to deal with the data to show the flot
      /// </summary>
       public class DealWithFlotData
      {
           public DealWithFlotData()
          {
          }
           /// <summary>
           /// getDataList at the page fist load
           /// </summary>
           /// <returns>return the data list</returns>
        [AjaxPro.AjaxMethod]
        public List<int?> GetDataList()
        {
            List<int?> datal = new List<int?>();
            datal.Add(0);
            datal.Add(1);
            datal.Add(1);
            datal.Add(2);
            return datal;
        }
           /// <summary>
           /// to deal with  the data from the page 
           /// </summary>
           /// <param name="dataone"></param>
           /// <param name="datatwo"></param>
           /// <returns>return the data list that is dealed with</returns>
        [AjaxPro.AjaxMethod]
           public List<double> GetList(double dataone ,double datatwo)
           {
               List<double> dataList = new List<double>();
               double dataOne = dataone / 2;
               double dataTwo = datatwo / 2;
               dataList.Add(dataOne);
               dataList.Add(dataTwo);
               dataList.Add(1);
               dataList.Add(2);
               return dataList;
           }
      }
 }

参考资料：

Ajax读写Session值   

在服务器端page_load 
AjaxPro.Utility.RegisterTypeForAjax(typeof(test)); 
this.Button_Write.Attributes.Add( "onclick ", "WriteSession(); ");//写session 
this.Button_Read.Attributes.Add( "onclick ",   "ReadSession(); ");//读session 

其他写和读的方法 
///   <summary> 
///   写session 
///   </summary> 
///   <param   name= "str "> </param> 
[AjaxPro.AjaxMethod(AjaxPro.HttpSessionStateRequirement.ReadWrite)] 
public   void   WriteSession(string   str) 
{ 
Session[ "UserName "]   =   str; 
} 
///   <summary> 
///   读session 
///   </summary> 
///   <returns> </returns> 
[AjaxPro.AjaxMethod(AjaxPro.HttpSessionStateRequirement.ReadWrite)] 
public   string   ReadSession() 
{ 
string   str   =   " "; 
if   (Session[ "UserName "]   !=   null) 
{ 
str   =   Session[ "UserName "].ToString(); 
} 
return   str; 
} 

客户端代码： 
//4、访问Session的值 
//写入 
function   WriteSession() 
{ 
var   str   =   "HAHA "; 
test.WriteSession(str,CallBack_WriteSession); 
} 
function   CallBack_WriteSession(res) 
{ 
if(res.error   ==   null) 
{ 
alert( "OK "); 
} 
else 
{ 
alert(res.error.message); 
} 
} 
//访问 
function   ReadSession() 
{ 
test.ReadSession(CallBack_ReadSession); 
} 
function   CallBack_ReadSession(res) 
{ 
if(res.error   ==   null) 
{ 
alert(res.value); 
} 
else 
{ 
alert(res.error.message); 
} 
}

参考网址：

http://hi.baidu.com/%C2%FC%C1%AA%B5%C4%C8%D5%D7%D3/blog/item/2111524d53b89af5d62afcca.html