<\/div>\n
Bu yaz\u0131m\u0131zda Asp.NET MVC mimarisinde Ajax ile dosya y\u00fckleme(file upload) i\u015flemini ele alaca\u011f\u0131z.Yaz\u0131 i\u00e7erisinde payla\u015faca\u011f\u0131m bir adet jQuery k\u00fct\u00fcphanesi ile yapaca\u011f\u0131m\u0131z bu i\u015flem sayesinde Ajax tabanl\u0131 \u00e7al\u0131\u015farak, dosyalar\u0131 servera g\u00f6nderebilecek ve bu esnada belirli kontroller sa\u011flayabilece\u011fiz.<\/p>\n
\u00d6ncelikle edinmeniz gereken k\u00fct\u00fcphaneleri a\u015fa\u011f\u0131dan indiriniz.
\njquery.form<\/a>
\n http:\/\/code.jquery.com\/jquery-1.12.0.min.js<\/a><\/p>\n
Bir adet Asp.NET MVC projesi olu\u015ftural\u0131m ve genel tasar\u0131m\u0131m\u0131z\u0131 a\u015fa\u011f\u0131daki gibi dizayn edelim.<\/p>\n
\r\n<html>\r\n<head>\r\n    <script src="~\/scripts\/jquery-1.10.2.js"><\/script>\r\n    <script src="~\/Content\/jquery.form.js"><\/script>\r\n<\/head>\r\n<body>\r\n    <input type="file" name="file" id="File" \/>\r\n    <br \/>\r\n    <input type="submit" value="Dosyay\u0131 Y\u00fckle" \/>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n\u015eimdi yapmam\u0131z gereken, birazdan olu\u015fturaca\u011f\u0131m\u0131z Ajax post neticesinde gelecek olan dosyay\u0131 tutacak olan bir Entity olu\u015fturmakt\u0131r.<\/p>\n\r\n    public class Dosya\r\n    {\r\n        public HttpPostedFileBase File { get; set; }\r\n    }\r\n<\/pre>\nBen Entity’nin ismine Dosya dedim.Siz istedi\u011finizi diyebilirsiniz.Lakin burada dikkat etmeniz gereken, servera at\u0131lacak olan dosyay\u0131 bar\u0131nd\u0131racak olan HttpPostedFileBase tipinden File isimli propertymizdir.Bu propertynin ismi View’de edilen POST \u00fczerine g\u00f6nderilecek dosyay\u0131 se\u00e7memize yarayan file html eleman\u0131n\u0131n id de\u011feriyle ayn\u0131 olmal\u0131d\u0131r.Html eleman\u0131m\u0131za dikkat ederseniz file eleman\u0131n\u0131n id de\u011feri File oldu\u011fu i\u00e7in, bu propertymizin id de\u011ferinide File olarak belirtmekteyiz.<\/p>\n
\u015eimdi, Ajax ile dosyay\u0131 g\u00f6nderebilmek i\u00e7in html tasar\u0131m\u0131m\u0131zda bir ka\u00e7 komutluk i\u015flem yapmam\u0131z gerekmektedir.<\/p>\n\r\n@model Dosya\r\n\r\n<html>\r\n<head>\r\n    <script src="~\/scripts\/jquery-1.10.2.js"><\/script>\r\n    <script src="~\/Content\/jquery.form.js"><\/script>\r\n<\/head>\r\n<body>\r\n    @using (Html.BeginForm("DosyaYukle", "Home", FormMethod.Post, new { @id = "dosya_gonder_form" }))\r\n    {\r\n        <input type="file" name="file" id="File" \/>\r\n        <br \/>\r\n        <input type="submit" value="Dosyay\u0131 Y\u00fckle" \/>\r\n    }\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nG\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi BeginForm metodu ile bir form olu\u015fturduk ve dosya y\u00fcklemeyle ilgili html elemanlar\u0131m\u0131z\u0131 bu form i\u00e7ine ald\u0131k.Ayriyetten sayfam\u0131z\u0131n model tipinide vermi\u015f olduk.Burada dikkat edilmesi gereken nokta, forma verilen id de\u011feridir.Bu id de\u011feri \u00fczerinden jQuery ve Ajax fonksiyonlar\u0131n\u0131 devreye sokaca\u011f\u0131z ve POST – BACK i\u015flemini engelleyece\u011fiz.<\/p>\n
\u015eimdi DosyaYukle Action metodunu olu\u015ftural\u0131m.<\/p>\n\r\n        [HttpPost()]\r\n        public ActionResult DosyaYukle(Dosya Model)\r\n        {\r\n            string DosyaAdi = Model.File.FileName;\r\n            Model.File.SaveAs(Server.MapPath("~\/Content\/Dosyalar\/" + DosyaAdi));\r\n\r\n            return View();\r\n        }\r\n<\/pre>\nEvet, g\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi DosyaYukle isimli Action metodumuzda yukar\u0131daki gibi tasarlanmaktad\u0131r.Tabi burada \u015funu s\u00f6ylemekte fayda var.Dosya y\u00fckleme i\u015fleminin yap\u0131laca\u011f\u0131 formumuzda belirtilen Action metodumuz bu oldu\u011fu i\u00e7in, post edilen modeli(ki burada modelimiz fiziksel bir dosyay\u0131 bar\u0131nd\u0131rmaktad\u0131r) Dosya tipinden bir parametre girerek elde edebildi\u011fimiz gibi, HttpPostedFileBase tipinden bir parametre girerek direkt olarak se\u00e7ilen dosyay\u0131 yakalayacak olan nesneyide verebiliriz.<\/p>\n
Yani yukar\u0131daki metodun bir ba\u015fka varyasyonu a\u015fa\u011f\u0131daki gibidir.<\/p>\n\r\n        public ActionResult DosyaYukle(HttpPostedFileBase File)\r\n        {\r\n            string DosyaAdi = File.FileName;\r\n            File.SaveAs(Server.MapPath("~\/Content\/Dosyalar\/" + DosyaAdi));\r\n            return View();\r\n        }\r\n<\/pre>\nAction metodumuzuda olu\u015fturduktan sonra s\u0131ra geldi jQuery komutlar\u0131yla \u00e7al\u0131\u015fmam\u0131z\u0131 ger\u00e7ekle\u015ftirmeye…<\/p>\n\r\n<script>\r\n        $(function () {\r\n            $('#dosya_gonder_form').ajaxForm({\r\n                beforeSubmit: ShowRequest,\r\n                success: SubmitSuccesful,\r\n                error: AjaxError\r\n            });\r\n        });\r\n        \/\/ Form g\u00f6nderilmeden \u00f6nce tetiklenecek fonksiyon...\r\n        function ShowRequest(formData, jqForm, options) {\r\n\r\n        }\r\n        \/\/ E\u011fer bir hata olu\u015fursa bu fonksiyon tetiklenecektir...\r\n        function AjaxError() {\r\n\r\n        }\r\n        \/\/ Form g\u00f6nderdikten sonra, i\u015flemler tamamland\u0131ysa e\u011fer\r\n        \/\/ \u00e7al\u0131\u015facak olan bu fonksiyondur...\r\n        function SubmitSuccesful(result, statusText) {\r\n            \/\/ Result parametresi Controllerdan geri d\u00f6nd\u00fcr\u00fc\u011f\u00fcm\u00fcz veridir.\r\n            \/\/ statusText parametresi ise Ajax i\u015flemleri ba\u015far\u0131l\u0131 ise true,\r\n            \/\/ de\u011filse false d\u00f6necektir.\r\n        }\r\n<\/script>\r\n<\/pre>\nYukar\u0131daki kod blo\u011funu incelerseniz e\u011fer “dosya_gonder_form” id de\u011ferine sahip forma ajaxForm fonksiyonunu uygulamaktay\u0131z.Bunun yan\u0131nda s\u00fcre\u00e7 esnas\u0131nda \u00e7al\u0131\u015facak fonksiyonlarda yukar\u0131da tan\u0131mlanm\u0131\u015f ve gerekli a\u00e7\u0131klamalar\u0131 yap\u0131lm\u0131\u015ft\u0131r.<\/p>\n<\/a>Asp.NET MVC’de Ajax \u0130le Dosya Y\u00fckleme<\/p><\/div>\n
G\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi Ajax ile dosya y\u00fckleme i\u015flemimiz sorunsuz \u00e7al\u0131\u015fmaktad\u0131r…<\/p>\n
Sonraki yaz\u0131lar\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 ile dosya y\u00fckleme(file upload) i\u015flemini ele alaca\u011f\u0131z.Yaz\u0131 i\u00e7erisinde payla\u015faca\u011f\u0131m bir adet jQuery k\u00fct\u00fcphanesi ile yapaca\u011f\u0131m\u0131z bu i\u015flem sayesinde Ajax tabanl\u0131 \u00e7al\u0131\u015farak, dosyalar\u0131 servera g\u00f6nderebilecek ve bu esnada belirli...<\/p>\n","protected":false},"author":1,"featured_media":3453,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,11,600,18,19],"tags":[744,881,880,346,748,883,882],"class_list":["post-3497","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ajax","category-asp-net-mvc","category-asp-net-mvc-5","category-javascript","category-jquery","tag-ajax","tag-ajax-dosya-yukleme","tag-ajax-file-upload","tag-httppostedfilebase","tag-jquery","tag-jquery-dosya-yukleme","tag-jquery-file-upload"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/3497","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=3497"}],"version-history":[{"count":0,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/3497\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/3453"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=3497"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=3497"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=3497"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}