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

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

 با سلام در این مقاله توضیح می دهیم که چگونه از پلاگین جی کوئری استفاده کنیم تا یک تکمیل خودکار با تصاویر یا آیکون ایجاد شود.
بنابراین پلاگین از پلاگین جی کوئری Autocomplete موجود استفاده می کند . افزونه تصویر پلاگین Autocomplete , پلاگین جی کوئری عادی را به تصویری که با تصاویر دارد تبدیل می کند. بنابراین بر روی آن شروع کنیم.
توجه:

اگرچه  این برنامه را از طریق ASP.Net توصیف می کنیم اما می توانید از این پلاگین با هر زبان PHP، JSP، ASP و غیره استفاده کنید.

کد به عنوان HTML
در زیر کد به عنوان HTML  صفحه است.

<html xmlns="http://www.w3.org/1999/xhtml">
<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 src="scripts/ImageAutoComplete.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#<%=txtSearch.ClientID%>").ImageAutocomplete('<%=ResolveUrl("~/Search_CS.ashx")%>');
});
</script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
        <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick = "Submit" />
    </form>
</body>
</html>

همانطور که متوجه شدید ، یک جعبه متن داریم که با استفاده از افزونه ImageAutocomplete به جعبه متن AutoComplete تبدیل می کنیم. همچنین Search_CS.ashx یک Handler است که در صورت درخواست، داده ها را به صورت خودکار تکمیل می کند. برای کاربران VB.Net یک Handler Search_VB.ashx خواهد بود .

پیاده سازی Handler
Handler  Server side به سادگی درخواست را قبول می کند، query را در پایگاه داده می کشد و داده ها را به تکمیل خودکار بازمیگرداند.
توجه :

از جدول کارکنان پایگاه داده نمونه Northwind استفاده می کنیم. شما می توانید آن را اینجا دانلود کنید .
در handler  یک مورد تکمیل خودکار را فرمت می کنیم تا بتوانم تصویر را همراه با مسیر آن اضافه کنیم. در این صورت تصاویر را در فرمت {EmployeeId} .jpg ذخیره میکنیم .
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"];
        string photosPath = "photos/";
        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}{3}.jpg{4}",
                          sdr["FirstName"], sdr["LastName"], photosPath, 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 photosPath As String = "photos/"
        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}{3}.jpg{4}", sdr("FirstName"), _
                    sdr("LastName"), photosPath, 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

وارد کردن ارزش Server Side
شما می توانید ارزش Server Side  را به روش زیر بارگیری کنید .
C #

protected void Submit(object sender, EventArgs e)
{
    string name = Request.Form[txtSearch.UniqueID];
}

VB.Net

Protected Sub Submit(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSubmit.Click
     Dim name As String = Request.Form(txtSearch.UniqueID)
End Sub

عکس روی صفحه
در زیر تصویری از افزونه تصویر autocomplete در  jQuery را نمایش می دهد .

 


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

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