jQuery to Web Service AJAX
This is a bit wacky, but in the end it all makes perfect sense.
jQuery has two functions you could use: get and put, but the function you’ll end up using is.ajax.
Example:
Let’s say I want to use JQuery to fill a Drop Down list on my ASP.Net page.
Here’s the basics of how that flows:
On whatever event (in this example it is a button click) you will wire up a JQuery function to fire off an AJAX call.
On the web, most examples call a PHP page, and that’s not what we want to do.
HTML:
<body> <form id="form1" runat="server"> <div> <asp:DropDownList ID="MyDropDownList" runat="server"> </asp:DropDownList> <asp:Button ID="FillDropDownListButton" runat="server" Text="Fill DropDownList" /> </div> </form> </body>
JQuery function to tap into the click event for the button:
<script type="text/javascript">
$(function () {
$('#<%= FillDropDownListButton.ClientID %>').click(function () {
doAjaxCall('/Test.asmx/FillDropDownList');
return false;
});
JQuery function to do the AJAX call:
function doAjaxCall(url, data) {
$.ajax({
type: 'POST',
url: 'Test.asmx/FillDropDownList',
data: "{}",
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: successHandler,
error: ajaxFailed
});
}
You can see that this is using the HTTP POST protocol, and thus, the function being called must either be an actual web page .aspx or a user control .asmx/.svc or it could be the rarely seen .ashx (not covered here). It cannot be a library .cs because that doesn’t communicate via HTTP protocol.
Also note the data object being passed is an undefined empty object.
The url has the page/function. That function must be a web method.
The success function:
function successHandler(response) {
var myDropDownList = $('#<%= MyDropDownList.ClientID %>');
myDropDownList.find('options').remove();
var data = response.d;
var doc = $('<div></div>');
for (var i = 0; i < data.length; i++) {
doc.append($('<option></option>').
attr('value', data[i].CountryID).text(data[i].CountryName)
);
}
myDropDownList.append(doc.html());
doc.remove();
}
The failure function:
function ajaxFailed(xmlRequest) { alert(xmlRequest.status + ' nr ' + xmlRequest.statusText + 'nr' + xmlRequest.responseText); }
});
</script>
Now, as for the Test.asmx:
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
[ScriptService]
public class Test:System.Web.Services.WebService
{
[WebMethod]
public Collection<Location> FillDropDownList()
{
var locations = new Collection<Location>
{
new Location {CountryID = 0, CountryName = "Please Select"},
new Location {CountryID = 1, CountryName = "Country1"},
new Location {CountryID = 2, CountryName = "Country2"},
new Location {CountryID = 3, CountryName = "Country3"},
new Location {CountryID = 4, CountryName = "Country4"},
new Location {CountryID = 5, CountryName = "Country5"}
};
return locations;
}
public class Location
{
public int CountryID { get; set; }
public string CountryName { get; set; }
}
}
}
So, while I’m returning a collection from the code, it could also make a call to SQL or the WebCache, etc.
Pingback: JQuery Addons: dataTables (a JQuery GridView) | Mike Duke Hall's .Net blog