Designing and coding

Menu

Tag Archives: jQuery

I have seen many questions in the forums that how can we bind the CheckBox list from the database via Ajax. There could be many ways to do in an ASP.NET but I will be using the one of the most efficient options available .

In this post, I’ll be using jQuery Ajax to get the data from the server (that will be fetch the data from database) and then will create the CheckBox list dynamically.

Now a days, most of the web developers are working on mainly Client side programming to make the web more responsive, intuitive and user friendly. So avoiding the code behind, accessing the server via Ajax, passing and getting the data in JSON format, generating the DOM elements at Client side etc becoming very common these days and these all prepared the ground for many Client side libraries to come up and that’s what we are seeing now a days.

One of the most popular Client side library, jQuery, provides a lot of wrapper methods for writing quick and easy Client side code. You guys must have used jQuery ajax to initiate a ajax call and passing data to and fro in JSON format. As you must be knowing that XMLHTTPRequest is the base for all Client side ajax call. All the Client side libraries provides a wrapper over it for making any AJAX call. So I’ll start with an example

I have created an empty web application and added a web page . I also added a jQuery script file. I created one small web method GetRatingValues at code behind that returns a list of numbers (Gave a name called rating). So let’s see the code and get it running

Now if you run this code. It’ll display the html content of the page. I ran it and it displayed as expected

Let’s also see the HTTP Headers that I have taken via firebug

HTTP Headers

Also let’s see the response of the URL

If you see the encircled area in both the above picture they are pointing to localhost.

If you see the URL in both AJAX call they are pointing to same domain. But have you ever tried to initiate an jQuery AJAX call to some other domain .

What I have done here, I am running my application from IIS and I added a domain for Testing (localtest.me) in IIS. So I changed the URL in my AJAX call as

But now if you try to run this code, it would not run. Because now the URL targeting to other domain. Let’s see again the HTTP Headers and response.

Let’s see the Response

Now if you see here in the above picture the encircled area, both are different and pointing to different domain and didn’t get any result.

But why?

As I already described that every AJAX request is built on XMLHTTPRequest object and XMLHTTPRequest has some security limitation. It follows same-origin policy, it means that any HTTP request using XMLHTTPRequest initiated by a web application, can be processed only if it loaded from same domain/origin. If it requests to any other domain it will not be successful.

But as now we make lots AJAX call and some times to third party web services, it becomes hurdle to our development. To overcome this issue W3C has come up with feature called Cross-Origin Resource Sharing (CORS) which enables cross site data transfer without compromising security. To use this , we require to add few new HTTP headers that allows to add set of other origins/domains and the content type that is required to transfer.

Also let’s understand what is meant by other domain/origin?

If I have a domains like mydomain.com and mydoman1.com so as it is clear from seeing that these are different domain. Similarly subdomains like abc.mydomain.com and xyz.mydomain.com are also considered as from different origin/domain. Also at certain times the url also contains port number so if the port number is different, it also be treated as from different origin.

So as a thumb rule, you can say if the portion of URL before first single slash is different, it would be considered as from different origin and same origin policy would not be applied.

So now, let’s again back to our example. To run our example, we need to add these custom headers. ASP.NET provides a way to add these new headers by adding some config entry. so I added the following in my web.config

Now if we run the code it runs successfully. Let’s analyse again the HTTP Headers and Response.

And the Response

Now if you see the dark encircled area, they are pointing to different domain and yet got the response. But the successful result caused by the thin encircled area in header pic, which is a new header got added. And we made this entry in web.config

But what would happen if I change the URL that I used in my first sample as

And if you run it again, It would not run. because in my last example, I was using Get Request. For Post (type: “Post”)request I can transfer some data back and forth to server. So here I need to define one more entry in web.config that will add another header in the request as

Now after adding it, if you run the code then it’ll run like a charm.

One more point, I’ll make a here that providing * for Access-Control-Allow-Origin is not a good Idea, because it allows to access any other domain URL so it’s if you specify the particular domains here.

I think, you all must have found the above articles very useful and will be using in near future or some of you might have started using this. I would request you all that to share your views about the article, which will be very helpful for me in better writing.

Now, In this article, I am going to discuss the last feature that is Globalization. When we say Globalization, the thing that comes in our mind is resource files. ASP.NET itself provides very good facility to cater the needs of Globalization.But which requires a postback, so it doesn’t look nice and not good in performance as well.

jQuery also provides us a way to implement the globalization, with supported plugin.

Again, I am writing few common points that I wrote in my last two Articles, for the new readers.

As per MSDN “Globalization is the process of designing and developing
applications that function for multiple cultures.”

So Globalization allows us to develop an application, which provides the option to localize the application in different cultures/languages. Now as we are working in global environment and serving the entire world, it becomes the necessity, to provide the globalization feature to our application.

So in this article, I am going to discuss, How we can provide the Globalization feature with the help of jQuery.

So in this article, I am going to discuss, How we can utilise the Globalization feature of jQuery.

jQuery provides us the power to format and parse date, number and currencies in different cultures. jQuery plugin defines over 350 cultures that currently supported by the plugin.

There are languages those are common in few regions/countries, but the formatting of numbers, currencies and date varies. Like English is spoken in several countries USA, UK and other various European countries. For these we have several cultures defined, that is used to identify the uniqueness amongst these countries.

This plugin comes in two flavors.

One file jQuery.glob.all.js includes around 350 cultures currently. So with this we need to include only this file for all
the cultures supported by the plugin. Another way,Plugin has also culture specific js files, that can included based on cultures that are supported by the application.

jQuery.culture:This holds the culture information that is currently set and is used in default case, i e while formatting various values this culture is used if no culture is specified.

jQuery.preferCulture:This method is used set the culture that user prefers and this culture is used for all the formatting, parsing etc done on the page. Actually as the method name suggests, it selects the best match culture that’s JavaScript is included in the page.

jQuery.format:
This method is used to format the date, number and currency in the given format string. This method is widely used.

jQuery.findClosestCulture:
This method works in similar way as preferCulture but it returns the best matching culture and don’t set the jQuery.culture to it.

jQuery.localize:
This method allows us to extend the specific culture and returns or set
the localized value.

There are many more functions like jQuery.parseInt, jQuery.parseFloat, jQuery.parseDate etc provided by the plugin, that can be used for several specific purposes.I have discussed some of them.

First Example:: In this example, I am displaying the stock deatils of Infosys on a specific date. It includes the price and number of unit sold on a specific date in two different cultures. Let’s see the running application.

As you can see above,I have included culture specific files instead of one common files for all the cultures. Because the size of common files for all 350 cultures could be a performance overhead. As we know, that these are specific
cultures that are going to be used in the application, then we should go for culture specific files.

In this code, I have taken a dropdown with multiple cultures. One can select the desired culture and page will be modified accordingly. I have used the same form but I have called preferculture method based on the selection of dropdown.

Sometimes user also set culture preferences in the browser. And lots of applications rely on it. So we can also read the culture information from the browser and can load the page accordingly. To get the culture information we
can use the following.

In my last article, I discussed about the jQuery Templating. You can view that Article here .

So I think, you all must find Templating article very useful. Because, by the time
web applications development is evolving, we are moving towards Client side
development/scripting, to provide fast and very trendy/flashy look and feel.

So in this article, I am going to discuss another very cool feature, ie
Data linking.This helps us linkling the data and the UI.

jQuery is a JavaScript library that works on top of the JavaScript.
jQuery provides a very simple way for HTML document traversing,
DOM manipulation, event handling, animating, and Ajax interactions for
rapid web development. That could have been very complex while working
with normal JavaScript.

jQuery is becoming more and more popular day by day. Even it was integrated
with VS2008 and also available with VS2010.
jQuery is open source. Due to its features,
Microsoft started to support jQuery team and also working with them,
to provide better web based tools to their Clients.

Data kinking provides us a way, to link our data/objects to UI controls.
Means, if the controls get updated, the underlying data object would
also be updated. In the same way, if the data objects get updated,
the controls on UI will also get updated (In case of two way linking).

Means once you linked your data with the controls, you don’t need think about
the data object. The syncing between data object and your UI will be taken care
by the jQuery plug in.

So you can imagine, you dont need to get the updated data from the
controls and update the object, which is required at the time
of saving the data at server. Which requires lot more code to be
written and also error prone.

One can link the UI controls to some object. Means the object will
always be in sync with UI. Whenever the Data in UI will get changed the underlying
object will also get updated. So one need not worry about the data once it is
done, one can send the object directly to the server for further processing

I have explained it with one sample.

In my example, there is form named as Add Vehicle, where user can enter the
Vehicle name and its price, then click on the Add Vehicle to add the vehicle
at server side.
One can also see the state of the underlying object at any point of time, using
Show Updated Object button.
Now lets go through the code.

There is also a good feature provided. We may not
want to save the data as we show at UI. Like if there is some price or quantity,
we may want to format the quantity in some manner before saving. So for that
we can put some converters at the time of linking as

It also do all the things as above but have one more feature. You can also update the object from code also, as soon as object will get updated that will also be reflected in the UI.

This feature can be very use full in editing/searching feature.You searched
some data and now want to update it. Now you can update UI as well as underlying
object, both UI and data will always be in sync.

I have discussed it with one sample

In my example, Lets we have a list of person at server. One can fetch the
details of an existing person.One also update the existing person or can add a
new person.

As you can see, in my page I have put the input boxes for every property of
person.

At the start of the page I have also, provided a input box to enter the person name and
a button to fetch the requested person from the server.

I have provided two more buttons, One to see the updated objects in javascript alert
and another one to update the data at the server. It actually looks the list for the SSN if it found then update the existing record else add the new
person. We’ll see the code in a moment.

Now lets move the Javascript code that is written.
The code that is used to link the data

First I have declared one global object that object will be linked to the UI controls
asvar person = {};

As from the above you can see, that person object is used and
linked using linkBoth method, which takes three parameters
first the name of the property of the object,
second the id of the control with sign #
third val
Now, after this you don’t need to worry about the data, all things will be taken care the
plugin itself.

I have few person data at server.When I am entering and clicking
for getting the person details, UI gets updated. While actually I am making
an Ajax call, to get the person data and updating the underlying object
as discussed in above code.

Rest things as per the Vehicle Store example

I have also to added a button, which one can click to see the state of the person
object at any point of time, when one wants.

jQuery templating is becoming a new buzzword for the new Web applications. One cannot avoid jQuery in web applications. Currently most of the applications are using jQuery heavily. It provides very good look & feel and better performance.

There are a lot of plugins are also available for jQuery, they provides really cool feature. We can provide a very new and trendy look and feel with the help of jQuery. Also, as we are making very rich application, performance is also becoming a key point for our applications. jQuery helps a lot in this regard also. We will be discussing mainly jQuery Templating in this article

jQuery is a JavaScript library that works on top of the JavaScript. jQuery provides a very simple way for HTML document traversing, DOM manipulation, event handling, animating, and Ajax interactions for rapid web development. That could have been very complex while working with normal JavaScript.

jQuery is becoming more and more popular day by day. Even it was integrated with VS2008 and also available with VS2010. jQuery is open source. Due to its features, Microsoft started to support jQuery team and also working with them, to provide better web based tools to their Clients.

As we are working on Client server architecture, most of the things are done by the server itself. Server sends the HTML response to the Browser and browser just display it. Earlier, we were not doing lot of things at client side, Normally, some validation and little bit more at client side. With the help of Ajax call from Client side and retrieving data in a very convenient format in JSON, it really becomes easy, to start moving server side code to Client side. Means the data travelling from server to Client, is not the whole HTML response but it is just data that we have to show in different HTML controls.

Now with the help of jQuery, make the HTML elements and adding it to the DOM. Now I am explaining one example. In my example, I am displaying list of Persons. And also adding a person later.Displaying Data:So here, first I am showing the details of Persons. The data is coming in JSON format with the help of Ajax call, in document.ready function.Lets move step by step:I have created a Client template to display the person data.The template is:

Note: One should keep in sync the name of the properties
of the class and used in template one.

Nested Templates also works same as above but here we’ll be using one template
in the other.This type of requirement is very common, when we need to show
the details of any item one to many or many to many mapping.

So here, I have discussed it with a sample example.

Here i have an employee class which has a list of address, Means an employee can
belong to multiple addresses. My employee and address class are like

As I already discussed in Introduction section, that jQuery templating provides us a very rich feature to generate the UI without writing much code and in efficient manner. So one should use templateing feature wherever possible. This feature may be very good, where we display the lot of data and also it may get updated. I used it in my application, in almost every page and found it very efficient than server side code.