<\/div>\n

\u00d6nceki yaz\u0131lar\u0131mdan Ajax AutoCompleteExtender Kontrol\u00fc \u0130le Google Suggest Yap\u0131s\u0131<\/a> ba\u015fl\u0131kl\u0131 yaz\u0131mda Asp.NET mimarisinde AutoCompleteExtender<\/em> kontrol\u00fc ile Google Suggest yap\u0131s\u0131n\u0131n projelerimizde nas\u0131l kullan\u0131laca\u011f\u0131na de\u011finmi\u015ftik.Gelin g\u00f6r\u00fcn ki, Asp.NET MVC mimarisinde b\u00f6yle bir yap\u0131ya ihtiya\u00e7 duyarsak e\u011fer ToolBox nesneleri olmad\u0131\u011f\u0131ndan ve Ajax Componentlerinin haz\u0131rlar\u0131 bulunmad\u0131\u011f\u0131ndan dolay\u0131 i\u015fimiz birazdaha zor gibi g\u00f6z\u00fckmektedir.Oturup JQuery ya da Ajax ile kodlama yapmaktansa \u015fimdi sizlere payla\u015faca\u011f\u0131m bir JQuery k\u00fct\u00fcphanesiyle bu i\u015flemi nas\u0131l h\u0131zl\u0131 bir \u015fekilde ger\u00e7ekle\u015ftirece\u011fimizi bir \u00f6rneklendirmeyle g\u00f6rece\u011fiz.
\n
\nAsp.NET MVC projesinde Suggest yap\u0131s\u0131n\u0131 kullanmak i\u00e7in \u00f6ncelikle a\u015fa\u011f\u0131daki verilen .rar dosyas\u0131n\u0131 indirmeniz gerekmektedir.
\nAsp.NET MVC JQuery AutoComplete<\/a>
\nBu dosyay\u0131 rardan \u00e7\u0131kard\u0131ktan sonra i\u00e7erisinde “jquery.autocomplete.css<\/em>” ve “jquery.autocomplete.js<\/em>” isimli iki adet dosya g\u00f6receksiniz.\u00d6ncelikle ilk i\u015finiz bu dosyalar\u0131 MVC projenize ekleyip, Layout sayfan\u0131za entegre etmekdir.(Tabi jquery.autocomplete.js dosyas\u0131n\u0131n \u00e7al\u0131\u015fabilmesi i\u00e7in jquery-1.8.2.js ve jquery-ui-1.8.24.js k\u00fct\u00fcphanelerinin projeye entegre edildi\u011fi varsay\u0131lmaktad\u0131r.<\/span>)<\/p>\n

\r\n    @Styles.Render("~\/Content\/jquery.autocomplete.css")\r\n    @Scripts.Render("~\/Content\/jquery.autocomplete.js")\r\n<\/pre>\nBu i\u015flemleri ger\u00e7ekle\u015ftirdikten sonra Suggest yap\u0131s\u0131 i\u00e7in Controller katman\u0131m\u0131zda ki Action metodumuzu haz\u0131rlamal\u0131y\u0131z.<\/p>\n
Ben \u00f6rnek misali Northwind veritaban\u0131ndaki Personeller tablosunu kullanaca\u011f\u0131m.<\/p>\n\r\n    public class PersonelController : Controller\r\n    {\r\n        VeriTabaniDataContext Veri = new VeriTabaniDataContext();\r\n\r\n        public ActionResult Index()\r\n        {\r\n            return View();\r\n        }\r\n\r\n        public ActionResult PersonelGetir(string q)\r\n        {\r\n            var PersonelAdi = (from p in Veri.Personellers where p.Adi.Contains(q) select p.Adi).Distinct().Take(10);\r\n\r\n            string content = string.Join<string>("\\n", PersonelAdi);\r\n            return Content(content);\r\n        }\r\n    }\r\n<\/pre>\nG\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi TextBox nesnesine yaz\u0131lacak her karakter i\u00e7in “Personel(Controller).cs” isimli Controller katman\u0131nda bulunan “PersonelGetir” isimli Action metod tetiklenecek ve yeni sonu\u00e7 listesi g\u00f6nderilecektir.<\/p>\n
Controller katman\u0131m\u0131z\u0131 yazd\u0131k, kullanaca\u011f\u0131m\u0131z JQuery k\u00fct\u00fcphanelerini de projemize entegre ettik.Eee…!
\nPeki \u015fimdi ne yapmam\u0131z gerekiyor?<\/strong> diye sorarsan\u0131z e\u011fer hemen s\u00f6yleyeyim.<\/p>\n
Hangi TextBox nesnesinde \u00e7al\u0131\u015faca\u011f\u0131m\u0131z\u0131 belirledikten sonra ufak bir kod ile JQuery metodu \u00e7a\u011f\u0131rd\u0131\u011f\u0131m\u0131z zaman i\u015flemimiz sona erecek ve TextBox’ta Suggest yap\u0131s\u0131 h\u0131zl\u0131 bir \u015fekilde \u00e7al\u0131\u015facakt\u0131r.<\/p>\n\r\n    <script type="text\/javascript">\r\n            $(document).ready(function () {\r\n                $("#txtPersonelAdi").autocomplete('@Url.Action("PersonelGetir", "Personel")', { minChars: 3 });\r\n            });\r\n    <\/script>\r\n    <input type="text" id="txtPersonelAdi" name="txtPersonelAdi" \/>\r\n<\/pre>\nYukar\u0131daki kod blo\u011funu incelerseniz e\u011fer id si “txtPersonelAdi” olan TextBox i\u00e7in JQuery ile \u00e7a\u011fr\u0131lm\u0131\u015f olan “autocomplete” metodu sayesinde Suggest yap\u0131s\u0131 kullan\u0131lm\u0131\u015ft\u0131r.<\/p>\nEkran g\u00f6r\u00fcnt\u00fcs\u00fc a\u015fa\u011f\u0131daki gibi olacakt\u0131r.
\n<\/a><\/p>\n
Faydalanman\u0131z dile\u011fiyle..
\n\u0130yi \u00e7al\u0131\u015fmalar..<\/p>\n","protected":false},"excerpt":{"rendered":"
\u00d6nceki yaz\u0131lar\u0131mdan Ajax AutoCompleteExtender Kontrol\u00fc \u0130le Google Suggest Yap\u0131s\u0131 ba\u015fl\u0131kl\u0131 yaz\u0131mda Asp.NET mimarisinde AutoCompleteExtender kontrol\u00fc ile Google Suggest yap\u0131s\u0131n\u0131n projelerimizde nas\u0131l kullan\u0131laca\u011f\u0131na de\u011finmi\u015ftik.Gelin g\u00f6r\u00fcn ki, Asp.NET MVC mimarisinde b\u00f6yle bir yap\u0131ya ihtiya\u00e7 duyarsak e\u011fer...<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,11,345],"tags":[745,746,566,253,254],"class_list":["post-2504","post","type-post","status-publish","format-standard","hentry","category-ajax","category-asp-net-mvc","category-mvc-4-0","tag-asp-net","tag-asp-net-mvc","tag-autocomplete","tag-google","tag-suggest"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/2504","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=2504"}],"version-history":[{"count":0,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/2504\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=2504"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=2504"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=2504"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}