Ajax Basic Application: Automatically fill the Drop-down box based on the input content

To implement Ajax in asp.net, download Ajax.dll and reference first, and better understand the fundamentals of Ajax. There is an electronic book called "Basic Ajax Tutorial", the Internet has the next, speak very clearly. The code inside is a Java version, but it doesn't matter. Download address (try): Http://www.bomoo.com/ebook/ebook.php/5045.html http://www.leafz.com/article.asp?id=2239 This is one of the typical applications of Ajax, namely         Search the database based on what the user has entered in the input box, and then display the content, of course, not necessarily in the Drop-down box, but also in other places, which is actually part of the JavaScript control. For example, I think CSDN forum can add this function, when the post to ask questions, you can use AJAX based on user input dynamic to the background query the database, the query to the results, that is, similar problems appear on the page, so that users can be based on the search for posts to solve the problem,         can save time. Here we just fill in the Search to the dropdown box so that the user can pinpoint. The effect chart has been sent before. As follows: The user enters the school number, fills the Fill Drop-down box dynamically.

Ajax can use JavaScript to invoke the server-side method, if you want to make the server-side method is called JS, you must do the following two things
1. During the page load event, Register the class containing the service-side function through Ajax.Utility.RegisterTypeForAjax, our page backstage is StuInfoView.aspx.cs, wait a while the server-side function to be called is also here, so use the following statement. (Note that is written in the private void Page_Load (object sender, System.EventArgs e) Ajax.Utility.RegisterTypeForAjax (typeof (   Stuinfoview)); 2. For the function to be JS called Ajax.ajaxmethodattribute, because the end of the attribute can be omitted (see MSDN "metadata"), can also be written ajax.ajaxmethod. The service-side function we are using is Getmatchedstuid () and then defined as follows [Ajax.ajaxmethod ()]
public static string [] Getmatchedstuid (String stuid)
{
/* This is JS to call the function. is actually to accept the JS parameter stuid, and then search the database,
* The records that meet the conditions are stored in a dataset and placed in a string array, and then returned to client JS, which is then processed by JS (populated into the dropdown box)
* The following search is just one of the methods
* Actually, it's best to search the relevant records directly with SQL statements (like)
*/
DataSet ds = (new Projclass ()). Getstuinfo (); This returns a dataset, that is, all the records
datarow[] Drs = ds. tables["Stuinfo"]. Select ("Stuid like" + Stuid + "%"); Filtering, leaving only those that meet the requirements
The result is placed in a string array and returned to the client's JS
if (DRS!= null)
{
string [] result = new string [Drs. Length];
for (int i = 0; i < Drs. Length;i + +)
Result[i] = convert.tostring (drs[i]["Stuid"));
return result;
}
return null;
}

Two. Because the user input content to immediately respond to the background, where to give the input box (tbx_query) plus KeyUp event, the user input value of the input box to send the value of the background to search. Because it is a server control, the KeyUp event is as follows: (in CS file)
This.tbx_query. Attributes.Add ("onkeyup", "Matchstuid (This.value)");
Three. Client JavaScript code
1.matchStuId (Stuid), this is the KeyUp event, which is called if the focus is in tbx_query and the user presses the keyboard. function Matchstuid (STUID)
{
* * About the following this sentence may be a lot of people do not understand, Stuinfoview is the background of the class name, Getmatchedstuid is the background to allow the client JS call function
* But you may have to ask, there is only one parameter backstage, how there are two. On the Hill's blog There are people who ask
* This can be explained, the previous parameters are used parameters, the last is the server returned content to the client will be called after the JS function, it accepts the content returned by servers
* is actually XMLHttpRequest (the core of Ajax technology) object Readystatus to 4 o'clock, how the client handles the server-side returned content
* We use callback this JS function to process the returned content, the following will be mentioned, so write. That's very clear.
*/
Stuinfoview.getmatchedstuid (Stuid,callback);

}
2.CallBack, accept the content that the background function passes to carry on a series of processing function CallBack (response)//response is the content that the backstage passes over, A string array returned by the backend function getmatchedstuid
{
var matchddl = document. FORM1.DDL; The Drop-down box that we want to populate, the dropdown box is placed in a div.
if (response.value.length!= 0)
{
Setdiv (); Position the div that contains the dropdown box, but you can't leave it on the page
matchddl.options.length = 0;
Matchddl.size = Response.value.length; This sentence, you remove try. May be uncomfortable, it is to control the length of the dropdown box, lest there is a scroll bar
for (var i = 0; i < response.value.length + i)
Matchddl.options[matchddl.options.length] = new Option (Response.value[i]); Fills the elements in a string array into a drop-down box
}
else document.getElementById ("Ddldiv"). Style.display = ' None '; If the client does not return content, the div is not visible, that is, the dropdown box is not visible
}

3.setdiv () function functions for layer processing setdiv ()
{
Set the position of the div according to the position of the input box, no need to explain.
var TBX = document. Form1.tbx_query;
var ddldiv = document.getElementById ("Ddldiv");
Ddldiv.style.display = ';
if (Tbx.value = "")
Ddldiv.style.display = ' None '; If the input box is empty, it is not visible
var etop = tbx.offsettop;
var eleft = Tbx.offsetleft;
Ddldiv.style.top = etop + 180;
Ddldiv.style.left = Eleft + 35;
}

4. Dropdown box Click event Function selectthis (SEL)
{
Drop-down box Click on the event, the user clicked the dropdown box, the click of the record to display in the input box
document.getElementById (' Tbx_query '). Value = Sel.options[sel.selectedindex].text;

}

Four. The client layer and the Drop-down box HTML code, this piece of code to throw anywhere can, anyway it is displayed on the page location is not its own decision. < div id = "Ddldiv" style = "display:none;" z-index:99; Position:absolute ">< Select id =" DDL "onclick =" selectthis (this) "></SELECT ></div >

Over