JavaScript Asynchronous page query implementation code (asp.net) _javascript tips

Source: Internet
Author: User
1. Testlist.aspx page:
Copy Code code as follows:

<title></title>
<link rel= "stylesheet" href= "Jscript/autosuggest.css" type= "Text/css"/>
<link rel= "stylesheet" href= "Jscript/ac.css" type= "Text/css"/>
<script language= "Javascript" src= "Jscript/autosuggest.js" ></script>
<script language= "Javascript" src= "Jscript/ac.js" ></script>
function Acclient (queryurl, Width, objinput, objlable)
{
This.xmldom = Getxmlhttp ();
This.queryurl = Queryurl;
This.prolist = new Array ();
This.divwidth = width;
This.objinput = Objinput;
this.geteligible = function (AC) {
var eligible = new Array ();
if (Ac.inputText.length < 1) {
document.getElementById (objinput.name). Value = "";
document.getElementById (objlable.name). Value = "";
return eligible;
}
var strURL = This.queryurl + Escape (ac.inputtext) + "&rand=" + math.random ();
This.xmldom.open ("Get", strURL, false);
try {
This.xmldom.send ();
}
catch (e) {
Return
}
This.prolist = This.xmldom.responseXML.documentElement.selectNodes ("/duxion/object");
if (0 = this.prolist.length) {
return eligible;
}
for (var i = 0; i < this.prolist.length; i++) {
if (i > 15)
Break
var node = This.prolist.item (i);
Eligible[eligible.length] = Node.getattribute ("fullcontent");
}
Ac.div.style.width = This.divwidth;
return eligible;
};
This.usesuggestion = function (SEL)
{
if (sel>=0)
{
var node = This.prolist.item (SEL);
if (typeof (Node.getattribute ("value"))!= "undefined")
document.getElementById (objinput.name). Value = Node.getattribute ("value");
Else
document.getElementById (objinput.name). Value = "";
if (typeof (Node.getattribute ("content"))!= "undefined")
document.getElementById (objlable.name). Value = Node.getattribute ("content");
Else
document.getElementById (objlable.name). Value = "";
if (This.objInput.name = = "Hidfreq_code") {
document.getElementById ("Txtfreq_name"). Value = Node.getattribute ("name");
document.getElementById ("Hidfreq_code"). Value = Node.getattribute ("code");
}
}
};
return this;
}
</script>
<body>
<form id= "Form1" runat= "Server" >
<%--div is used to display the Drop-down query section--%>
<div id= "AutoSuggest" style= "WIDTH:160PX;FONT-SIZE:12PX;" ><ul></ul></div>
<div>
<asp:textbox id= "Txtfreq_name" cssclass= "Needtext" runat= "Server" width= "100px" ></asp:textbox><asp: HiddenField
Id= "Hidfreq_code" runat= "Server"/>
</div>
</form>
</body>
<script type= "Text/javascript" >
New AutoSuggest (document.getElementById (' Txtfreq_name '),
New Acclient ("testxml.aspx?tag=yp_frequency&value=", "200px", document.getElementById (' Hidfreq_code '), document.getElementById (' txtfreq_name '));
</script>

2. Testxml.aspx.cs file for query XML
Copy Code code as follows:

public partial class Testxml:baseform
{
protected void Page_Load (object sender, EventArgs e)
{
Listxmldata ();
}
Private string[] arrwidth;
Private string[] Arrfield;
public string fieldlist = "Area ID, Region name, region encoding, regional level";
public string coloumwidth = "60,10,20,30";
displaying XML Format data
private void Listxmldata ()
{
Width of each field
String Strwhere= "";
if (request["value"]!= null)
{
strwhere = string. Format ("and Code like ' {0}% '", request["value"]. ToString ());
}
Arrfield = FieldList. Split (', ');
Arrwidth = Coloumwidth. Split (', ');
DataTable dtlist = new Districts (). Search ("1=1" + strwhere);/DIS//sqlhelper.gettable (subsys_db, CommandType.Text, strSQL, NULL);
int list_cols = DtList.Columns.Count; Number of fields
int list_rows = DtList.Rows.Count; Number of records
String listlable = ""; Display content
XmlDocument xmldoc = new XmlDocument ();
XmlDeclaration Dec = xmldoc. Createxmldeclaration ("1.0", "gb2312", null);
XmlDoc. InsertBefore (Dec, xmldoc.) FirstChild);
XmlElement root = xmldoc. CreateElement ("Duxion");
XmlDoc. AppendChild (root);
Show Table Headers
if (List_rows > 0)
{
XmlElement objtitle = xmldoc. CreateElement ("Object");
for (int k = 0; k < list_cols; k++)
{
Listlable + = "<span style= ' width:" + arrwidth[k] + "Text-align:center;font-weight:bold;color: #000000;p adding-top : 2px; ' > "+ arrfield[k] +" </span> ";
if (k = = Arrfield. LENGTH-1)
Break
}
Objtitle. SetAttribute ("Fullcontent", listlable);
Root. AppendChild (Objtitle);
}
Show Table Headers
Display data
for (int i = 0; i < list_rows; i++)
{
listlable = "";
DataRow drlist = dtlist.rows[i];
XmlElement obj = xmldoc. CreateElement ("Object");
for (int j = 0; J < List_cols; J + +)
{
Obj. SetAttribute (Dtlist.columns[j]. ColumnName, Drlist[j]. ToString ());
if (J <= Arrfield. LENGTH-1)
{
Listlable + + <span style= ' width: + arrwidth[j] + ' > ' + getleftstring (drlist[j). ToString (), Convert.ToInt16 (Arrwidth[j]) + "</span>";
Listlable + + <span style= ' width: + arrwidth[j] + ' > ' + formatxmlnode (dtlist.columns[j). Datatype.tostring (), Drlist[j]. ToString ()) + "</span>";
}
}
Obj. SetAttribute ("Fullcontent", listlable);
Root. AppendChild (obj);
}
Display data
Response.ContentType = "Text/xml;charset=utf-8";
Response.ContentType = "text/xml;charset=gb2312";
response.contentencoding = System.Text.Encoding.Default;
Response.ContentType = "Text/xml";
Response.Clear ();
Response.Write (xmldoc. OuterXml);
Response.End ();
}
private string Formatxmlnode (String field_type, String field_value)
{
String return_value = Field_value. Trim ();
Switch (field_type)
{
Case "System.Double":
Case "System.Decimal":
Return_value = string. Format ("{0:0.###}", Convert.todouble (Return_value));
Break
}
return return_value;
}
}

3. Effect Chart:

4. Additional. js and. css files See attachment
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.