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

استفاده از جی کوئری در پلاگین AutoComplete با ASP.Net
0 0
استفاده از جی کوئری در پلاگین AutoComplete با ASP.Net

با سلام در این مقاله توضیح خواهم داد که چگونه از Plugin AutoComplete جی کوئری در ASP.Net استفاده کنید. با استفاده از jQuery ما می توانیم به راحتی Textbox AutoComplete را بدون نوشتن کد زیاد ایجاد کنیم.
بانک اطلاعاتی
برای پایگاه داده من از پایگاه NorthWind مایکروسافت استفاده می کنم. شما می توانید همان را با استفاده از لینک زیر دانلود کنید
دانلود Northwind پایگاه داده
رشته اتصال
در زیر رشته اتصال به پایگاه داده ای که در web.config گذاشته ام است.

<connectionStrings>
      <addname="constr"connectionString="Data Source = .\SQLExpress;       
       Initial Catalog = Northwind; Integrated Security = true"/>
</connectionStrings>

دانلود جی کوئری
شما می توانید آخرین نسخه جی کوئری و پلاگین AutoComplete را با استفاده از لینک های زیر دانلود کنید.
دانلود جی کوئری

دانلود کامپوننت جی کوئری پلاگین
تکمیل خودکار
ما باید یک handler ایجاد میکنیم که تمام درخواستهای AutoComplete را پردازش و نتایج را به صفحه وب ASP.Net بازمیگرداند.
C #

<%@ WebHandler Language="C#" Class="Search_CS" %>
 
using System;
using System.Web;
using System.Data.SqlClient;
using System.Configuration;
using System.Text;
 
public class Search_CS : IHttpHandler {
   
    public void ProcessRequest (HttpContext context) {
        string prefixText = context.Request.QueryString["q"];
        using (SqlConnection conn = new SqlConnection())
        {
            conn.ConnectionString = ConfigurationManager
                    .ConnectionStrings["constr"].ConnectionString;
            using (SqlCommand cmd = new SqlCommand())
            {
                cmd.CommandText = "select ContactName from Customers where " +
                "ContactName like @SearchText + '%'";
                cmd.Parameters.AddWithValue("@SearchText", prefixText);
                cmd.Connection = conn;
                StringBuilder sb = new StringBuilder();
                conn.Open();
                using (SqlDataReader sdr = cmd.ExecuteReader())
                {
                    while (sdr.Read())
                    {
                        sb.Append(sdr["ContactName"])
                            .Append(Environment.NewLine);
                    }
                }
                conn.Close();
                context.Response.Write(sb.ToString());
            }
        }
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }
}


VB.Net

<%@ WebHandler Language="VB" Class="Search_VB" %>
 
Imports System
Imports System.Web
Imports System.Data.SqlClient
Imports System.Configuration
Imports System.Text
 
Public Class Search_VB : Implements IHttpHandler
   
    Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
        Dim prefixText As String = context.Request.QueryString("q")
        Dim conn As SqlConnection = New SqlConnection
        conn.ConnectionString = ConfigurationManager _
                .ConnectionStrings("constr").ConnectionString
        Dim cmd As SqlCommand = New SqlCommand
        cmd.CommandText = ("select ContactName from Customers where " & _
                           "ContactName like @SearchText + '%'")
        cmd.Parameters.AddWithValue("@SearchText", prefixText)
        cmd.Connection = conn
        Dim sb As StringBuilder = New StringBuilder
        conn.Open()
        Dim sdr As SqlDataReader = cmd.ExecuteReader
        While sdr.Read
            sb.Append(sdr("ContactName")) _
                .Append(Environment.NewLine)
        End While
        conn.Close()
        context.Response.Write(sb.ToString)
    End Sub
 
    Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
        Get
            Return False
        End Get
    End Property
End Class

handler بالا درخواستی از jQuery را در یک پارامتر Querystring q می پذیرد. بر اساس ارزش این پارامتر، دستیار جدول مشتری را جستجو می کند و مشتری هایی را که نام آنها توسط کاربر مطابق زیردرخواست شده  است بازمی گرداند.
پیاده سازی Client Side
در زیر توضیحات مربوط به پیاده سازی کامپایلر کامپوننت jQuery AutoComplete را شرح میدهیم . هر دو نسخه C # و VB.Net دقیقا همانند آدرس URL handler است.
نسخه C #

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
<link href="css/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
<script src="scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery.autocomplete.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#<%=txtSearch.ClientID%>").autocomplete('Search_CS.ashx');
    });      
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
    </div>
    </form>
</body>
</html>

نسخه VB.Net

<head id="Head1" runat="server">
<title></title>
<link href="css/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
<script src="scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery.autocomplete.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#<%=txtSearch.ClientID%>").autocomplete('Search_VB.ashx');
    });      
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
    </div>
    </form>
</body>

در بالا، متوجه شده اید که تکمیل پیکربندی خودکار جی کوئری آسان است. شما فقط باید فایل JS مورد نیاز را بگیرید و در یک جعبه متن بگذارید و قطعه کوچک زیر را بنویسید

<script type="text/javascript">
    $(document).ready(function() {
        $("#<TextBoxControlId>").autocomplete('<Url of handler>');
    });      
</script>

 


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

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