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

پیاده سازی ارزش کلیدی با استفاده از پلاگین Autocomplete جی کوئری در Asp.net
0 0
پیاده سازی ارزش کلیدی با استفاده از پلاگین Autocomplete جی کوئری در 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 با استفاده از وب سرویس های

 

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


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

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