📄 controls.aspx
字号:
<%@ Page language="c#" ClassName="Controls" Inherits="System.Web.UI.Page" %>
<script runat="server" language="c#">
private void Page_Load(object sender, EventArgs e)
{
placeHolder1.Controls.Add(LoadControl("WebUserControl1.ascx"));
AJAXDemo.App_Code.Examples.Special.WebControl web = new AJAXDemo.App_Code.Examples.Special.WebControl();
web.GetDataMethod = new AJAXDemo.App_Code.Examples.Special.WebControl.GetDataHandler(this.GetMyData);
placeHolder2.Controls.Add(web);
web = new AJAXDemo.App_Code.Examples.Special.WebControl();
web.GetDataMethod = new AJAXDemo.App_Code.Examples.Special.WebControl.GetDataHandler(this.GetMyData);
placeHolder3.Controls.Add(web);
AJAXDemo.App_Code.Examples.Special.AjaxButton button = new AJAXDemo.App_Code.Examples.Special.AjaxButton();
button.OnClick = new AJAXDemo.App_Code.Examples.Special.AjaxButton.OnClickHandler(this.OnClick);
button.InnerText = "Click Here";
placeHolder4.Controls.Add(button);
}
[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;
}
[AjaxPro.AjaxMethod]
public void OnClick()
{
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Ajax.NET - Controls Example</title>
<link rel="stylesheet" type="text/css" href="../../css/main.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<form id="Form1" method="post" runat="server">
<div class="content">
<h1>Controls Examples</h1>
<p>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.</p>
<h2>An ASCX Control</h2>
<p>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:</p>
<asp:PlaceHolder ID="placeHolder1" Runat="server"></asp:PlaceHolder>
<p>Here you can have a look at the ASCX source:</p>
<pre class="csharp"><%@ 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 = Class.create();
textLen.prototype = {
initialize: function(ele) {
this.ele = ele;
this.display = document.getElementById(this.ele.id + "_display");
addEvent(this.ele, "keyup", this.dosearch.bind(this));
},
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></pre>
<h2>A WebControl</h2>
<p>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:</p>
<pre class="csharp">private void Page_Load(object sender, EventArgs e)
{
WebControl control = new WebControl();
control.GetDataMethod = new GetDataHandler(this.GetMyData);
placeHolder1.Controls.Add(web);
}</pre>
<p>The <i>this.GetMyData</i> 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:</p>
<pre class="csharp">[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;
}</pre>
<p>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:</p>
<table><tbody><tr><td valign="top"><asp:PlaceHolder ID="placeHolder2" Runat="server"></asp:PlaceHolder></td><td valign="top"><asp:PlaceHolder ID="placeHolder3" Runat="server"></asp:PlaceHolder></td></tr></tbody></table>
<p>Type any text in the text boxes and you will see something like a simple autocomplete textbox.</p>
<h2>A simple AjaxButton</h2>
<p>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 <a href="http://www.fiddlertool.com">Fiddler</a>.</p>
<asp:PlaceHolder ID="placeHolder4" Runat="server"></asp:PlaceHolder>
<p><br/></p>
</div>
</form>
<p class="footer">Last updated: November 3, 2005 by <a href="http://weblogs.asp.net/mschwarz/contact.aspx" target="_blank">Michael Schwarz</a></p>
<p><a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a></p>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -