ASP.NET4.0 Ajax实例 –Javascript调用 ADO.NET Data Service实现数据库操作
出于安全原因Javascript本身没有数据库操作的能力，在ASP.NET Ajax 4.0的Ajax Library中为开发人员提供了AdoNetDataContext类，利用该类，可以轻松实现Javacript的数据库操作。
1. 实现步骤
1> 建立测试数据库
2> 为测试数据库生成EntityFrameWork实体集合
3> 添加WCF Data Service
4> 编写JS代码
2. 实现
1> 建立一个ASP.NET网站，并添加测试数据库，如下图所示：
2> 在网站中添加EntityFrameWork实体集合，模板如下图所示：
生成的Entity如下所示：
其中主键为uid
3> 添加WCF Data Service，并修改其代码，如下所示：
using System;
using System.Data.Services;
using System.Data.Services.Common;
using System.Collections.Generic;
using System.Linq;
using System.ServiceModel.Web;
public class TestDataService : DataServicetestEntities>
{
// This method is called only once to initialize service-wide policies.
public static void InitializeService(DataServiceConfiguration config)
{
// 设置对所有实体对象可以进行任意操作
config.SetEntitySetAccessRule("*", EntitySetRights.All);
config.DataServiceBehavior.MaxProtocolVersion = DataServiceProtocolVersion.V2;
}
}
4> 添加JS代码
JS代码中需要引用Ajax Library的库，可以去http://ajax.codeplex.com/releases/view/35895进行下载，也可以通过CDN方式直接进行Web引用，VS2010已经实现了CDN方式引用JS文件的智能感知。下面的代码是通过CDN方式引用的。
为了操作结构更加清楚，首先我们来编写一个JS类，将所有的数据库操作封装起来，JS类代码如下：
/// <reference path="http://ajax.microsoft.com/ajax/beta/0911/Start.debug.js" />
function DBManager(initedCallback) {
this._InitedCallback = initedCallback;
this._dataContext = null;
this._dataCache = null;
//获取指定的类型
_this = this;
Sys.require([Sys.components.adoNetDataContext], function () {
_this._dataContext = Sys.create.adoNetDataContext({
serviceUri: "TestDataService.svc"
});
_this._InitedCallback();
});
//添加用户
this.AddUser = function (uid, pwd, getUserCallback) {
var newUser = this.CreateNewUser(uid, pwd);
this._dataContext.insertEntity(newUser);
this._dataContext.saveChanges(function (result) {
//这里不仅仅要添加DB中的数据，
//还要添加内存中的数据
this._dataCache.add(newUser );
getUserCallback("添加用户成功！");
}, function (result) {
getUserCallback("操作错误！");
});
}
//创建新用户实体
this.CreateNewUser = function (uid, pwd) {
var newuser = this._dataContext.createEntity("users");
newuser.uid = uid;
newuser.pwd = pwd;
return newuser;
}
//获取全部用户
this.GetAllUsers = function (getAllUserCallback) {
this._dataContext.fetchData("users", null, null, "POST", function (result) {
_this._dataCache = result;
//这里要注意，一定要将_this ._dataCache
//标记为Observable，不然无法使用其add和remove方法
Sys.Observer.makeObservable(_this ._dataCache);
getAllUserCallback(result);
}, function (result) {
alert(result);
});
}
//获取指定用户
this.GetUser = function (uid) {
var currentUser = null;
var users = this._dataCache;
for (var i = 0; i < users.length; i++) {
if (users[i].uid == uid) {
currentUser = users[i];
break;
}
}
return currentUser;
}
//删除用户
this.DeleteUser = function (uid, deleteUserCallback) {
var user = this.GetUser(uid);
this._dataContext.removeEntity(user, deleteUserCallback);
this._dataContext.saveChanges(function (result) {
//这里不仅仅要删除DB中的数据，
//还要删除内存中的数据
_this._dataCache.remove(user);
deleteUserCallback("OK");
}
, function (result) { deleteUserCallback("Failed"); }
);
}
//修改用户
this.ModifiyUser = function (uid, pwd, modifyUserCallback) {
var user = this.GetUser(uid);
if (user != null) {
//这里如果直接修改user对象中的数据，将无法同步到DB中
// 使用Sys.Observer.setValue方法可以将数据同步到DB中
Sys.Observer.setValue(user, "pwd", pwd);
this._dataContext.saveChanges(modifyUserCallback("修改成功！"));
return true;
}
return false;
}
}
5> 在页面中添加一个Ajax的DataView网格用来显示数据，HTML如下所示：
<div id="UsersView" class="sys-template">
<ul>
<li><span>{binding uid}</span>
<input type="text" name="tbxPwd" sys:value="{binding pwd}" />
</li>
</ul>
</div>
<fieldset style="width: 203px">
<legend>添加用户名 </legend>用户名<input id="tbxUID" type="text" /><br />
密码<input id="tbxPWD" type="text" /><br />
<input type="button" name="btAddUser" value=" " onclick="return AddUser()" />
</fieldset>
<fieldset style="width: 203px">
<legend>修改用户</legend>用户名<input id="tbxmUID" type="text" /><br />
密码<input id="tbxmPWD" type="text" /><br />
<input type="button" name="btAddUser" value=" " onclick="return ModifyUser()" />
</fieldset>
<fieldset style="width: 203px">
<legend>删除用户</legend>用户名<input id="tbxdUID" type="text" /><br />
<input type="button" name="btAddUser" value=" " onclick="return DeleteUser()" />
</fieldset>
6> 完整的HTML代码如下所示：
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>
<title></title>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/beta/0911/Start.debug.js"></script>
<script src="DBManager.js" type="text/javascript"></script>
<script type="text/javascript">
//创建DBManager实例
var dbmanager = new DBManager(InitCallback);
var dataView = null;
//DbManager实例创建成功后回调的方法
function InitCallback() {
Sys.require([Sys.components.dataView], function () {
//创建一个DataView，并且获取所有的用户数据
dataView = Sys.create.dataView("#UsersView");
//获取所有用户数据
dbmanager.GetAllUsers(GetAllUserCallback);
});
}
//获取所有用户数据成功后的回调
function GetAllUserCallback(users) {
dataView.set_data(users);
}
function ModifyUser() {
var uid = $get("tbxmUID").value;
var pwd = $get("tbxmPWD").value;
dbmanager.ModifiyUser(uid, pwd, function (result) {
alert(result);
//刷新列表
dataView.refresh();
});
}
function AddUser() {
var uid = $get("tbxUID").value;
var pwd = $get("tbxPWD").value;
dbmanager.AddUser(uid, pwd, function (result) {
window.alert(result);
dataView.refresh();
});
}
function DeleteUser() {
var uid = $get("tbxdUID").value;
dbmanager.DeleteUser(uid, function (result) {
window.alert(result);
dataView.refresh();
});
}
</script>
<style type="text/css">
.sys-template
{
display: none;
}
</style>
</<head>
<body>
<div id="UsersView" class="sys-template">
<ul>
<li><span>{binding uid}</span>
<input type="text" name="tbxPwd" sys:value="{binding pwd}" />
<li>
<ul>
<div>
<fieldset style="width: 203px">
<legend>添加用户名 </legend>用户名<input id="tbxUID" type="text" /><br />
密码<input id="tbxPWD" type="text" /><br />
<input type="button" name="btAddUser" value=" " onclick="return AddUser()" />
<</fieldset>
<fieldset style="width: 203px">
<legend>修改用户</legend>用户名<input id="tbxmUID" type="text" /><br />
密码<input id="tbxmPWD" type="text" /><br />
<input type="button" name="btAddUser" value=" " onclick="return ModifyUser()" />
<</fieldset>
<fieldset style="width: 203px">
<legend>删除用户</legend>用户名<input id="tbxdUID" type="text" /><br />
<input type="button" name="btAddUser" value=" " onclick="return DeleteUser()" />
<</fieldset>
</<body>
</<html>
这次就聊到这儿，如何大家需要技术支援，请给我发Email：warensoft@foxmail.com