Controls Examples

I got a lot of requests on how to implement a WebUserControl that is using Ajax.NET Professional. Now, I want to make two examples, on with an ASCX file and on with a WebControl.

An ASCX Control

Below you will see an WebUserControl that is loaded from WebUserControl1.ascx. It has it's own AjaxMethod that will return the number of characters from a given string, the input value. Try to enter some chars in the textbox:

Here you can have a look at the ASCX source:

<%@ Control Language="c#" Inherits="System.Web.UI.UserControl" ClassName="WebUserControl1" %>
<script language="C#" runat="server">

private void Page_Load(object sender, System.EventArgs e)
{
  AjaxPro.Utility.RegisterTypeForAjax(typeof(WebUserControl1), this.Page);
}

[AjaxPro.AjaxMethod]
public int GetLength(string s)
{
  return s.Length;
}

</script>

<script type="text/javascript">

var textLen = function(ele) {
    this.ele = ele;
    this.display = document.getElementById(this.ele.id + "_display");
    addEvent(this.ele, "keyup", this.dosearch.bind(this));
}

textLen.prototype = {

  dosearch: function() {
    ASP.WebUserControl1.GetLength(this.ele.value, this.ondata.bind(this));
  },
  ondata: function(res) {
    this.display.innerHTML = res.value;
  }
};

function init() {
  var x = new textLen(document.getElementById("<%=ClientID%>"));
  x.ele.focus();
}

addEvent(window, "load", init);

</script>
<input type="text" id="<%=ClientID%>"/>
<div>Length of the string: <span id="<%=ClientID%>_display">0</span></div>

A WebControl

The second way is to use a WebControl. I build a simple web control that is something like an (simple) autocomplete text box. The main problem was that it was difficult to implement an own data access method for controls. I have done this with an delegate that you can specifiy on the web control. See the use of the WebControl in the ASPX Page:

private void Page_Load(object sender, EventArgs e)
{
  WebControl control = new WebControl();
  control.GetDataMethod = new GetDataHandler(this.GetMyData);
    
  placeHolder1.Controls.Add(web);
}

The this.GetMyData method is implemented in the Page class, could be any .NET method that has the same method info like the delegate. The method must have the AjaxMethod attribute:

[AjaxPro.AjaxMethod]
public object[] GetMyData(string s, int count)
{
	string[] res = new string[(s.Length < count ? s.Length : count)];
	
	for(int i=0; i<s.Length && i<count; i++)
		res[i] = i + ". " + s.Substring(0, i+1);
	
	return res;
}

Below you can see the control in action, I have put two control on the page to see that it is working with more controls, too:

Type any text in the text boxes and you will see something like a simple autocomplete textbox.

A simple AjaxButton

I have created another sample control that is inherited from HtmlButton. A ClickHandler allows you to execute a AjaxMethod when you click on the button. In this example you do not have any return value or argument. To see that it is running you should have a look on the http request using Fiddler.

Click Here