一個Ajax.NET的查詢實例

因為項目中只能用.net 1.1,所以atlas是用不了了，只能玩玩Ajax Profession.net, 下面是一個查詢的案例。在頁面上放置一個DataGrid1,各種查詢結果均放入其中，在client端的JS中將SQL語句傳給server端的方法，執行一個查詢，並可以控制雙擊行是否展開一個新的查詢。可將DataGrid1的內容導出到excel中、模擬gmail的 Ajax 的loading運用

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
using System.IO;
namespace eol
{
    /**//// <summary>
    /// index 的摘要描述。
    /// </summary>
    public class index : System.Web.UI.Page
    {
        protected System.Web.UI.WebControls.TextBox TextBox1;
        protected WebControlLibrary.InputCalendar startTime;
        protected WebControlLibrary.InputCalendar endTime;
        protected WebControlLibrary.InputCalendar pStartTime;
        protected WebControlLibrary.InputCalendar pEndTime;
        protected System.Data.SqlClient.SqlConnection Conn=new SqlConnection();
        protected System.Web.UI.WebControls.TextBox eformsn;
        protected System.Web.UI.WebControls.Label Label1;
        protected System.Web.UI.WebControls.DataGrid DataGrid1=new DataGrid();
        protected System.Web.UI.WebControls.Button Button2;
        protected System.Web.UI.HtmlControls.HtmlInputText applicant;
        public string toExcel;

        private void Page_Load(object sender, System.EventArgs e)
        {
            Ajax Pro.Utility.RegisterTypeFor Ajax (typeof(eol.index));
        }

        public DataSet DB(string dataName, string sqlCmd)
        {
            string connStr="server=172.16.0.120;uid=msikdb;pwd=dbmsik;database="+dataName;
            Conn.ConnectionString=connStr;
            try
            {
                Conn.Open();
            }
            catch(Exception ex)
            {
                Conn.Close();
                Response.Write(ex.Message);
            }
            SqlCommand cmd=new SqlCommand(sqlCmd, Conn);
            SqlDataAdapter da=new SqlDataAdapter();
            da.SelectCommand=cmd;
            DataSet ds = new DataSet();
            da.Fill(ds);
            Conn.Close();
            return ds;
        }

        Web Form 設計工具產生的程式碼#region Web Form 設計工具產生的程式碼
        override protected void OnInit(EventArgs e)
        {
            //
            // CODEGEN: 此為 ASP.NET Web Form 設計工具所需的呼叫。
            //
            InitializeComponent();
            base.OnInit(e);
        }

        /**//// <summary>
        /// 此為設計工具支援所必須的方法 - 請勿使用程式碼編輯器修改
        /// 這個方法的內容。
        /// </summary>
        private void InitializeComponent()
        {
            this.Conn = new System.Data.SqlClient.SqlConnection();
            this.Button2.Click += new System.EventHandler(this.Button2_Click);
            this.DataGrid1.ItemCreated += new System.Web.UI.WebControls.DataGridItemEventHandler(this.getPageIndexStyle);
            this.Load += new System.EventHandler(this.Page_Load);

}
#endregion

            Response.Write(this.toExcel);
            Response.Write(Session["txtExcel"]);
            Session.Abandon();
            Response.End();
        }

        private void Button2_Click(object sender, System.EventArgs e)
        {
            setToExcel();
        }

        private void DataGrid1_ItemDataBound(object sender, DataGridItemEventArgs e)
        {
            ListItemType itemtype=(ListItemType)e.Item.ItemType;
            if (itemtype!=ListItemType.Header && itemtype!=ListItemType.Footer && itemtype!=ListItemType.Separator)
            {
                e.Item.Attributes.Add("ondblclick", "showDetail("+e.Item.Cells[1].Text+");");
                e.Item.Attributes.Add("onmouseover","this.className='mouseOn'");
                e.Item.Attributes.Add("onmouseout", "this.className=''");
            }
        }

}
}
Client端的js:
<script language="javascript">
var obj=document.all;
var frm=document.forms[0];
var box=document.getElementById("detail");
var list=document.getElementById("datagrid");

if(typeof ASP == "undefined") ASP={};
ASP.LoadingDemo_class = function() {};
Object.extend(ASP.LoadingDemo_class.prototype, Object.extend(new Ajax Pro.Ajax Class(), {
    LongOperation: function() {
        return this.invoke("LongOperation", {}, this.LongOperation.getArguments().slice(0));
    },
    url: '/ajaxpro/ASP.LoadingDemo,App_Web_t_mu_tej.ashx'
}));
ASP.LoadingDemo = new ASP.LoadingDemo_class();

var c = 0;
Ajax Pro.onLoading = function(b) {
    c++;
    window.status = c;
    var l = document.getElementById("loadinfo");
    l.style.visibility = b ? "visible" : "hidden";
       l.style.right=0;
    l.style.pixelTop=document.body.scrollTop;
}

function showDetail(n) {
c = 0;
ASP.LoadingDemo.LongOperation(new Function('getEolByeFormsn('+n+')'));
}

function getDataGrid(sql,Event)
{
    if(list.style.display=='none')
    {
        list.style.display='';
    }
    box.style.display=='' ? box.style.display='none':void(0);
    var p=eol.index.Ajax Data(sql, Event).value;
    list.innerHTML=p;
}

function getEolByeFormsn(n)
{
    if (box.style.display=="none")
    {
        box.style.display="";
        box.innerHTML="<div id='toolbar'><div id='btnGoback' onclick='goBack()'><img src=http://172.16.0.134/webflow/images/cch.gif?http://www.xvna.com>GO BACK</div></div>"
    }
    list.style.display="none";
    var p=eol.index.Ajax Data("select * from msi_eol_list_line t where eformsn="+n, false).value;
    box.innerHTML+=p;
}

        sql+=time+param;
        //document.write(sql);
        c = 0;
        ASP.LoadingDemo.LongOperation(new Function('getDataGrid("'+sql+'",true)'));
    }else{
        alert(err);
    }
}

var oPopup = window.createPopup();
function getHelp()
{
var oPopupBody = oPopup.document.body;
var lefter = screen.width-150;
var topper = document.body.scrollTop;
oPopupBody.innerHTML = helpbox.innerHTML;
oPopup.show(lefter, topper, 280, document.body.offsetHeight, document.body);
document.body.onmouseup = new Function("oPopup.hide();");
}
</script>

返回炫浪学院

上一篇：使用AJAX技术打造博客无刷新搜索引擎下一篇：漫谈Ajax在.Net中的使用