Asp.NET MVC’de Ajax İle Dosya Yükleme
Bu yazımızda Asp.NET MVC mimarisinde Ajax ile dosya yükleme(file upload) işlemini ele alacağız.Yazı içerisinde paylaşacağım bir adet jQuery kütüphanesi ile yapacağımız bu işlem sayesinde Ajax tabanlı çalışarak, dosyaları servera gönderebilecek ve bu esnada belirli kontroller sağlayabileceğiz.
Öncelikle edinmeniz gereken kütüphaneleri aşağıdan indiriniz.
jquery.form
http://code.jquery.com/jquery-1.12.0.min.js
Bir adet Asp.NET MVC projesi oluşturalım ve genel tasarımımızı aşağıdaki gibi dizayn edelim.
<html>
<head>
<script src="~/scripts/jquery-1.10.2.js"></script>
<script src="~/Content/jquery.form.js"></script>
</head>
<body>
<input type="file" name="file" id="File" />
<br />
<input type="submit" value="Dosyayı Yükle" />
</body>
</html>
Şimdi yapmamız gereken, birazdan oluşturacağımız Ajax post neticesinde gelecek olan dosyayı tutacak olan bir Entity oluşturmaktır.
public class Dosya
{
public HttpPostedFileBase File { get; set; }
}
Ben Entity’nin ismine Dosya dedim.Siz istediğinizi diyebilirsiniz.Lakin burada dikkat etmeniz gereken, servera atılacak olan dosyayı barındıracak olan HttpPostedFileBase tipinden File isimli propertymizdir.Bu propertynin ismi View’de edilen POST üzerine gönderilecek dosyayı seçmemize yarayan file html elemanının id değeriyle aynı olmalıdır.Html elemanımıza dikkat ederseniz file elemanının id değeri File olduğu için, bu propertymizin id değerinide File olarak belirtmekteyiz.
Şimdi, Ajax ile dosyayı gönderebilmek için html tasarımımızda bir kaç komutluk işlem yapmamız gerekmektedir.
@model Dosya
<html>
<head>
<script src="~/scripts/jquery-1.10.2.js"></script>
<script src="~/Content/jquery.form.js"></script>
</head>
<body>
@using (Html.BeginForm("DosyaYukle", "Home", FormMethod.Post, new { @id = "dosya_gonder_form" }))
{
<input type="file" name="file" id="File" />
<br />
<input type="submit" value="Dosyayı Yükle" />
}
</body>
</html>
Gördüğünüz gibi BeginForm metodu ile bir form oluşturduk ve dosya yüklemeyle ilgili html elemanlarımızı bu form içine aldık.Ayriyetten sayfamızın model tipinide vermiş olduk.Burada dikkat edilmesi gereken nokta, forma verilen id değeridir.Bu id değeri üzerinden jQuery ve Ajax fonksiyonlarını devreye sokacağız ve POST – BACK işlemini engelleyeceğiz.
Şimdi DosyaYukle Action metodunu oluşturalım.
[HttpPost()]
public ActionResult DosyaYukle(Dosya Model)
{
string DosyaAdi = Model.File.FileName;
Model.File.SaveAs(Server.MapPath("~/Content/Dosyalar/" + DosyaAdi));
return View();
}
Evet, gördüğünüz gibi DosyaYukle isimli Action metodumuzda yukarıdaki gibi tasarlanmaktadır.Tabi burada şunu söylemekte fayda var.Dosya yükleme işleminin yapılacağı formumuzda belirtilen Action metodumuz bu olduğu için, post edilen modeli(ki burada modelimiz fiziksel bir dosyayı barındırmaktadır) Dosya tipinden bir parametre girerek elde edebildiğimiz gibi, HttpPostedFileBase tipinden bir parametre girerek direkt olarak seçilen dosyayı yakalayacak olan nesneyide verebiliriz.
Yani yukarıdaki metodun bir başka varyasyonu aşağıdaki gibidir.
public ActionResult DosyaYukle(HttpPostedFileBase File)
{
string DosyaAdi = File.FileName;
File.SaveAs(Server.MapPath("~/Content/Dosyalar/" + DosyaAdi));
return View();
}
Action metodumuzuda oluşturduktan sonra sıra geldi jQuery komutlarıyla çalışmamızı gerçekleştirmeye…
<script>
$(function () {
$('#dosya_gonder_form').ajaxForm({
beforeSubmit: ShowRequest,
success: SubmitSuccesful,
error: AjaxError
});
});
// Form gönderilmeden önce tetiklenecek fonksiyon...
function ShowRequest(formData, jqForm, options) {
}
// Eğer bir hata oluşursa bu fonksiyon tetiklenecektir...
function AjaxError() {
}
// Form gönderdikten sonra, işlemler tamamlandıysa eğer
// çalışacak olan bu fonksiyondur...
function SubmitSuccesful(result, statusText) {
// Result parametresi Controllerdan geri döndürüğümüz veridir.
// statusText parametresi ise Ajax işlemleri başarılı ise true,
// değilse false dönecektir.
}
</script>
Yukarıdaki kod bloğunu incelerseniz eğer “dosya_gonder_form” id değerine sahip forma ajaxForm fonksiyonunu uygulamaktayız.Bunun yanında süreç esnasında çalışacak fonksiyonlarda yukarıda tanımlanmış ve gerekli açıklamaları yapılmıştır.
Asp.NET MVC’de Ajax İle Dosya Yükleme
Gördüğünüz gibi Ajax ile dosya yükleme işlemimiz sorunsuz çalışmaktadır…
Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…
Teşekkürler
Merhaba yüklenen bu dosyayı sayfada gostermeyi ve açmayı nasıl yapabilirim
formdaki verilerin tümünü yollamak için ne yapmalıyım resim artı inputtaki verileri
Inputlardaki verileri jQuery kullanarak .val() fonksiyonuyla elde edebilir ve bir model eşliğinde post edebilirsiniz.
Elinize sağlık. Peki yüklendiğini “Progresbar” ile nasıl gstere bilirim?
bir makalemiz var ve yükledik diyelim fotoğrafı ile birlikte, bu makaleyi silmem gerekiyor benim, verileri silebiliyorum ama fotoğrafı nasıl sileceğim? bunu halledemedim bir türlü.
FileInfo sınıfını kullanarak makaleyle ilgili fotoğrafların pathini belirterek silebilirsin.
repositorylere gidip her bir entitym için ayriyetten sorgulama metodu yazabilirim belki bu cevabı vereceksiniz ama bu da bir zaman kaybı oluşturmaz mı? her senaryo için gidip tek tek query yazmaktansa tek bir nesne üzerinden olayı yönetebilmenin bir yolu yok mu? eşytan diyor db nesnesini taşı UI katmanına ama onu da yapamam 🙂
🙂 Yorumunu ilgili makaleye altında cevaplandırmış bulunmaktayım. C# Unit of Work Design Pattern
asp.net core da nasıl yaparız? fotoğraf yükleme kodlarım her şeyim hazır. sadece ajaxla controllera fotoğraf bilgilerini gönderemedim. controllerda List olarak almam lazım. nasıl yaparım?
Teşekkürler