Okay, I will list the implementation process. First, we need an Ajax. dll file. Find it by yourself! Put it in the project and add references. First, you need a class named "ajaxmethod. cs" as follows:
Namespace test. ajaxtest
{
/// <Summary>
/// Summary of ajaxmethod.
/// </Summary>
Public class ajaxmethod
{
Public ajaxmethod (){}
// Database query operation
[Ajax. ajaxmethod (Ajax. httpsessionstaterequirement. Read)]
Public dataset getlist (string ID)
{
String SQL = "select cityname, citycode from city where [ID] =" + ID;
Return selectdata (SQL); // call the following method
}
//
Private dataset selectdata (string SQL)
{
// Database link definition:
// <Configuration> <etettings> </appsettings> </configuration> in Web. config
// Add definition: <add key = "connectionstring" value = "Data Source = localhost;
// Initial catalog = helpalog 1; user id = sa; Password = sa; "> </Add>
String cs = system. configuration. configurationsettings. appsettings ["connectionstring"];
// Or define it like this.
// String cs = "Server = (local); uid = sa; Pwd = sa; database = help1_1 ";
Sqldataadapter SDA = new sqldataadapter (SQL, CS );
Dataset DS = new dataset ();
SDA. Fill (DS );
Return Ds;
}
}
}
The following figure shows the page A. aspx to achieve the effect. The <body> part is simple:
<Body>
<Form ID = "form1" method = "Post" runat = "server">
<Select id = "alist" onchange = "getblist ()">
<Option value = "0"> A </option>
<Option value = "1"> B </option>
<Option value = "2"> C </option>
</SELECT>
<Select id = "blist"> </SELECT>
</Form>
</Body> when the page triggers the onchange event, the getblist () method is entered. The following figure shows the complete JavaScript code for the page: <script language = "JavaScript">
Function getblist (){
// Call the Database Operation Method
VaR AV = Document. getelementbyid ("alist"). value;
// Call the method of the ajaxmethod class. Here there are two parameters. Assume that it is a delegate. // pass the getlist execution result dataset to the setblist method, hiding the ajaxmethod. getlist (AV, setblist );
}
Function setblist (response ){
If (response! = NULL) {var DS = response. value; // return set
// This is quite special. At first, I felt that something went wrong. Why is the JS syntax rules the same as C #? // The regular expressions in Ajax. dll should be well written! However, it is a bit unpleasant. // when I test. tables [0]. rows. lenght is written as DS. tables [0]. rows. count // JS will not find the object error.
// We still need to get used to its rules. After all, it is not entirely C #, but it just defines a rule similar to C #
// Very similar syntax rules
If (Ds! = NULL & typeof (DS) = "object" & Ds. tables! = NULL) {alert (Ds. Tables [0]. Rows. Length );
For (VAR I = 0; I <Ds. Tables [0]. Rows. length; I ++) {var option = Document. createelement ("option ");
Option. value = Ds. Tables [0]. Rows [I]. citycode;
Option. Text = Ds. Tables [0]. Rows [I]. cityname;
Document. form1.blist. Options. Add (option );
}
}
}
}
</SCRIPT>
The example ends, and many complicated operations are encapsulated. What we learned is how to use it. That's all. However, when we catch up with the project, it can bring a lot of convenience.
Supplement: according to the above configuration, an exception is thrown, that is, the ajaxmethod class exception cannot be identified. We need to add the definition Ajax in the backend CS file of the page. utility. registertypeforajax (typeof (complete namespace. ajaxmethod ));
In addition to adding a registration definition here, we also need to add the following in Web. config:
<Httphandlers>
<Add verb = "post, get" Path = "ajax/*. ashx" type = "Ajax. pagehandlerfactory, Ajax"/>
</Httphandlers>
Extension: we can completely write the ajaxmethod into a public page and add methods that call the business-layer code. In this way, you don't need to define the database link in it-all we need is a datatable, and you don't have to worry about how to get it. The combination of such design and project framework will be closer.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
