پیاده سازی تکمیل خودکار جی کوئری با استفاده از وب سرویس در ASP.Net
با سلام در این مقاله توضیح خواهیم داد که چگونه از پلاگین Autocomplete جی کوئری با ASP.Net Web Services استفاده کنیم .
بانک اطلاعاتی
برای پایگاه داده از پایگاه NorthWind استفاده می کنیم. شما می توانید آن را با استفاده از لینک زیر دانلود کنید
دانلود Northwind پایگاه داده
رشته اتصال
در زیر رشته اتصال به پایگاه داده ای که در web.config گذاشته ایم است.
<connectionStrings>
<addname="constr"connectionString="Data Source = .\SQL2005;
Initial Catalog = Northwind; Integrated Security = true"/>
</connectionStrings>
ایجاد وب سرویس
کد زیر وب سرویس است که ارتباط های خودکار تکمیل jQuery را برطرف می کند و سوابق مربوطه را از جدول مشتریان پایگاه Northwind برمی گرداند.
query انتخاب می شود . نام و شناسه مشتری مطابق متن پیشوند است.
سوابق استخراج شده پردازش شده و جفت کلیدی ارزش با اضافه کردن فیلد شناسه به نام در فرمت زیر ایجاد می شود: {0} - {1} که در آن نام {0} و {1} شناسه است.
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، داده های دریافت شده از سرور پردازشگر رویداد با موفقیت پردازش می شود. یک حلقه برای هر مورد دریافت شده در لیست موارد اجرا می شود و سپس یک شی با قسمت متن در property label و مقدار value در property val بازگردانده می شود.
ذخیره قسمت Value هنگامی که مورد انتخاب شده است
در رویداد برگزیده Autocomplete جی کوئری، مقدار (اینجا شناسه مشتری) را در فیلد پنهان hfCustomerId ذخیره می کنیم تا بتوان آن را به 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 با استفاده از وب سرویس های
دريافت کليد و ارزش بخش انتخاب تکميل خودکار
