Data Browser - Viewing Site  Sector 23 Code Bank Logged in as:  Guest  


Responsive Page Design Using Page Web Methods
Imagine a huge web page with a grid containing many rows of data.
You have a drop down list which, when changed, you would like the database to update to reflect the change. Normally you would have the drop down list do an autopostback, or else put a save button somewhere on the page to commit the changes with a postback. However, if the page contains a huge grid, either of these result in inconvenient wait times.

A very easy .NET solution is Page Web Methods, which allow the action to happen asynchronously in AJAX and access the server, but all of the code is generated automatically!

Step 1:

Enable page methods on your aspx page
<asp:ScriptManager runat="server" ID="scriptManager" EnablePageMethods="true" />

Step 2:
Add your save method in the .cs code behind, and mark it as a public static WebMethod

public static void SaveMe(int a, int b, string etc)
// do save logic here

Step 3:
Fire the following javascript on your dropdown change event, div click, button save event (return false to cancel postback), etc. No need for postback!
Change the arguments to whatever (such as the value of your control)

PageMethods.SaveMe(1, 2, 'hello world');

Step 4:
Bonus points: you can handle errors and successful responses if you like by passing in additional callback functions

PageMethods.SaveMe(1, 2, 'hello world', onsuccess, onfailure);

function onsuccess(result) {
// alert('ok');
function onfailure(result) {
alert('There was a problem updating this record: ' + result.get_message());

Step 5:
Bonus points: add a helpful CSS animation to indicate to the user that the save is happening. Refer to my article "Repeat CSS Animation on Click"

Created By: amos 3/11/2015 11:59:11 AM
Updated: 3/11/2015 12:31:43 PM