WebMethods in aspx and calling them thru javascript

I came across a situation today which I thought worth making a note about !

Problem : I have a collapsible grid. Where upon clicking a certain button, there should appear another row with some additional fields. When the grid is created the table which contains my dynamic row is getting dumped to the output stream as follows,

System.IO.StringWriter sw = new System.IO.StringWriter();
System.Web.UI.HtmlTextWriter htw = new System.Web.UI.HtmlTextWriter(sw);
table.RenderControl(htw);

the table object basically contains few text box controls (ASP.NET) and labels. The problem is when i define a event handler for text change event in the text box controls, they do not wireup properly. And hence I cannot make them to do a asynchronous postback to do save their values upon leaving the text boxes. This is purely due to fact that the html content for these controls are created then and there and they wont capture these during the page-life cycle.

Solution : One solution is I can call a javascript function from either onleave or onblue events and then do a postback on that. Than doing a post back and let the full page lifecycle to run, if i can call a method in the page and do the expected saving, it would be worth it. This is the first time I used this technique but there may be guys who are experts on this. Just correct me if there are is any false in what i say :)

Step 1 : Define a web method is the webpage (yes in the web page, i did not know about if that is possible to have a web-method in any other place than a asmx but it can be done. Just have a public static method and attribute it with [WebMethod]). In my situation it was not a page that i had to deal with but it was a User Control. And here is the other problem. [WebMethod] s are not allowed in user controls. They can only be placed in .aspx pages. So how I am going to resolve the issue. I put my [WebMethod] in the page that contains my user control . Then define a static method in the user control and call it thru the [WebMethod]. Another issue! my user control is a instance member and i cannot call a instance member thru a static method. Hack: make the user control a static member thru the designer.cs [Are there any side affects of doing this, I dont think so ;)]

[WebMethod]
public static void DynamicTextBoxTextChanged(string invoiceUniqueId, string textBoxValue, string textBoxType)
{
<>.DynamicTextBoxTextChanged(invoiceUniqueId, textBoxValue, textBoxType);
}

In the user control,

public static void DynamicTextBoxTextChanged(string invoiceUniqueId , string textBoxValue , string textBoxType)
{
//Logic to do the saving
}

Step2 : Now we are half way done. Only thing left is to call the WebMethod thru a javascript in the page.

As simple as this,

function CallPageMethod(key, textBox, textBoxType) {

PageMethods.DynamicTextBoxTextChanged(key, textBox.value, textBoxType);
}

and my text box will have to have a attribute like this onchange="javascript:CallPageMethod('somekey' , this , 'sometype')"

We are not quite done yet, where does this PageMethods comes from? and how does it know that there is a [WebMethod] called DynamicTextBoxTextChanged in my page? That happens thru the ScriptManger. The ScriptManger should have the attribute EnablePageMethods="true".

And that is it. It should good to go!

Hands off the keyboard,
Bumble Bee