AJAX Page - Knowledge Base

« Back to Knowledge Base list

How to call server-side method of the ASCX control.

Q:

         We are trying to create a custom control using Ajax page. We created a simple web page, put the control on it and javascript which embedded into control is trying to call a server side function using ob_post object. However the server returns a message that the function is not defined – it seems like it is looking for function on the web page cs file, not control’s cs file.
        How this can be resolved and is it possible at all to use Ajax page for what we are trying to achieve?

A:

Just use {<control ID>:} prefix for the server-side method name.
Example:
 
ASPX:
 
<%@ Page Language="C#" AutoEventWireup="true" Inherits="OboutInc.oboutAJAXPage" %>
<%@ Register Assembly="obout_AJAXPage" Namespace="OboutInc" TagPrefix="oajax" %>
<%@ Register TagPrefix="web" TagName="WebControl" Src="~/WebUserControl1.ascx"%>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
      <title></title>
</head>
<body>
  <form id="aspnetForm" runat="server">
     <div>
       <web:WebControl ID="ctrl_0" runat="server" />
     </div>
     <div>
       <web:WebControl ID="ctrl_1" runat="server" />
     </div>
  </form>
</body>
</html>
 
ASCX:
 
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl1.ascx.cs" Inherits="WebApplication1.WebUserControl1" %>
<%@ Register TagPrefix="oajax" Namespace="OboutInc" Assembly="obout_AJAXPage" %>
 
<script type="text/javascript">
  function doCallback<%= this.ID %>() {
     ob_post.post(null, "<%= this.ID %>:DoCallback", displayResult<%= this.ID %>);
  }
 
  function displayResult<%= this.ID %>(ret) {
    alert(ret);
  }
</script>
 
<oajax:CallbackPanel runat="server" ID="CallbackPanel1">
  <content>
       ...
  </content>
</oajax:CallbackPanel>
 
<input type="button" value="doCallback - <%= this.ID %>" onclick="doCallback<%= this.ID %>();" />

(Note the colon in "<%= this.ID %>:DoCallback"
)

ASCX.CS
:
 
namespace WebApplication1
{
  public partial class WebUserControl1 : System.Web.UI.UserControl
  {
     public string DoCallback()
     {
         return "Server-side method executed!!!"+ ((this.ID != null)?this.ID:"NULL");
     }
  }
}