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

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

با سلام در این مقاله استفاده ازجی کوئری در  پیکربندی پلاگین 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 EmployeeId, FirstName, LastName" +
                    " from Employees where FirstName 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(string.Format("{0} {1}-{2}.jpg{3}",
                          sdr["FirstName"], sdr["LastName"], sdr["EmployeeId"],
                            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 EmployeeId, FirstName, LastName" & _
                       " from Employees where FirstName 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(String.Format("{0} {1}-{2}.jpg{3}", sdr("FirstName"), _
                    sdr("LastName"), sdr("EmployeeId"), 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 می پذیرد. بر اساس ارزش این پارامتر، handler جدول مشتری را جستجو می کند و مشتری هایی را که نام آنها توسط کاربر مطابق زیردرخواست شده است بازمی گرداند. نام تصویر را درون آیتم AutoComplete جداگانه با تیک (-) جاسازی می کنیم. در client side،  آن را جدا برای نمایش تصاویرقرار میدهیم .
پیاده سازی client side
در زیر  توضیحات مربوط به پیاده سازی کامپایلر کامپوننت jQuery AutoComplete را شرح میدهیم . هر دو نسخه C # و VB.Net دقیقا همانند آدرس URL handler است.
نسخه C #

<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", {
        width: 200,
        formatItem: function(data, i, n, value) {
        return "<img style = 'width:50px;height:50px' src='photos/"
            + value.split("-")[1] + "'/> " + value.split("-")[0];
        },
        formatResult: function(data, value) {
            return value.split("-")[0];
        }
    });
    });
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="txtSearch" runat="server" Width = "200"></asp:TextBox>
    </div>
    </form>
</body>

نسخه 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", {
        width: 200,
        formatItem: function(data, i, n, value) {
        return "<img style = 'width:50px;height:50px' src='photos/"
            + value.split("-")[1] + "'/> " + value.split("-")[0];
        },
        formatResult: function(data, value) {
            return value.split("-")[0];
        }
    });
    });
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
    </div>
    </form>
</body>

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

<script type="text/javascript">
    $(document).ready(function() {
    $("#<Id of the Control>").autocomplete("<Url of Handler>", {
        width: 200,
        formatItem: function(data, i, n, value) {
        return "<img style = 'width:50px;height:50px' src='photos/"
            + value.split("-")[1] + "'/> " + value.split("-")[0];
        },
        formatResult: function(data, value) {
            return value.split("-")[0];
        }
    });
    });
</script>

 


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

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