جمع آور ی jQuery AutoComplete TextBox از پایگاه داده با استفاده از وب سرویس در ASP.NET
با سلام در این مقاله نحوه استفاده از افزونه jQuery Autocomplete با خدمات وب ASP.Net را توضیح خواهیم داد .
بانک اطلاعات
برای پایگاه داده از NorthWind استفاده می کنیم. می توانید از لینک زیر دانلود کنید
پایگاه داده Northwind را بارگیری کنید
رشته اتصال
در زیر رشته اتصال به پایگاه داده ای که در وب قرار داده ایم است.
<connectionStrings>
<addname="constr"connectionString="Data Source = .\SQL2005;
Initial Catalog = Northwind; Integrated Security = true"/>
</connectionStrings>
ساخت وب سرویس
در زیر کد وب سرویس قرار دارد که با jQuery Autocomplete ارتباط می گیرد و سوابق مطابقت را از جدول Customer در پایگاه داده Northwind برمی گرداند.
query انتخاب شده نام و شناسه مشتری را که با متن پیشوند مطابقت دارد دریافت می کند.
سوابق ثبت شده پردازش می شوند و با افزودن شناسه در قسمت Name در قالب زیر {0} - {1} که در آن نام {0} و {1} شناسه است ، کلید Value Pair ایجاد می شود .
C #
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.Services;
using System.Data.SqlClient;
using System.Configuration;
using System.Web.Script.Services;
///<summary>
/// Summary description for Service
///</summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class Service : System.Web.Services.WebService {
public Service () {
//Uncomment the following line if using designed components
//InitializeComponent();
}
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string[] GetCustomers(string prefix)
{
List<string> customers = new List<string>();
using (SqlConnection conn = new SqlConnection())
{
conn.ConnectionString = ConfigurationManager
.ConnectionStrings["constr"].ConnectionString;
using (SqlCommand cmd = new SqlCommand())
{
cmd.CommandText = "select ContactName, CustomerId from Customers where " +
"ContactName like @SearchText + '%'";
cmd.Parameters.AddWithValue("@SearchText", prefix);
cmd.Connection = conn;
conn.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
customers.Add(string.Format("{0}-{1}", sdr["ContactName"], sdr["CustomerId"]));
}
}
conn.Close();
}
return customers.ToArray();
}
}
}
VB.Net
Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Web.Script.Services
Imports System.Data.SqlClient
Imports System.Collections.Generic
' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
' <System.Web.Script.Services.ScriptService()> _
<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
<ScriptService()> _
Public Class Service
Inherits System.Web.Services.WebService
<WebMethod()> _
<ScriptMethod(ResponseFormat:=ResponseFormat.Json)> _
Public Function GetCustomers(ByVal prefix As String) As String()
Dim customers As New List(Of String)()
Using conn As New SqlConnection()
conn.ConnectionString = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using cmd As New SqlCommand()
cmd.CommandText = "select ContactName, CustomerId from Customers where " & "ContactName like @SearchText + '%'"
cmd.Parameters.AddWithValue("@SearchText", prefix)
cmd.Connection = conn
conn.Open()
Using sdr As SqlDataReader = cmd.ExecuteReader()
While sdr.Read()
customers.Add(String.Format("{0}-{1}", sdr("ContactName"), sdr("CustomerId")))
End While
End Using
conn.Close()
End Using
Return customers.ToArray()
End Using
End Function
End Class
پیاده سازی client side
جمع آوری لیست تکمیل خودکار
در اجرای client side ، داده های دریافت شده از سرور در رویداد موفقیت پردازش می شود. یک حلقه برای هر مورد دریافت شده در لیست اقلام اجرا می شود و سپس یک شی با قسمت متنی در ویژگی برچسب و قسمت ارزش در ویژگی val بازگردانده می شود.
ذخیره قسمت Value ، هنگام انتخاب گزینه مورد نظر
در قسمت انتخاب رویداد از JQuery Autocomplete ، مقدار (در اینجا شناسه مشتری) را در قسمت hfCustomerId Hidden Field ذخیره می کنیم تا بتوان آن را server side گرفت.
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"
type = "text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
type = "text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel = "Stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function () {
$("#<%=txtSearch.ClientID %>").autocomplete({
source: function (request, response) {
$.ajax({
url: '<%=ResolveUrl("~/Service.asmx/GetCustomers") %>',
data: "{ 'prefix': '" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item.split('-')[0],
val: item.split('-')[1]
}
}))
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
},
select: function (e, i) {
$("#<%=hfCustomerId.ClientID %>").val(i.item.val);
},
minLength: 1
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
<asp:HiddenField ID="hfCustomerId" runat="server" />
<br />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick = "Submit" />
</form>
</body>
</html>
دریافت کلید گزینه انتخابی و ارزش server side
کلید (در اینجا نام مشتری) و مقدار (در اینجا شناسه مشتری) می توانند با کلیک روی دکمه ارسال به روش زیر ، server side گرفته شوند.
C #
protected void Submit(object sender, EventArgs e)
{
string customerName = Request.Form[txtSearch.UniqueID];
string customerId = Request.Form[hfCustomerId.UniqueID];
}
VB.Net
Protected Sub Submit(ByVal sender As Object, ByVal e As System.EventArgs)
Dim customerName As String = Request.Form(txtSearch.UniqueID)
Dim customerId As String = Request.Form(hfCustomerId.UniqueID)
End Sub
عکسهای صفحه
کار خودکار JQuery با استفاده از وب سرویس
دریافت کلید و ارزش آیتم انتخابی خودکار
