ASP.NET4.0 Ajax实例 –Javascript调用 ADO.NET Data Service实现数据库操作

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