توضیحات و دانلود

جمع آور ی jQuery AutoComplete TextBox از پایگاه داده با استفاده از وب سرویس در ASP.NET
0 0
جمع آور ی 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 با استفاده از وب سرویس

 

دریافت کلید و ارزش آیتم انتخابی خودکار


دانلود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

ارسال نظر
ارسال پیام به :