ajaxPro以及flot的一些小应用

来源：互联网发布：js div上下滑动效果编辑：程序博客网时间：2024/06/07 22:26

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