Phil, I'll do my best to help you take this start to finish.
First, in your page, declare a static method with the WebMethodAttribute decorator. The method must be static in order to be invoked from an AJAX call. This method will accept the asynchronous request and the data payload you send:
[WebMethod]
public static void DoWork(Dictionary<string, object>[] sites)
{
using (MyDataContext db = new MyDataContext()) {
foreach (var item in sites) {
db.MyItems.InsertOnSubmit(new MyItem {
Url = item("url"),
Description = item("description"),
Language = item("language")
});
db.SubmitChanges();
}
}
}
In here you can do your work to insert each item into the database, or whatever operation it is you intend to do. If you'd like, your method could even return a value that would be handled by a success callback function provided as an option to the jQuery $.ajax() method.
To consume this method using AJAX requires a few very specific parameters to jQuery. These constraints are unique to the way ASP.NET handles AJAX requests, so this would not be true of a call for something like PHP, ColdFusion, etc:
- The method type should always be a
POST.
- Your expected return type should be specified as
json.
- The data option should always be a string value, not an object, so that is why we make a call to
JSON.stringify() to get the JSON string representation of an object.
- If you are not passing parameters to the method, you should always provide an empty object's string representation,
"{}".
- Finally, the content type of the request should be set to
application/json; charset=utf-8.
You can actually set all these as defaults in a call to $.ajaxSetup() if you have multiple page methods you would call in this way, but it could also be specified in the individual options to that AJAX call. For instance:
$.ajaxSetup({
type: "POST",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json"
});
If you forget any of this stuff there's a great article at Encosia that, while old, is still a handy reference tool for the current process for consuming page methods using jQuery, including all of these guidelines.
To make a call to the web method, you would provide the URL for the page followed by a forward slash and the name of your method, for instance (and I've included an example of setting all of those parameters in the individual call rather than in the setup function):
$.ajax({
type: "POST",
data: JSON.stringify({sites: sites}),
contentType: "application/json; charset=utf-8",
dataType: "json",
url: "dbinsert.aspx/DoWork",
success: function () {
alert("Database insert complete.");
}
});
I notice that you seem to have created a separate page for the AJAX method called dbinsert.aspx. If you haven't and that is actually the page containing your JavaScript and user entry form, then please disregard this section, but if you have, please know that you can declare web methods directly on the same page with your entry form and script, and using the correct URL parameter to specify the web method name you want to invoke, call these functions in that fashion.
If you would like to have a single place where multiple pages use the same web method to perform an operation using AJAX calls, I'd recommend setting up a web service instead (.asmx file). You would call this web service in the same way using a URL of myservice.asmx/DoWork, but you would not have to declare those methods static. There is also a ScriptServiceAttribute decorator created by Visual Studio's default web service template that is commented out initially. You would have to uncomment that line in order to call that service using jQuery, but those are the only two differences between the processes.
