Jquery Data Link Plugin学习笔记 （LiYanguo）

学习预备资源：

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"

           onclick="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"

           onclick="ShowUpdatedData();"/>

           <input id="Button2" type="button" value="Add/Update Person"

           onclick="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。