本文介绍如何利用Ajax.dll实现在网页中动态加载数据。通过一个具体的示例，详细展示了从创建类库到页面实现的具体步骤，包括数据库查询、页面元素绑定及客户端脚本调用等关键环节。
小研究了一下如何用Ajax.dll实现上一个例子，很沮丧，因为使用人家的方法，更简单，代码更少，而且仅仅是它的皮毛而已。所以，如果做项目要用到Ajax，建议研究一下框架，比如说Ext。它的类库和文档相当丰富，简单易上手。
好吧，我把实现过程列出来。首先我们需要一个Ajax.dll文件，这个自己去找吧！放到项目中，并添加好引用。首先，你需要一个类，随意命名为“AjaxMethod.cs”代码如下：
namespace Test.AjaxTest
{
/// <summary>
/// AjaxMethod 的摘要说明。
/// </summary>
public class AjaxMethod
{
public AjaxMethod() {}
// 数据库查询操作
[Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
public DataSet GetList(string id)
{
string sql = "select CityName,CityCode from City where [ID]=" + id;
return SelectData(sql); // 调用下面的方法
}
//
private DataSet SelectData(string sql)
{
// 数据库链接定义：
//Web.config中<configuration><appSettings></appSettings></configuration>
// 中添加定义：<add key="ConnectionString" value="data source=localhost;
// initial catalog=helpdesk1; user id=sa; password=sa; "></add>
string cs = System.Configuration.ConfigurationSettings
.AppSettings["ConnectionString"];
// 或者直接这样定义
//string cs = "Server=(local);UID=sa;PWD=sa;Database=HelpDesk1";
SqlDataAdapter sda = new SqlDataAdapter(sql,cs);
DataSet ds = new DataSet();
sda.Fill(ds);
return ds;
}
}
}
{
/// <summary>
/// AjaxMethod 的摘要说明。
/// </summary>
public class AjaxMethod
{
public AjaxMethod() {}
// 数据库查询操作
[Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
public DataSet GetList(string id)
{
string sql = "select CityName,CityCode from City where [ID]=" + id;
return SelectData(sql); // 调用下面的方法
}
//
private DataSet SelectData(string sql)
{
// 数据库链接定义：
//Web.config中<configuration><appSettings></appSettings></configuration>
// 中添加定义：<add key="ConnectionString" value="data source=localhost;
// initial catalog=helpdesk1; user id=sa; password=sa; "></add>
string cs = System.Configuration.ConfigurationSettings
.AppSettings["ConnectionString"];
// 或者直接这样定义
//string cs = "Server=(local);UID=sa;PWD=sa;Database=HelpDesk1";
SqlDataAdapter sda = new SqlDataAdapter(sql,cs);
DataSet ds = new DataSet();
sda.Fill(ds);
return ds;
}
}
}
接下来是你要实现效果的页面a.aspx，<body>部分很简单：
<body>
<form id="Form1" method="post" runat="server">
<select id="AList" onchange="GetBList()">
<option value="0">A</option>
<option value="1">B</option>
<option value="2">C</option>
</select>
<select id="BList"></select>
</form>
</body>
<form id="Form1" method="post" runat="server">
<select id="AList" onchange="GetBList()">
<option value="0">A</option>
<option value="1">B</option>
<option value="2">C</option>
</select>
<select id="BList"></select>
</form>
</body>
当页面触发onchange事件，便进入了GetBList()方法，下面是该页面完整的js：
<script language="javascript">
function GetBList() {
// 调用数据库操作方法
var av = document.getElementById("AList").value;
// 调用AjaxMethod类的方法，至于这里有两个参数，猜想是一个委托，
// 将GetList执行结果DataSet传递给SetBList方法，隐藏了
AjaxMethod.GetList(av, SetBList);
}
function SetBList(response) {
if(response != null) {
var ds = response.value; // 返回集
// 这里很有特色，开始我感觉出错了，怎么js的语法规则跟c#一样啊
// 可见Ajax.dll里面的正则应该写的暴强！不过有一点让人感觉不爽
// 我在测试时，将ds.Tables[0].Rows.lenght写成了ds.Tables[0].Rows.Count
// js会找不到对象的错误。
// 如此等于，我们还是要习惯它的规则，毕竟不完全是c#，它只是定义了一种跟c#
// 非常接近的语法规则而已
if(ds != null && typeof(ds) == "object" && ds.Tables != null) {
alert(ds.Tables[0].Rows.length);
for(var i=0;i<ds.Tables[0].Rows.length;i++) {
var option = document.createElement("OPTION");
option.value = ds.Tables[0].Rows[i].CityCode;
option.text = ds.Tables[0].Rows[i].CityName;
document.Form1.BList.options.add(option);
}
}
}
}
</script>
function GetBList() {
// 调用数据库操作方法
var av = document.getElementById("AList").value;
// 调用AjaxMethod类的方法，至于这里有两个参数，猜想是一个委托，
// 将GetList执行结果DataSet传递给SetBList方法，隐藏了
AjaxMethod.GetList(av, SetBList);
}
function SetBList(response) {
if(response != null) {
var ds = response.value; // 返回集
// 这里很有特色，开始我感觉出错了，怎么js的语法规则跟c#一样啊
// 可见Ajax.dll里面的正则应该写的暴强！不过有一点让人感觉不爽
// 我在测试时，将ds.Tables[0].Rows.lenght写成了ds.Tables[0].Rows.Count
// js会找不到对象的错误。
// 如此等于，我们还是要习惯它的规则，毕竟不完全是c#，它只是定义了一种跟c#
// 非常接近的语法规则而已
if(ds != null && typeof(ds) == "object" && ds.Tables != null) {
alert(ds.Tables[0].Rows.length);
for(var i=0;i<ds.Tables[0].Rows.length;i++) {
var option = document.createElement("OPTION");
option.value = ds.Tables[0].Rows[i].CityCode;
option.text = ds.Tables[0].Rows[i].CityName;
document.Form1.BList.options.add(option);
}
}
}
}
</script>
如此例子便结束了，很多繁复的操作都封装了。我们学到的只是如何用，仅此而已，不过在我们赶项目的时候，确实能带来很多的方便。
补充：按照上面的方式配置，会得到一个异常，就是无法识别AjaxMethod类的异常，我们需要在页面的后台cs文件中，添加定义：
Ajax.Utility.RegisterTypeForAjax(typeof(完整命名空间.AjaxMethod));
除了这里要添加注册定义之外，我们还需要在web.config中添加：
<httpHandlers> <add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax" /></httpHandlers>延伸：我们完全可以将AjaxMethod写成一个公共Page，将调用业务层代码的方法添加进来。如此，便可以不用在那里面定义数据库链接了——我们要得到的仅仅是一个DataTable，而不必关心用什么样的方式得到它。这样的设计与项目框架的结合将更紧密。
扫一扫
919
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
