. Net uses ajax to implement mailbox registration and region selection instances, and ajax mailbox Registration
This example describes how. net uses ajax to implement mailbox registration and region selection. Share it with you for your reference. The specific implementation method is as follows:
Ajax is short for Asynchronous JavaScript and XML (and DHTML.
Ajax implements Asynchronous interaction with the server on the browser. Before XMLhttpRequest is widely used, you can only refresh the entire page to obtain the latest data, the cost of the code is to transmit a large amount of data, and some temporary user information may be lost. The use of ajax achieves partial page content update, the principle is to call the XMLhttpRequest proxy, send a request to the service, and then update the page content through the processing interface defined by ajax.
Next, use ajax to implement email registration and region selection instances:
First, the foreground section:
Copy codeThe Code is as follows: <% @ Page Language = "C #" AutoEventWireup = "true" CodeBehind = "Default. aspx. cs" Inherits = "WebApplication2. _ Default" %>
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> Use of ajax preliminary exercises </title>
<Style type = "text/css">
Div {width: 800px; margin: 0 auto; height: 25px ;}
</Style>
<Script type = "text/javascript">
Function createRequest () // creates an object
{
Var request;
Try
{
Request = new XMLHttpRequest ();
}
Catch (microspft)
{
Try
{
Request = new ActiveXObject ("Msxml2.XMLHTTP ");
}
Catch (othermicrosoft)
{
Try
{
Request = new ActiveXObject ("Microsoft. XMLHTTP ");
}
Catch (failed)
{
Request = null;
}
}
}
Return request;
}
Var req = null; // register an email
Function sendRequest () // send a request
{
If (document. forms [0]. useremail. value = "")
{
Alert ("User email cannot be blank! ");
Document. forms [0]. useremail. focus ();
Return false;
}
Req = createRequest (); // create an Ajax request object
Req. open ("GET", "default. aspx? Email = "+ document. forms [0]. useremail. value );
Req. send (""); // open the server connection and send the request
Req. onreadystatechange = dealMethod; // set the function to run after the server response is complete.
}
Function dealMethod () // call a function
{
If (req. readyState = 4 & req. status = 200) // at this time, the server has completed the response.
{
If (req. responseText = "0") // responseText is the server response value attribute
Document. getElementById ("canuse"). innerHTML = "Else
Document. getElementById ("canuse"). innerHTML = "}
}
Var req2 = null; // initialization drop-down box
Function GetSelect ()
{
Req2 = createRequest ();
Req2.open ("GET", "default. aspx? Selected = 1 ");
Req2.send ("");
Req2.onreadystatechange = changeSelected;
}
Function changeSelected ()
{
If (req2.readyState = 4 & req2.status = 200)
{
Var s = req2.responseText;
Var provinces = s. split ('&') [0]. split ('|'); // obtain province subcolumns such as (1, Henan) AND (2, Jiangxi) in the returned fields in the background.
Var cities = s. split ('&') [1]. split ('|'); // obtain city subcolumns such as (1, Zhengzhou), (2, Luoyang), and (3, Kaifeng) in the returned fields in the background.
Document. forms [0]. province. length = 0;
For (var I = 0; I <provinces. length; I ++)
{
Var op = new Option ();
Op. value = provinces [I]. split (',') [0];
Op. text = provinces [I]. split (',') [1];
Document. forms [0]. province. options. add (op); // add the province ID and province name to the select option in the form of value and text respectively.
}
Document. forms [0]. city. length = 0;
For (var j = 0; j <cities. length; j ++)
{
Var op2 = new Option ();
Op2.value = cities [j]. split (',') [0];
Op2.text = cities [j]. split (',') [1];
Document. forms [0]. city. options. add (op2); // add the city number and city name to the option under select in the form of value and text respectively.
}
}
}
Var req3 = null; // The province changes and the city changes
Function GetCity ()
{
Req3 = createRequest ();
Req3.open ("GET", "default. aspx? ProId = "+ document. forms [0]. province. value );
Req3.send ("");
Req3.onreadystatechange = changeCity;
}
Function changeCity ()
{
If (req3.readyState = 4 & req3.status = 200)
{
Var s = req3.responseText;
Var cities = s. split ('| ');
Document. forms [0]. city. length = 0;
For (var I = 0; I <cities. length; I ++)
{
Var op = new Option ();
Op. value = cities [I]. split (',') [0];
Op. text = cities [I]. split (',') [1];
Document. forms [0]. city. options. add (op );
}
}
}
</Script>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Table align = "center">
<Tr>
<Th> Email </th>
<Th> <input type = "text" name = "useremail" value = ""/> </th>
<Th id = "canuse"> </th>
<Th> </th>
</Tr>
<Tr>
<Th> <select name = "province" onchange = "GetCity ();"> </select> </th>
<Th> <select name = "city"> </select> </th>
<Th> <input type = "button" value = "register" onclick = "sendRequest ();"/> </th>
</Tr>
</Table>
</Form>
</Body>
<Script type = "text/javascript">
GetSelect ();
</Script>
</Html>
Then the Background section:
Copy codeThe Code is as follows: public partial class _ Default: System. Web. UI. Page
{
Protected void Page_Load (object sender, EventArgs e)
{
If (Request. QueryString ["Email"]! = Null) // register an email address
{
// Generally, the data source here should be read from a database, and a rigid data is defined here for convenience.
String bbb = "2320774925@qq.com ";
String aaa = Request. QueryString ["Email"];
If (aaa = bbb)
Response. Write ("0 ");
Else
Response. Write ("1 ");
Response. End ();
}
// In general, the next two processing parts should use two data tables
If (Request. QueryString ["Selected"]! = Null) // initialize the drop-down list
{
// In general, the data here should be read from the database, and then retrieve all city numbers and city names corresponding to Province 1, then, according to some methods, first combine the two data columns in the province table, such as "1, Henan | 2, Zhejiang | 3, Hubei | 4, Jiangsu | 5, Anhui | 6, shandong | 7, Jiangxi "such a string, and finally add the province number as 1 corresponding to all the city numbers and city names form a form such as" 1, Henan | 2, Zhejiang | 3, hubei | 4, Jiangsu | 5, Anhui | 6, Shandong | 7, Jiangxi & 1, Zhengzhou | 2, Luoyang | 3, Kaifeng | 4, Xinyang | 5, Nanyang | 6, zhumadian | 7, Anyang | 8, hebi | 9, Puyang | 10, Pingdingshan "a column of strings is uploaded back to the front end
String result = "1, Henan | 2, Zhejiang | 3, Hubei | 4, Jiangsu | 5, Anhui | 6, Shandong | 7, Jiangxi & 1, Zhengzhou | 2, luoyang | 3, Kaifeng | 4, Xinyang | 5, Nanyang | 6, Zhumadian | 7, Anyang | 8, hebi | 9, Puyang | 10, Pingdingshan ";
Response. Write (result );
Response. End ();
}
If (Request. QueryString ["ProId"]! = Null) // change the province to change the city
{
// Generally, the data here should still be read from the database. In the frontend part, after the drop-down box is initialized, all provinces will be filled in the province drop-down box, all cities with province number 1 will also be filled in the city drop-down box. When you select a province again, the server will receive a new data, in fact, this data is also called the province number. Here, the province number is used to obtain the numbers and names of all cities under the corresponding region. After some processing, the data is obtained in the form of "1, zhengzhou | 2, Luoyang | 3, Kaifeng | 4, Xinyang | 5, Nanyang "strings are returned to the front end
Int num = Int32.Parse (Request. QueryString ["ProId"]);
If (num = 1)
Response. Write ("1, Zhengzhou | 2, Luoyang | 3, Kaifeng | 4, Xinyang | 5, Nanyang ");
If (num = 2)
Response. Write ("1, Hangzhou | 2, Ningbo | 3, Wenzhou | 4, Jiaxing | 5, Huzhou ");
If (num = 3)
Response. Write ("1, Wuhan | 2, Huangshi | 3, Shiyan | 4, Yichang | 5, Jingzhou ");
If (num = 4)
Response. Write ("1, Nanjing | 2, Wuxi | 3, Xuzhou | 4, Changzhou | 5, Suzhou ");
If (num = 5)
Response. Write ("1, Hefei | 2, Wuhu | 3, Bengbu | 4, Huainan | 5, ma'anshan ");
If (num = 6)
Response. Write ("1, Jinan | 2, Qingdao | 3, Zibo | 4, Zaozhuang | 5, Dongying ");
Else
Response. Write ("1, Nanchang | 2, Jingdezhen | 3, Pingxiang | 4, Jiujiang | 5, Xinyu ");
Response. End ();
}
}
}
I hope this article will help you with the. net program design.
As you can see, just recently I used a keyword similar to Baidu to automatically search for databases and list projects.
1. For VS2008, use the DLL package AjaxControlToolKit For 3.5 and put it in the BIN folder;
2. On the foreground page, use <% @ Register TagPrefix = "asp" Namespace = "AjaxControlToolkit" Assembly = "AjaxControlToolkit" %> to Register the DLL;
3. After registration,
<Asp: TextBox ID = "test1" runat = "server" Text = '<% = Names %> 'width = "99%"> </asp: TextBox>
<Asp: AutoCompleteExtender ID = "AutoCompleteExtender1" runat = "server" ServicePath = "~ /Admin/ajax_Test1.asmx "ServiceMethod =" test1List "TargetControlID =" test1 "MinimumPrefixLength =" 1 "CompletionSetCount =" 10 "CompletionInterval =" 100 "> </asp: AutoCompleteExtender>
4. Create a WEBSERIES named ajax_Test1.asmx, and write the ajax_Test1.cs file in the APP_Code folder. The specific method example is as follows. If you do not understand it, Hi me.
Who can help me send a complete code email that uses net-operated ajax to verify whether the user exists? 19891120 @ qqcom
Sent, mail is: kehuan121@163.com
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
