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

استفاده از AJAX AutoCompleteExtender در نمایش لیست تصاویر به صورت autocomplete در ASP.Net
0 0
استفاده از AJAX AutoCompleteExtender در نمایش لیست تصاویر به صورت autocomplete در ASP.Net

با سلام در این مقاله نحوه نمایش تصاویر در لیست autocomplete در AJAX AutoCompleteExtender Control درASP.Net را توضیح می دهیم .
بانک اطلاعاتی
برای این آموزش، از جدول کارمندان پایگاه داده NorthWind را استفاده میکنیم . شما می توانید پایگاه داده NorthWind را با استفاده از لینک زیر دانلود کنید
دانلود Northwind پایگاه داده
رشته اتصال
در زیر رشته اتصال به پایگاه داده ای در web.config گذاشته ایم .

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

کنترل جعبه ابزار AJAX
DLL Toolkit AJAX Control را با استفاده از لینک زیر دانلود کنید و مرجع پروژه خود را اضافه کنید.
دانلود AJAX Control Tookit
پس از انجام این کار، آن را در صفحه ASPX ثبت کنید

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

کد HTML
در زیر کد HTMLدر وب سایت ASP.Net است

<asp:ScriptManager ID="ScriptManager1" runat="server"
EnablePageMethods = "true">
</asp:ScriptManager>
 
<asp:TextBox ID="txtContactsSearch" runat="server"></asp:TextBox>
<cc1:AutoCompleteExtender ServiceMethod="SearchEmployees"
    MinimumPrefixLength="1"
    CompletionInterval="100" EnableCaching="false" CompletionSetCount="10"
    TargetControlID="txtContactsSearch" OnClientPopulated =    "Employees_Populated"
    OnClientItemSelected = " OnEmployeeSelected"
    ID="AutoCompleteExtender1" runat="server" FirstRowSelected = "false">
</cc1:AutoCompleteExtender>

همانطور که در بالا متوجه شدید، ScriptManager را در یک TextBox قرار داده اید که به عنوان AutoComplete و  AJAX کنترل Toolkit AutoCompleteExtender  است .  یک روش SearchEmployees را با استفاده از ویژگی ServiceMethod فراخوانی می کنیم.  همچنین دو رویداد جانبی مشتری را برای نشان دادن تصاویری که بعدا توضیح خواهم داد، مشخص کرده ایم.
روشهای Server Side
روش زیر برای پر کردن فهرست کامل خودکار کارکنان استفاده می شود .
C #

[System.Web.Script.Services.ScriptMethod()]
[System.Web.Services.WebMethod]
public static List<string> SearchEmployees(string prefixText, int count)
{
    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;
            conn.Open();
            List<string> employees = new List<string>();
            using (SqlDataReader sdr = cmd.ExecuteReader())
            {
                while (sdr.Read())
                {
                    employees.Add(AjaxControlToolkit.AutoCompleteExtender
                       .CreateAutoCompleteItem(string.Format("{0} {1}",
                       sdr["FirstName"], sdr["LastName"]),
                       sdr["EmployeeId"].ToString()));
                }
            }
            conn.Close();
            return employees;
        }
    }
}

VB.Net

<System.Web.Script.Services.ScriptMethod(), _
    System.Web.Services.WebMethod()> _
Public Shared Function SearchEmployees(ByVal prefixText As String, ByVal count As Integer) As List(Of String)
        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
        conn.Open()
        Dim employees As List(Of String) = New List(Of String)
        Dim sdr As SqlDataReader = cmd.ExecuteReader
        While sdr.Read
            employees.Add(AjaxControlToolkit.AutoCompleteExtender _
            .CreateAutoCompleteItem(String.Format("{0} {1}", _
             sdr("FirstName"), sdr("LastName")), sdr("EmployeeId").ToString()))
        End While
        conn.Close()
        Return employees
End Function

روش فوق به سادگی مشتریان جدول را جستجو می کند و لیستی از نام کارمند را که مطابق متن پیشوند است، باز می گرداند. همچنین شناسه کارمند را با استفاده از قسمت AutoCompleteExtender درAJAX Control Toolkit AutoCompleteExtender  بررسی می کنیم .
بعد از آن Client Side برای نمایش تصاویر کارمندان استفاده می شود
برای اطلاعات بیشتر در مورد استفاده از کنترل Ajax Control Toolkit AutoCompleteExtender در ASP.Net، مقاله زیر را مطالعه کنید
استفاده از AutoCompleteExtender در جعبه ابزار AJAX بدون استفاده از Web Services در ASP.Net
روشهای Client Side
روشهای زیر برای جاسازی تصاویر در AutoCompleteList ازکنترل جعبه ابزار AJAX AutoCompleteExtender استفاده می شود .

<script type = "text/javascript">
function Employees_Populated(sender, e) {
    var employees = sender.get_completionList().childNodes;
    for (var i = 0; i < employees.length; i++) {
        var div = document.createElement("DIV");
        div.innerHTML = "<img style = 'height:50px;width:50px' src = 'photos/"
        + employees[i]._value + ".jpg' /><br />";
        employees[i].appendChild(div);
    }
}
function OnEmployeeSelected(source, eventArgs) {
    var idx = source._selectIndex;
    var employees = source.get_completionList().childNodes;
    var value = employees[idx]._value;
    var text = employees[idx].firstChild.nodeValue;
    source.get_element().value = text;
}
</script>

Employees_Populated زمانی فراخوانی می شود که AutoCompleteList در سمت مشتری قرار دارد. این روش تصاویر را به صورت AutoComplete جاسازی می کند.
OnEmployeeSelected متن و مقدار عناصر AutoComplete انتخاب را باز می گرداند.
در تصویر زیر کار AutoComplete Extender با تصاویر را توصیف می کند

 


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

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