科技行者

行者学院 转型私董会 科技行者专题报道 网红大战科技行者

知识库

知识库 安全导航

至顶网软件频道基础软件静态页中利用AJAX.NET实现无刷新页面

静态页中利用AJAX.NET实现无刷新页面

  • 扫一扫
    分享文章到微信

  • 扫一扫
    关注官方公众号
    至顶头条

AJAX依靠服务器作为中介来分发和处理请求,.net封装类依赖于客户端的请求……

作者:黎宇 来源:天极开发 2007年11月6日

关键字: Windows

  • 评论
  • 分享微博
  • 分享邮件
3. 用javascript编写脚本方法,

function Init()
{
 DomTree=new dhtmlXTreeObject(document.getElementById('divTree'),"100%","100%",0);
 DomTree.setImagePath("imgs/");
 DomTree.enableDragAndDrop(true)
 DomTree.setDragHandler(myDragHandler);
 DomTree.setOnClickHandler(SelectTreeNode);
 var s= AjaxData.GetXmlTree().value;

 DomTree.loadXMLString(s);
 DomTree.openItem("R_1");
 SelectTreeNode("R_1");
 divToolbar.innerHTML=AjaxData.GetToolBarTable(TableName).value;
 divDataGrid.innerHTML=GetTableOuterHTML(TableName);
}

  Init方法通过Ajax的GetXmlTree方法得到树的内容,GetToolBarTable取得工具栏的内容。通过GetTableOuterHTML方法取得物理表tInfoClass的所有数据并通过表格展现出来。

function Find()
{
 var Table=AjaxData.GetXmlFindTable("年级名称 like '%"+txtName.value +"%'");
 divDataGrid.innerHTML=Table.value;
}

  查询方法Find()是通过Ajax的GetXmlFindTable方法按年级名称查询并把结果展现出来。

function OpenAddWeb()
{
 var RetID =OpenAddWin('InfoClass_edit.aspx?IsAdd=true',370,300);
 if(RetID==-1) return;
 InsertRow(DataGrid1,RetID);
}

  OpenAddWeb方法打开InfoClass_edit.aspx页在该页上完成增加数据的功能。如果返回值不为-1则表示有新数据增加的并把数据插入到表格的最后一行。RetID表示最后一行的ID.

function OpenEditWeb(ThisCell)
{
 var ID=ThisCell.previousSibling.previousSibling.innerText;
 var RetID =OpenAddWin("InfoClass_edit.aspx?ID="+ID+"&IsAdd=false",370,300);
 if(RetID==-1) return;
 //有更新行
 var CurrRow=ThisCell.parentElement
 SetRowText(CurrRow);
 // SetRowText(CurrRow,RetDataRow);
}

  OpenEditWeb方法是当用户点击的单元格后打开InfoClass_edit.aspx页在该页上完成编辑该行数据的功能。如有更新行则把当前行的内容更换..


  ·建立Ajax类。(见文件AjaxData.cs)命名空间为Ttyu,类名为AjaxData。

  1. 定义静态变量mDt。mDt是读取到物理表的数据并保存在内存中的数据表对象。我们的主要操作都是靠它完成。定义为静态的是我们不希望反复访问数据库。我们一次性读取,永久使用。

static public DataTable mDt;

  2.定义我们的主要方法。在每个方法的上行加上[Ajax.AjaxMethod()]。

//得到表TableName的所得数据,以XML字符串返回
[Ajax.AjaxMethod()]
public string GetTableOuterHTML(string TableName)
{
 DataTable dt=db.DB.GetDataTable(TableName);
 mDt=dt;
 return db.GetTableOuterHTML(dt.DefaultView);
}

  GetTableOuterHTML方法是由物理表名读取到内存中并通过其视图得到以XML格式的Table。这里我们读取后保存在mDt中。用数据表的视图是我们的查询也通过该方法呈现数据。

//得到表TableName的所得数据,以XML字符串返回
[Ajax.AjaxMethod()]
public string GetXmlFindTable(string RowFilter)
{
 DataTable Dt=mDt;
 DataView dv=Dt.DefaultView;
 dv.RowFilter=RowFilter;
 return db.GetTableOuterHTML(dv);
}

  GetXmlFindTable是按查询条件从mDt中查询到数据并返回给客户端。

//删除行
[Ajax.AjaxMethod()]
public bool DeleteRow(string TableName,int ID)
{
 string SQL = "delete from " + TableName + " where ID=" + ID;
 bool isSuccess= db.DB.ExecuteSQL(SQL);
 if(isSuccess)
 {
  DataRow dr=mDt.Select("ID="+ID)[0];
  mDt.Rows.Remove(dr);
 }
 return isSuccess;
}

  DeleteRow是删除物理表的一行,并在mDt中也同步地删除。

//把数据行转化为数组返回
[Ajax.AjaxMethod()]
public object GetDataRow(int iID)
{
 DataRow dr=mDt.Select("ID="+iID)[0];
 return dr.ItemArray;//数字类型不能为空
}
GetDataRow是从内存表mDt得到ID号为iID的一行,通过数组方式返回给客户端。
[Ajax.AjaxMethod()]
public string GetToolBarTable(string TableName)
{
 return db.GetToolBarTable(TableName);
}

  GetToolBarTable是组织成工具栏的内容返回给客户端。

  ·建立业务数据类ttyuPKData。(见文件ttyuPKData.cs)命名空间为Ttyu,类名为ttyuPKData。

  该类中有些常用的方法。

  public bool InsertDataRow(DataRow dr,int BeginColumnIndex)为向物理表中把数据行dr插入,BeginColumnIndex表示从开始的列插入。

  public bool UpdateDataRow(DataRow dr,int BeginColumnIndex,string Filter) 为向物理表中把数据行dr的数据更新,BeginColumnIndex表示开始更新的列。Filter表示所要更新的行。是一筛选条件。

  public string GetTableOuterHTML(DataView dv)是个通用的把数据视图展现为Table的方法。并通过class定义样式。

//由一个数据视图得到该表的表头及所有数据,以XML格式的表字符串返回
public string GetTableOuterHTML(DataView dv)
{
StringBuilder ret = new StringBuilder();
ret.Append("<table class='DataGrid' id='DataGrid1' cellspacing=1 cellpadding=4>" );
ret.Append("<tr class='DataGridHeaderStyle'>");
ret.Append("<td width='5'> <input type='checkbox' onclick='SelectAll(this)'></td> ");
//标题
foreach(System.Data.DataColumn dc in dv.Table.Columns )
{
if(dc.Ordinal==0) //该列隐藏
ret.Append("<td class='IDColumn'>"+dc.ColumnName+"</td>");
else
ret.Append("<td>"+dc.ColumnName+"</td>");
}
ret.Append("</tr>");
//这时是视图中筛选后的数据
foreach(DataRowView drv in dv)
{
DataRow dr=drv.Row;//dv.Table.Rows[i];
ret.Append(GetRowOuterHTML(dr));
}
ret.Append("</table>");
return ret.ToString ();
}

  ·建立页面数据编辑类(见文件PageEdit.cs)命名空间为Ttyu.Web,类名为PageEdit。

  该类是个通用的通过继承的技巧实现了所有编辑页(包括增加、修改数据)功能的统一处理。页中不需要一行代码。

  结论

  Ajax技术可以给客户端提供丰富的客户体验,而ajax.net为您容易的实现这样强大的功能提供了可能。静态页面是不出现刷新问题的。我们的静态页面通过Ajax完全可与asp.net结合起来。通过.net进行后台的管理。前台通过javascript调用。这样完美的结合是解决问题的最佳方法。

查看本文来源

    • 评论
    • 分享微博
    • 分享邮件
    邮件订阅

    如果您非常迫切的想了解IT领域最新产品与技术信息,那么订阅至顶网技术邮件将是您的最佳途径之一。

    重磅专题
    往期文章
    最新文章