Coming to the process of binding dropdown list using jQuery
Step 1- Add the reference jQuery Library
Prior to being able to use any particular function(s) available in jQuery, it is crucial for you to have the reference for the same within the aspx page. With jQuery 2.0 as the current working version, you can use the below line of code for providing reference of jQuery library within the aspx page:
<script src="/jquery-2.0.js" type="text/javascript"></script>
Step 2- Use a function for fetching data from jQuery Library
Just use the below mentioned function for deriving data from jQuery Library:
<script >
$(document).ready(function () {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "test.aspx/LoadCountry",
data: "{}",
dataType: "json",
success: function (Result) {
$.each(Result.d, function (key, value) {
$("#ddlcountry").append($("<option></option>").val(value.CountryId).html(value.CountryName));
});
},
error: function (Result) {
alert("Error");
}
});
});
Here's an explanation of the above code snippet:
1. $(document).ready(function () {
The above function is executed once the document has been loaded completely on the client machine. It is important to note that a page can't be manipulated securely unless the document is ready.
2. $.ajax({
You can combine jQuery and Ajax for getting and posting data on the server. Here, $.ajax is used for posting data to the sever and fetching data back for binding the same within the dropdown list.
3. type: "POST",
In this tutorial, I've assumed that the page just has two conditions: get and post. The above line of code represents this assumption.
4. contentType: "application/json; charset=utf-8",
This line of code represents as to what the content is encoded in.
5. url: "test.aspx/LoadCountry",
Th above line of code represents that URL holds the address of location where it is connected. So, text.aspx represents the name of page and LoadCountry is the name of method which allows you to connect the URL to database, followed by returning data on execution of jQuery function.
6. data: "{}",
Usually, data is passed the parameters (data) jQuery to code that's associated with the chosen method(here, it is LoadCountry).
7. dataType: "json",
This line of code represents that the all data types used in the explained example are supported by JSON. Some popular data types supported by JSON include: number, boolean, string, value, array, white space, object and many more.
8. success: function (Result) {
$.each(Result.d, function (key, value) {
$("#ddlcountry").append($("").val(value.CountryId).html(value.CountryName));
});
},
In the above code snippet, Success is a pre-defined function available in jQuery. Also, the result is the object value $.Each which works in the form of a continuous loop until the desired values are returned. Within the lines of code:
$("#ddlcountry").append($("").val(value.CountryId).html(value.CountryName));
#ddlcountry is the id of the 'country' drop-down
append($(“”).val(value.CountryId).html(value.CountryName));
represents that new options have been added into the dropdown list and their respective values are represented by value.CountryId and value.CountryName.
9. error: function (Result) {
alert("Error");
Here, Error is also a jQuery function which is executed each time an error result is derived from executing the function.
Now, here is the code behind the above mentioned function:
// Country POCO class public class Country { public int CountryID {get; set;} public string CountryName {get; set;} }
[System.Web.Services.WebMethod] public static List LoadCountry() { return LoadCountries(); }
The above code represents the static type method used for executing the function.
The entire code snippet is shown below:
/// /// This method returns a list of Countries /// /// List public static List LoadCountries() { //create a reference of List. List CountryInformation = new List();
// Creating database context and write Linq query to fetch countries list
using (var Context = new DatabaseContext()) { var list = Context.Country.ToList(); if(list != null && list.Count > 0) { foreach(var item in list) { CountryInformation.Add(new Country() { CountryID = item.CountryId, CountryName = item.CountryName }); } } return CountryInformation; } }
We're done!
OutPut :
