 <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>

这里，我有两个输入框用于输入车辆名称和价格，以及两个按钮，一个用于显示对象，另一个用于添加对象。现在让我们转到 Javascript 代码

 var vehicle = {};
 //linking the UI controls with vehicle object
        $(document).ready(function() {
        $(vehicle)
            .linkFrom('Name', '#txtVName', 'val')
            .linkFrom('Price', '#txtVPrice', 'val')
    });

在这里，我有一个全局变量 `vehicle`，它通过 `linkForm` 方法与插件关联，如上所示。我还编写了使用 jQuery Ajax 调用在服务器上添加数据的代码，如下所示：

 function AddVehicle() {
        var inputs = new Object();
        inputs.vehicle = JSON.stringify(vehicle);
        $.ajax({
            type: "POST",
            url: "AddVehcle.aspx/AdVehicle",
            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)
    {

    }
    //This method adds one vehicle
    [WebMethod()]
    public static string AdVehicle(string vehicle)
    {
        if (lstVehicle == null)
        {
            lstVehicle = new List<vehicle>();
        }
        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; }
}

上述代码是自解释的。`AdVehicle()` 用于通过 Ajax 调用添加车辆。现在让我们运行应用程序。这里我输入了一个 `vehicle` 的数据。现在当我点击查看更新的对象，`ShowUpdatedData` 后，可以看到 `vehicle` 对象如下：

Converters

还有一个很好的功能提供。我们可能不希望按照我们在 UI 上显示的方式保存数据。例如，如果有价格或数量，我们可能希望在保存之前以某种方式格式化数量。为此，我们可以在链接时放置一些转换器，如下所示：

 $(document).ready(function() {
    $(vehicle)
        .linkFrom('Name', '#txtVName', 'val')
        .linkFrom('Price', '#txtVPrice', 'val',
        //Converter that will be called before updating the underlying object
        function(value) { return value.replace(/[^0-9.]/g, "") }
        );
     });

如你所见，我有一个带 `Price` 的转换器，它将只返回数字和小数点。让我们看看它的运行效果

这里所做的就是从 `textbox` 中获取值，通过转换器进行转换，然后将其设置为 `vehicle` 对象的 `Price` 属性。

双向绑定

它也做所有上述事情，但还有一个功能。你也可以从代码中更新对象，一旦对象更新，也会反映在 UI 中。

此功能在编辑/搜索功能中非常有用。您搜索了一些数据，现在想更新它。现在您可以更新 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>

如您所见，在我的页面中，我为每个人的属性都放置了输入框。

在页面开始时，我还提供了一个输入框用于输入人员姓名和一个按钮，用于从服务器获取请求的人员。

我提供了另外两个按钮，一个用于在 JavaScript `alert` 中查看更新的对象，另一个用于在服务器上更新数据。它实际上会根据 SSN 查找列表，如果找到则更新现有记录，否则添加新人员。我们稍后会看到代码。现在让我们来看看编写的 Javascript 代码。该代码用于链接数据。首先，我声明了一个全局对象，该对象将链接到 UI 控件，如下所示：

var person = {};

以及用于链接数据的代码如下

//Linking the controls from the object
 $(document).ready(function()
    {
        $(person)
        .linkBoth('Name','#txtName','val')
        .linkBoth('Age','#txtAge','val')
        .linkBoth('SSN','#txtSSN','val')
        .linkBoth('Gender','#txtGender','val')
        .linkBoth('ContactNo','#txtCNo','val');
    });

从上面可以看出，`person` 对象使用 `linkBoth` 方法进行链接，该方法接收三个参数：第一个是`对象属性的名称`，第二个是`带有#符号的控件 ID`，第三个是`val`。现在，在此之后，您无需担心数据，所有事情都将由插件本身处理。我使用的其他 JavaScript 方法如下：

 // To fetch the detail from the server of the entered 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
        });

        // To be called when ajax call succeeded
        //If no object will be found, it'll show an error message as
        //'Person Not found' else call update the person object
         function AjaxSucceeded(result) {
            if (result.d == 'null')
                alert('Person Not found');
            else
                $(person).attr(JSON.parse(result.d));
        }

        //Will be called, if ajax call gets failed somehow.
        function AjaxFailed(result) {
            alert('Ajax failed');
        }
    }

对于在服务器上更新或添加人员对象的功能，我们有以下方法：

//This function get the global variable person object
//which is always sync with UI and sends it
//to server to add/update
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);
    }

由于我已经将对象链接到 UI 控件，所以我只是选择或更新 `person` 对象，该对象始终提供最新且同步的数据。另外，让我们看一下服务器端代码

public partial class EditPerson : System.Web.UI.Page
{
    public static List<person> lstPerson = null;
    protected void Page_Load(object sender, EventArgs e)
    {
    }

    //This method will return the searched person.
    [WebMethod()]
    public static string GetPerson(string name)
    {
        InitializePersons();
        JavaScriptSerializer ser = new JavaScriptSerializer();
        // ser.Serialize(persons);
        return ser.Serialize(lstPerson.Find(p => p.Name == name));
    }

    //This method will add or update a person based on SSN
    [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);
            lstPerson.Add(obj);
            status = "Person updated";
        }

        // ser.Serialize(persons);
        return status;
    }

    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"}
            };
        }
    }
}

现在让我们看看运行中的应用程序，我在服务器上有几个人员数据。当我输入并点击获取人员详细信息时，UI 会更新，而实际上我正在进行 Ajax 调用来获取人员数据并更新底层对象，如上述代码中所述。

其余与汽车商店的例子相同。

我还添加了一个按钮，用户可以随时点击它来查看 `person` 对象的状态。

请在附件中找到完整的示例。

结论

正如我在上面的例子中讨论的，我发现这个功能在使用 Ajax 和 jQuery 时非常有用。人们应该根据自己的需求选择单向或双向绑定。

反馈与建议

希望大家喜欢我上面的文章。请分享您宝贵的反馈，这将对我写出更好的文章有很大帮助。

使用 jQuery 进行数据链接

目录