Asp.Net ve jQuery ile auto complete uygulamasi

aspnet
  • Turgay Can
  • Tarih

    01 Dec, 2012
  • Yorum

    0
  • Görüntüleme

    2338
  • İndirme

    37

Asp.Net ve jQuery ile auto complete uygulamasi

Merhaba,

Bu uygulama genelde bir dropdownlist bileşeni yerine kullanılır. Bazı durumlarda dropdownlist içinde yüzlerce değer olabilir böyle durumlarda listemiz varolan sayfamızdan taşabilir ve oldukça kullanışsız olur.

Uygulama içinde : jQuery kütüphanelerini kullandım.
Kodsal açıklamaları comment ler ile kod blogları içinde belirttim.

mypage.aspx

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="mypage.aspx.cs" 
Inherits="mypage" %>

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1
    /DTD/xhtml1-transitional.dtd">

        <html xmlns="http://www.w3.org/1999/xhtml">
        <head runat="server">
            <meta charset="utf-8" />
            <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
    </script>
            <link rel="stylesheet"
 href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
            <script type="text/javascript" 
src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
            <title>Kodlapaylas.com Asp.Net Auto Complete supported by jQuery Page</title>
            <style type="text/css">
            font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
            font-size: 62.5%;
            </style>
            <script>

                $(function () {
                   //Asp.Net'in script tag'i ile sunucu tarafındaki değişken içine dolan değerlerin
    // istemci tarafında
                   //java script değişkenine atanması
                    var availableTags = [<%=myObjectString%>            
                ];
                    $("#tags").autocomplete({
                        source: availableTags
                    });
                });
            </script>
        </head>
        <body>

            <form id="form1" runat="server">
            <div class="ui-widget">
            <label for="tags">Etiketler : </label>
            <input id="tags" />
            </div>
            </form>
        </body>
        </html>

mypage.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Collections;
using System.Text;

public partial class mypage : System.Web.UI.Page
{
   //arayüzden erişmek için tanımlanmış public değişkenimiz
    public string myObjectString;

    protected void Page_Load(object sender, EventArgs e)
    {
       //Sayfa yüklenirken etiketlerimizi getiren metodu çağırıyoruz
        myObjectList();
    }

   void myObjectList()
    {

        System.Text.StringBuilder values =  new System.Text.StringBuilder();
        string value;
        for (int i = 0; i < 50; i++)
        {
            if (i == 49)
            {
                value = "\'" + "A" + i + "\'";
                values.Append(value);
                break;
            }
            else
            {
                value = "\'" + "A" + i + "\'" + ",";
                values.Append(value);
            }
            value = "";
        }

        myObjectString = values.ToString();
    }

}

Uygulama çalıştırdığınızda alacağınız örnek ekranlar.

Asp.Net ve jQuery Auto Complete


Asp.Net ve jQuery Auto Complete

0 Yorum..

Yorum yapmak için "Giriş yapın" yada "Misafir üye" olarak yorum yapabilirsiniz.

Yorum Yap