PageMethods and UpdatePanel

Question

I have a page hierarchy as the following

I want to execute a PageMethod if I click the 'SAVE' button, so I coded like the following

On Button Click I called

OnClientClick="return btnSaveAS_Clicked()"

Called the following on PageLoad of the inner user control

private void RegisterJavaScript()
{
    StringBuilder jScript = new StringBuilder();
    jScript.Append("<script type='text/javascript'>");
    jScript.Append(@"function btnSaveAS_Clicked() {
        var txtConditionName = document.getElementById('" + txtConditionName.ClientID + @"').value;
        PageMethods.Combine('hello','world', OnSuccess);
        function onSuccess(result)
        {
            alert(result);
        }
    }");
    jScript.Append("</script>");

    Page.ClientScript.RegisterStartupScript(this.GetType(), "conditions_key", jScript.ToString());
}

Coded page method as

[WebMethod]
public static string Combine(string s1, string s2) {
  return s1 + "," + s2;
}

But it gives the following error...

Pleopod

So where does the UpdatePanel factor in here? – Adriaadriaens

@Adriaadriaens : Update panel is in the 'Page'. In the 'Page', I have a dropdownlist, based on the selection I will load user controls. – Pleopod

where is the Page method ? Page or in UserControl ? – Capps

Answer 1

You cannot define page methods in ascx pages. You have to define them in your web form. If you want to have a page method, defined in your user control, you'd have to define a forwarding page method in you aspx page like below (source):

in user control:

[WebMethod]
[ScriptMethod(UseHttpGet = true)]
public static string MyUserControlPageMethod()
{
    return "Hello from MyUserControlPageMethod";
}  

in aspx.cs page:

[WebMethod]
[ScriptMethod]
public static string ForwardingToUserControlMethod()
{
    return WebUserControl.MyUserControlMethod();
}  

and in aspx page:

 function CallUserControlPageMethod()
 {
     PageMethods.ForwardingToUserControlPageMethod(callbackFunction);           
 }  

Alternatively, you could use ASMX services and jquery ajax methods (jQuery.ajax, jQuery.get, jQuery.post) to call your methods asynchronously (sample).

Another option would be defining http handlers and call them via jQuery as well (tutorial).

Hamate

Oh snap, I totally missed that that was defined in the .ascx, good job. Alternately, he could use an ASMX instead to host the webmethod. – Adriaadriaens

good point. defining http handler and calling it via jquery.ajax is my best practice. – Hamate

@Hamate , : If I use 'forwarding page method', will it degrade the performance ? – Pleopod

@Adriaadriaens , : If I use 'forwarding page method', will it degrade the performance ? – Pleopod

@mraufk: depends on how you define performance degrading. But in general I don't think it's going to cause any considerable performance issue. the overhead is completely ignorable in most cases since it's on the server side, not the client side. – Hamate

@Hamate : Well. Then if I need to pass a text box's value(its in InnerUserControl) from the Page,should I write public property or .. ? – Pleopod

you can pass it as a parameter of your method. and fill the parameter with the appropriate value in your client-side call. – Hamate

@Hamate let us continue this discussion in chat – Pleopod

@Hamate that is OK. but i failed to get the following return WebUserControl.MyUserControlMethod(ddlValue); How can I access the user control inside a static method ? – Pleopod

you can't. you have to pass the value from the client side using <%= %> markup. – Hamate