学习预备资源:
jQuery库
DataLinking插件
JSON 库
Data Linking 给我们提供一个UI控件与数据或者对象连接的功能。这就意味着当控件被更新,数据对象也被更新。同样,数所对象更新,控件也会立即更新。(互相链接)
下面介绍两种链接方法:单向链接(One way Linking)与双向链接(Two way Linking)。
One way Linking,就是把UI控件与某个对象关联,当控件更新这个对象跟着更新。这样我们就可以方便的在C#后台事件中处理这些对象就行了,不用再去取UI控件值。
例如下面的table
<table>
<tr>
<td colspan="2"><h2>Add Vehiclie to Vehicle Store</h2></td>
</tr>
<tr>
<td>Vehicle Name</td>
<td><input id="txtVName" type="text" /></td>
</tr>
<tr>
<td>Price</td>
<td><input id="txtVPrice" type="text" /></td>
</tr>
<tr>
<td><input id="btnShow" type="button"
value="Show updated object" onclick="ShowUpdatedData();"/></td>
<td><input id="btnAdd" type="button"
value="Add vehicle to store" onclick="AddVehicle();"/> </td>
</tr>
</table>
我们做了两个boxes来记录车辆的名称与价格,做了两个按钮。一个用来显示对象,另一个添加对象。看以下javascript代码。
var vehicle = {};//定义一个对象(车辆对象)。
//通过车辆对象链接UI控件
$(document).ready(function() {
$(vehicle)
.linkFrom('Name', '#txtVName', 'val') //linkForm单向链接
.linkFrom('Price', '#txtVPrice', 'val',
//这个添加验证表示除0到9以为小数点之外的会替换为空,在提交给对象vehicle会通过验证。
function(value) { return value.replace(/[^0-9.]/g, "") }
);
});
定义了一个全局变量vehicle对象,通过linkForm方法来链接UI控件。下面写出服务端的jQuery Ajax Call代码。
function AddVehicle() {
var inputs = new Object();
inputs.vehicle = JSON.stringify(vehicle);//把车辆对象序列化为json的string对象
$.ajax({
type: "POST",
url: "AddVehcle.aspx/AdVehicle",//注意/线前面是页面名称,后面是后台方法名称,方法名称前必须加[WebMethod()]
contentType: "application/json; charset=utf-8",
data: JSON.stringify(inputs),
dataType: "json",
success: ShowStatus,
error: AjaxFailed
});
}
function ShowStatus(result) {
alert(result.d);
}
function AjaxFailed(result) {
alert('Ajax failed');
}
//to show the state of the object
function ShowUpdatedData() {
alert([vehicle.Name, vehicle.Price]);
}
最后让我们看下服务端代码
public partial class AddVehicle : System.Web.UI.Page
{
public static List<vehicle> lstVehicle = null;
protected void Page_Load(object sender, EventArgs e)
{
}
//这个方法添加一个车辆对象
[WebMethod()]
public static string AdVehicle(string vehicle)
{
if (lstVehicle == null)
{
lstVehicle = new List<vehicle>();
}
//通过JAVASCRIPT序列化为List对象。
JavaScriptSerializer ser = new JavaScriptSerializer();
Vehicle objVehicle = ser.Deserialize<vehicle>(vehicle);
lstVehicle.Add(objVehicle);
return "Vehicle added successfully";
}
}
public class Vehicle
{
public string Name { get; set; }
public decimal Price { get; set; }
}
这样就完成了一个客户端到服务器端的通信。
Two Way Linking,这种方法,你可以改变对象值,然后UI控件值也会跟着变化,所以是双向的链接。这种特性用于编辑或者查询比较有用。例如你搜索某些数据然后想更新这些数据。通过这种方法你可以更新UI或者对象值来更新数据。
现在我们创建一个Person实体类,如下:
public class Person
{
public string Name { get; set; }
public int Age { get; set; }
public string SSN { get; set; }
public string Gender { get; set; }
public string ContactNo { get; set; }
}
Aspx页面代码如下:
<table>
<tr>
<td> Name </td>
<td>
<input id="txtPersonName" type="text" />
<input id="Button1" type="button" value="GetPersonDetails"
οnclick="PopulatePersonDetails();"/>
</td>
</tr>
<tr>
<td colspan="3"> Person Details</td>
</tr>
<tr>
<td>Name</td>
<td><input id="txtName" type="text" /></td>
</tr>
<tr>
<td>Age</td>
<td><input id="txtAge" type="text" /></td>
</tr>
<tr>
<td>SSN</td>
<td><input id="txtSSN" type="text" /></td>
</tr>
<tr>
<td>Gender</td>
<td><input id="txtGender" type="text" /></td>
</tr>
<tr>
<td>Contact Number</td>
<td><input id="txtCNo" type="text" /></td>
</tr>
<tr>
<td colspan="2">
<input id="Button3" type="button" value="Show Updated JS Object"
οnclick="ShowUpdatedData();"/>
<input id="Button2" type="button" value="Add/Update Person"
οnclick="UpdateorAddData();"/>
</td>
</tr>
</table>
你可以看到,我为每个person属性提供了一个box,在页头还提供一个input box 用来输入用户名和一个按钮用来从服务器查询数据。
首先定义一个javascript全局变量:
var person = {};
Data Link 代码如下:
//对象链接到UI控件
$(document).ready(function()
{
$(person)
.linkBoth('Name','#txtName','val') //linkBoth双向连接
.linkBoth('Age','#txtAge','val')
.linkBoth('SSN','#txtSSN','val')
.linkBoth('Gender','#txtGender','val')
.linkBoth('ContactNo','#txtCNo','val');
});
从以上可以看出,person对象用linkBoth方法连接,linkBoth使用三个参数。第一个为person对象的属性名称,第二个为UI控件ID名称,第三个val,表示value值,不用管。
以下就是Javascript向服务器提交的方法:
// 通过person名称从服务器取person详细数据person name
function PopulatePersonDetails() {
var inputs = new Object();
inputs.name = document.getElementById('txtPersonName').value;
$.ajax({
type: "POST",
url: "EditPerson.aspx/GetPerson",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(inputs),
dataType: "json",
success: AjaxSucceeded,
error: AjaxFailed
});
// ajax 回调 succeeded 函数
//如果没有找到对象会提示一个错误消息
//'Person Not found' 否则更新person对象
function AjaxSucceeded(result) {
if (result.d == 'null')
alert('Person Not found');
else
$(person).attr(JSON.parse(result.d));
}
//如果AJAX失败则调用这个函数
function AjaxFailed(result) {
alert('Ajax failed');
}
}
//下面则是后台代码用于添加或者更新数据的javascript代码
//这个函数获取的全局person对象
//person对象总是通过UI异步发送数据到服务器来添加或者更新
function UpdateorAddData() {
var inputs = new Object();
inputs.person = JSON.stringify(person);
$.ajax({
type: "POST",
url: "EditPerson.aspx/AddUpdatePerson",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(inputs),
dataType: "json",
success: ShowStatus,
error: AjaxFailed
});
}
//This function is to show the status whether a new person is added or updated
function ShowStatus(result) {
alert(result.d);
}
现在我们来看服务器后台代码:
public partial class EditPerson : System.Web.UI.Page
{
public static List<person> lstPerson = null;//List Person对象,全局变量
protected void Page_Load(object sender, EventArgs e)
{
}
//这个方法返回搜索的信息
[WebMethod()]
public static string GetPerson(string name)
{
InitializePersons();
JavaScriptSerializer ser = new JavaScriptSerializer();
// ser.Serialize(persons);
return ser.Serialize(lstPerson.Find(p => p.Name == name));//Linq查询
}
//这个方法用于更新或者添加基于SSN为唯一ID来更新
[WebMethod()]
public static string AddUpdatePerson(string person)
{
string status;
JavaScriptSerializer ser = new JavaScriptSerializer();
Person obj = ser.Deserialize<person>(person);
InitializePersons();
Person per = lstPerson.Find(p => p.SSN == obj.SSN);
if (per == null)
{
lstPerson.Add(obj);
status = "New person added";
}
else
{
// Updating the person
lstPerson.Remove(per);//删除原来的person
lstPerson.Add(obj);//添加新的person来实现修改
status = "Person updated";
}
// ser.Serialize(persons);
return status;
}
//初始化Persons
public static void InitializePersons()
{
if (lstPerson == null)
{
lstPerson = new List<person>()
{
new Person { Age = 27, Name= "Brij",
Gender="Male", ContactNo="123456789",
SSN="CC123456"},
new Person { Age = 18, Name = "Ravi",
Gender = "Male", ContactNo = "987654321",
SSN="AB654321"}
};
}
}
}
到至己完成一段落。作于2011-3-10 日22:40。