jQuery Data Linking in ASP.NET
We already know that Microsoft actively supports the jQuery project and is direct contributor to the three yet new but well-known plugins:
- jQuery Templates
- Data Linking
- Globalization (jQuery Glob)
Each of these plug-ins has very good purpose that helps make developer’s life easier by providing particular way to speedup the web development time and resolve some of the issues that developers have had while working on each of the areas that these plug-ins cover.
Since many developers have already written articles or blog posts regarding Microsoft’s jQuery Templates plug-in, in this blog post I will show the real beauty of using Data Linking plugin when working with forms in an ASP.NET web application. However, I promise that soon I will also write some interesting blogs regarding the other two, jQuery Templates and Globalization.
What is the purpose of jQuery Data Linking plugin?
With simple words, jQuery Data Linking plugin purpose is to link data between forms that exists in the website page and the data object in our javascript code. One of the things which was always boring to me was to map each time the text box fields from my forms (especially when I have had quite large number of text box or other input fields) in my java script code. This plugin helps in doing this on a very clean way with only one/two lines of code.
How to use?
Here is one simple example that will show the usage of the jQuery Data Linkin plugin.
Lets suppose we have the following form in our page:
First Name <input id="firstName" type="text" /> <br />
Last Name <input id="lastName" type="text" /> <br />
Phone <input id="phone" type="text" /> <br />
Email <input id="email" type="text" /> <br />
City <input id="city" type="text" /> <br />
</form>
So, I have simple form with several text box and radio button fields.
Now, lets say I want to access some of these fields. In a traditional JavaScript way, we would need to do something like this
var firstName = document.getElementById(“firstName”).value;
Then, if we need to set the value back in the form input field, we can do like this
document.getElementById(“firstName”).value = “Hajan”;
This was in plain JavaScript. On the other hand, using jQuery the statement is shortened and we can do the same like this
var firstName = $(“#firstName”).val();
However, if we have forms with lots of input fields or multiple forms within our page, the code may easily get messy. So, here is how we can just handle it with data linking and make our code cleaner and link the data with our object inside the js code.
First, we need the two main scripts – the jQuery Core library and the Data Linking library (about 6kb).
<script src="Scripts/jquery-datalink.js" type="text/javascript"></script>
Next, here is how we can create link with our myForm with only one line of code
$("#myForm").link(person);
We have only one empty person object and the next line is the code which does the magic here.
So, what we have achieved? What we can do with this? The person object now has the data from the form, so we can easily do this
alert(person.firstName); // alert: Hajan
You see… its quite easy to access the element values now. I can access all by using person.elementId since the form element values and the person object data are linked and syncrhonized.
ex: person.firstName, person.lastName, person.phone, person.email, person.city…
Lets now assume I want to change the mapping names of the form to my person object. For example, I want firstName to be just Name in my person object.
Name: "firstName",
Surname: "lastName",
Phone: "phone",
Mail: "email",
City: "city"
});
Now, we will need to change the statements to add and retrieve data respectively to
alert(person.Name);
This is the main concept of jQuery Data Linking plugin and the main way to work with it. Besides link(), the plugin also has unlink() function which you can use to unlink the existing data objects to forms.
Here is the complete code with Unlink() example
$("#myForm").link(person, {
Name: "firstName",
Surname: "lastName",
Phone: "phone",
Mail: "email",
City: "city"
});
$(person).data("Name", "Hajan");
alert($("#firstName").val()); //getting the actual form value - result Hajan
$("#myForm").unlink(person);
$(person).data("Name", "New Name");
alert($("#firstName").val()); //getting the actual form value - result Hajan (its not 'New Name' since we did Unlink)
As you can see by the comments inside the code, after I did unlink we cannot set the New Name value to the Name object since its unlinked with the form.
That’s it!
Hope it was useful to you.
Regards,
Hajan