<\/div>\n

Bu yaz\u0131m\u0131zda Asp.NET MVC mimarisinde Ajax teknolojosini kullanmay\u0131 inceleyece\u011fiz.\u00d6nceki yaz\u0131lar\u0131mdan Asp.NET MVC \u2013 Ajax<\/a> ba\u015fl\u0131kl\u0131 yaz\u0131m\u0131zda belirtti\u011fimiz gibi gerekli JQuery k\u00fct\u00fcphaneleri projeye entegre edildikten ve web.config dosyas\u0131nda ayarlar yap\u0131ld\u0131ktan sonra Ajax \u00e7al\u0131\u015fmalar\u0131n\u0131 ger\u00e7ekle\u015ftirebiliriz.
\n<\/p>\n

Konuyu fazla uzatmadan direkt AjaxHelper metodlar\u0131na s\u0131ras\u0131yla de\u011finmek istiyorum.<\/p>\n

Ajax.ActionLink<\/span><\/strong>
\nBu metod sayesinde, bir link olu\u015fturulup, olu\u015fturulan bu link ile bir Ajax metodu tetiklenebilmektedir.Bu metodun temel unsurlar\u0131ndan birisi sayfa yenilenmeden Client tabanl\u0131 i\u015flemler ger\u00e7ekle\u015ftirmektir.Tabi ki de tetikleyece\u011fi Ajax metodunu manuel olarak yazmak zorunda de\u011filiz.Bu metod i\u015flevselli\u011fi gere\u011fi b\u00fct\u00fcn i\u015flemleri kendisi ger\u00e7ekle\u015ftirmektedir.Lakin 12 OverLoad’a sahiptir.Bu sebepten dolay\u0131 yerine g\u00f6re gayet esnek ve kullan\u0131\u015fl\u0131 bir metoddur.
\n\u00d6rnek olarak a\u015fa\u011f\u0131da en \u00e7ok kullan\u0131lan 1. OverLoad’\u0131n\u0131n prototipini sunuyorum.<\/p>\n

\r\n@Ajax.ActionLink\r\n(\r\nstring linkText,\r\nstring actionName,\r\nAjaxOptions ajaxOptions\r\n)\r\n<\/pre>\nParametrelerden bahsedersek e\u011fer;<\/p>\n\nlinkText<\/strong> : Olu\u015fturaca\u011fi linkin ad\u0131.<\/li>\n
actionName<\/strong> : Olu\u015fturdu\u011fu link tetiklendi\u011fi anda Ajax metodu ile i\u015flemleri ger\u00e7ekle\u015ftirece\u011fi Action metodun ad\u0131.<\/li>\najaxOptions<\/strong> : Bu parametre fark\u0131ndaysan\u0131z referans tipli bir de\u011fi\u015fken tipindedir.Yani i\u00e7ine bir AjaxOptions nesnesi almaktad\u0131r.Peki AjaxOptions nesnesi nedir?
\nBu metodumuzun otomatik olarak olu\u015fturaca\u011f\u0131 Ajax metodunun \u00f6zelliklerini ta\u015f\u0131yan bir nesnedir.AjaxOptions nesnesinin \u00f6zelliklerini incelersek e\u011fer UpdateTargetId ve HttpMethod \u00f6zellikleriyle kar\u015f\u0131la\u015faca\u011f\u0131z.
\nUpdateTargetId<\/em> \u00f6zelli\u011fi, Ajax metodu ile i\u015flemleri ger\u00e7ekle\u015ftirece\u011fi Action metottan gelen sonucu, span ya da div gibi HTML nesnelerine yazd\u0131rmaktad\u0131r.O nesnenin id Attribute’unu vermemiz yeterli olacakt\u0131r.
\nHttpMethod<\/em> \u00f6zelli\u011fi ise, “Post” ve “Get” olmak \u00fczere iki de\u011fer almaktad\u0131r.<\/li>\n<\/ul>\n\u015eimdi bu metodumuzla ilgili bir \u00f6rnek yapal\u0131m.\u00d6rne\u011fimizin i\u00e7eri\u011fi o anki tarih bilgisini Ajax metodlar\u0131yla Client tabanl\u0131 olarak getirttirmek olsun.<\/p>\n
Controller katman\u0131m\u0131zda “Home(Controller).cs” isminde bir Controller s\u0131n\u0131f\u0131 olu\u015ftural\u0131m ve i\u00e7ine ActionResult tipinden olan “Index” isimli ve string tipten olan “TarihGetir” isimli metodlar\u0131m\u0131z\u0131 olu\u015ftural\u0131m ve i\u00e7eriklerini a\u015fa\u011f\u0131daki gibi ayarlayal\u0131m.<\/p>\n\r\n    public class HomeController : Controller\r\n    {\r\n        public ActionResult Index()\r\n        {\r\n            return View();\r\n        }\r\n        public string TarihGetir()\r\n        {\r\n            return "Tarih : " + DateTime.Now;\r\n        }\r\n    }\r\n<\/pre>\n“Index” isimli Action metodumuzun View g\u00f6r\u00fcnt\u00fcs\u00fcn\u00fc olu\u015fturup a\u015fa\u011f\u0131daki kodlar\u0131 yazal\u0131m.<\/p>\n\r\n@Ajax.ActionLink\r\n(\r\n"Tarih Bilgisini G\u00f6ster",\r\n"TarihGetir",\r\nnew AjaxOptions { UpdateTargetId = "alan", HttpMethod = "POST" }\r\n)\r\n<div id="alan">Tarih Bilgisi Belli De\u011fil<\/div>\r\n<\/pre>\n\u015eimdi buraya kadar neler yapt\u0131k bir tartal\u0131m.View katman\u0131m\u0131zda ki “Index.cshtml” sayfas\u0131nda “Tarih Bilgisini G\u00f6ster” isminde linkimizi olu\u015fturuyoruz.Bu linkin Ajax kullanarak Client tabanl\u0131 bir \u015fekilde “TarihGetir” isimli Action metodu \u00e7al\u0131\u015ft\u0131rmas\u0131n\u0131 s\u00f6yl\u00fcyoruz.”TarihGetir” Action metodundan d\u00f6nen sonu\u00e7lar\u0131 ise AjaxOptions nesnemizde belirtti\u011fimiz “alan” id’sine sahip HTML nesnesine yazd\u0131r\u0131yoruz.<\/p>\nE\u011fer bu \u015fekilde projemizi derleyip \u00e7al\u0131\u015ft\u0131rd\u0131\u011f\u0131m\u0131zda a\u015fa\u011f\u0131daki ekran g\u00f6r\u00fcnt\u00fcs\u00fc gelmektedir.
\n<\/a>
\nLinke t\u0131kland\u0131ktan sonra ekran g\u00f6r\u00fcnt\u00fcs\u00fc a\u015fa\u011f\u0131daki gibi olmaktad\u0131r.
\n<\/a>
\nAjax.ActionLink metodunu irdelemeyi burada sonland\u0131r\u0131yorum.Bir sonraki sayfam\u0131zda Ajax.BeginForm metodunu inceleyece\u011fiz.
\n
\nAjax.BeginForm<\/span><\/strong>
\nBu metodun Ajax.ActionLink metodundan tek fark\u0131, bir form olu\u015fturmakta ve form i\u00e7inde bulunan nesnelerdeki verileri Client tabanl\u0131(Ajax ile<\/span>) Post edebilmektedir.Tabi tetiklenme i\u015flemini bir buton ile ger\u00e7ekle\u015ftirmemiz gerekmektedir.<\/p>\n
Ajax.BeginForm metodunun parametreleri Ajax.ActionLink metodunun parametreleriyle benzerlik g\u00f6stermektedir.<\/p>\n
Prototipi a\u015fa\u011f\u0131daki gibidir.<\/p>\n
\r\n@using (Ajax.BeginForm("string actionName","AjaxOptions ajaxOptions"))\r\n{\r\n\r\n}\r\n<\/pre>\nBurada “actionName” parametresiyle formun tetiklenmesi an\u0131nda hangi metodunun \u00e7al\u0131\u015ft\u0131r\u0131laca\u011f\u0131n\u0131 belirtiyoruz.”ajaxOptions” parametresiyle ise gerekli Ajax ayalar\u0131n\u0131 AjaxOptions nesnesiyle ayarlayabiliyoruz.<\/p>\n
\u00d6rnek bir kullan\u0131m i\u00e7in a\u015fa\u011f\u0131daki kod blo\u011funu inceleyiniz.
\nNot :<\/span> “Home(Controller).cs” isimli Controller s\u0131n\u0131f\u0131nda \u00e7al\u0131\u015ft\u0131\u011f\u0131m\u0131z\u0131 varsay\u0131yorum.<\/span><\/p>\n\r\n@using (Ajax.BeginForm("Isim", new AjaxOptions() { UpdateTargetId = "IDIsim", HttpMethod = "Post" }))\r\n{\r\n    @Html.TextBox("txtIsim", "Ad\u0131n\u0131z\u0131 giriniz...")\r\n    <input type="submit" value="G\u00f6ster" \/>\r\n    <div id="IDIsim">TextBox'a yazd\u0131\u011f\u0131n\u0131z isim burada g\u00f6z\u00fckecektir.<\/div>\r\n}\r\n<\/pre>\nYukar\u0131daki kod blo\u011funu incelerseniz e\u011fer Ajax.BeginForm metodu ile bir form olu\u015fturuluyor ve bu formun tetiklenmesi durumunda “Isim” isimli bir metodun \u00e7al\u0131\u015ft\u0131r\u0131laca\u011f\u0131 bildiriliyor.<\/p>\n
\u015eimdi ise Controller sayfam\u0131zdaki “Isim” adl\u0131 metodumuzu inceleyelim.<\/p>\n\r\n        public string Isim(string txtIsim)\r\n        {\r\n            return txtIsim;\r\n        }\r\n<\/pre>\nProjemizi bu \u015fekilde derleyip \u00e7al\u0131\u015ft\u0131rd\u0131\u011f\u0131m\u0131z zaman kar\u015f\u0131m\u0131za a\u015fa\u011f\u0131daki gibi bir ekran g\u00f6r\u00fcnt\u00fcs\u00fc gelmektedir.
\n<\/a>
\nAd\u0131m\u0131z\u0131 yaz\u0131p butona t\u0131klad\u0131\u011f\u0131m\u0131z zaman Client tabanl\u0131 i\u015flem sonucunda a\u015fa\u011f\u0131daki ekran g\u00f6r\u00fcnt\u00fcs\u00fc gelmektedir.
\n<\/a><\/p>\n
Burada \u00f6nemli bir hususa de\u011finmek istiyorum.
\nBu \u00f6rne\u011fimizde butona t\u0131klad\u0131\u011f\u0131m\u0131z anda Asp.NET WebForms mimarisinde ki gibi bir POST i\u015flemi ger\u00e7ekle\u015ftirilmi\u015ftir.Lakin bu i\u015flem neticesinde TextBox’\u0131m\u0131z da ki de\u011fer silinmemi\u015ftir.Ajax ile Client tabanl\u0131 bir i\u015flem ger\u00e7ekle\u015ftirildi\u011finden dolay\u0131 sayfa yeniden y\u00fcklenmemekte ve bu sebepten dolay\u0131 TextBox’da ki de\u011fer kalm\u0131\u015ft\u0131r.Bu durumu ViewState durumuyla kar\u0131\u015ft\u0131rmamak gerekir.<\/p>\n
Bu yaz\u0131m\u0131z\u0131nda sonuna gelmi\u015f olduk.
\nBir sonraki yaz\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere..
\n\u0130yi \u00e7al\u0131\u015fmalar..<\/p>\n","protected":false},"excerpt":{"rendered":"
Bu yaz\u0131m\u0131zda Asp.NET MVC mimarisinde Ajax teknolojosini kullanmay\u0131 inceleyece\u011fiz.\u00d6nceki yaz\u0131lar\u0131mdan Asp.NET MVC \u2013 Ajax ba\u015fl\u0131kl\u0131 yaz\u0131m\u0131zda belirtti\u011fimiz gibi gerekli JQuery k\u00fct\u00fcphaneleri projeye entegre edildikten ve web.config dosyas\u0131nda ayarlar yap\u0131ld\u0131ktan sonra Ajax \u00e7al\u0131\u015fmalar\u0131n\u0131 ger\u00e7ekle\u015ftirebiliriz.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,345],"tags":[288,744,522,746,523,283],"class_list":["post-2237","post","type-post","status-publish","format-standard","hentry","category-asp-net-mvc","category-mvc-4-0","tag-actionlink","tag-ajax","tag-ajaxoptions","tag-asp-net-mvc","tag-beginform","tag-mvc"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/2237","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=2237"}],"version-history":[{"count":0,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/2237\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=2237"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=2237"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=2237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}