. NET Framework |ajax| Servers | schemas | controls
First, Introduction
Today, Ajax has become one of the most popular rhetoric in the software world; However, this idea is not new, but for some reason it became popular in the second half of last year. With the development of web-based application software, users often require richer and faster interfaces. Ajax can greatly improve the user's Web application experience.
For me, Ajax is brand new. Some time ago, I read some articles to get some ideas because of the lack of available tools and off-the-shelf libraries. Recently, however, I have found a fairly powerful framework for ajax.net-to support asynchronous callbacks.
In this article, I'll describe the experience of creating a lookup control based on Ajax.NET. To build a lookup control, you need to have:
1. A server method that can return a list of matching records.
2. JavaScript program that handles the postback and displays a list of matching records.
3. Have an input field in the Aspx/ascx page.
Here, I will not describe the installation of ajax.net, because it is very simple, and there are a lot of resources available on the Web for your reference.
second, server-side part
This part is relatively simple. I just need to create a method that returns a ArrayList matching record and registers a class at the location where the method is located:
public class main:page{
private void Page_Load (object sender, EventArgs e) {
Utility.registertypeforajax (typeof (Main));
}
[Ajaxmethod ()]
Public ArrayList GetSearchItems (string query) {
ArrayList items = Getrecords ();
ArrayList matchitems = new ArrayList ();
foreach (string item in items) {
if (item. ToLower (). StartsWith (query. ToLower ()))
Matchitems.add (item);
}
return matchitems;
}
Private ArrayList getrecords () {
ArrayList items = new ArrayList ();
Items. ADD ("Ted");
Items. ADD ("Teddy");
Items. ADD ("Mark");
Items. ADD ("Alfred");
return items;
}
. . . |
The GetSearchItems method takes a list of all records (from any source) and filters the records that start with the query parameters. The query is the content and filter that the user enters in the input field.
third, the client part
First, I decided to write a very simple javascript-it will display a div, and the records found are just below the query input field. I think this is "close" to the target, but it requires one of the following items to be selected. The easiest thing to do is to go to the hyperlink and populate the query field with the correct click value. Take a look at the following code:
AutoComplete = "Off" >
Autocomplete= "Off" is required to tell the browser not to display the possible values for that input field. Otherwise, our controls will not work.
function Getsearchitems_callback (response) {
var div = document.getElementById ("list");
div.innerhtml = "";
if (response.value!= null && response.value.length > 0) {
for (var i = 0; I response.value.length ++i) {
div.innerhtml + + " "+
Response.value[i] + "
";
}
} |
The JavaScript getsearchitems_callback function is called by the onkeydown event. This can be done in the background code, or implemented in the *.aspx page. Now let's use the background code method.
private void Page_Load (object sender, EventArgs e) {
Search. Attributes.Add ("onkeydown", "Javascript:Main.GetSearchItems (This.value,getsearchitems_callback);");
Utility.registertypeforajax (typeof (Main));
} |
The results appear as shown in the following illustration:
Although this is the simplest case, it is not very useful. In this case, you simply enter some content and click on a link in the list that appears. However, if you improve the example, it also needs to implement some strong keyboard support, for example, you should be able to use the Up/down key for list navigation, and the use of enter to achieve the completion.
[1] [2] Next page
