Asp.net+ajax+sqlserver Automatic complement Function realization-practical skills

Code download

Description: The database connection string is in the Web.config file, and the official Northwind database is used for easy running.

Reference (tribute to its authors):

²http://www.loveweb8.com/plus/demo.php?aid=57 This example is the HTML source code. Using JS Jquery.autocomplete plug-in to achieve the automatic completion of the full function. Because my need is to combine SQL Server database table to realize automatic complement function. Down is the database table into JS array, naturally think of Ajax.

Two basic development models of ²asp.netajax the second part of this article is that: JS calls the example of WebService.

Code parsing.

1. Add WebService file.

Add New Item--AJAX-enabled WCF service names the new file as Dbservice.svc.

2. Add a function to the DBSERVICE.SVC, the function return value is the prompt automatic completion of the data.

Copy Code code as follows:

[OperationContract]
public string Getsortlist ()
{
List<string> sorts = new list<string> ();
using (SqlConnection cn = new SqlConnection (configurationmanager.connectionstrings["zhui.pc"). ConnectionString))
{
cn. Open ();
SqlCommand cmd = new SqlCommand ("SELECT [LastName] FROM [dbo].[ Employees] ", CN);
DataTable dt = new DataTable ();
using (SqlDataAdapter da = new SqlDataAdapter (cmd))
{
Da. Fill (DT);
}

foreach (DataRow row in dt. Rows)
{
Sorts. ADD (Row[0]. ToString ());
}

cn. Close ();
}
return string. Join (",", sorts.) ToArray ());
}

3. Add js, css file in default.aspx file:

Copy Code code as follows:

<script src= "Scripts/jquery-1.7.1.min.js" type= "Text/javascript" ></script>
<script src= "Scripts/jquery.autocomplete.min.js" type= "Text/javascript" ></script>
<link href= "Styles/jquery.autocomplete.css" rel= "stylesheet" type= "Text/css"/>

4. In the head section of Default.aspx, the $ (). Ready (function ()) function calls WebService to obtain the automatically-filled data and associates the data with the input box.

Copy Code code as follows:

<script type= "Text/javascript" >
$ (). Ready (function () {

Newssort.getsortlist (OnComplete, onfailed, NULL);

function OnComplete (args, context) {
$ (' #MainContent_searchBox '). AutoComplete ({
' Data ': Args.split (","),
' ItemHeight ': 20,
' Listdirection ': ' Down ',
' Width ': 280
}). AutoComplete (' Show ');
}

function onfailed (args) {
Alert ("a mistake!") ");
}
});
</script>

5.Finish.