AliRıza Adıyahşi: ASP.NET MVC AJAX FILE UPLOAD (JQUERY AJAX FORM PLUGIN)

Öncelikle hızlıca kodları paylaşayım, gerekli açıklamaları daha sonra yaparım.

Gerekli JQuery kütüphaneleri
JQuery ve JQueryAjaxFormPlugin

_Layout.cshtml sayfamızda JQuery kütüphanalerini tanımlıyoruz.

_Layout.cshtml

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title - Yönetim Paneli</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    <script src="~/Scripts/jquery.min.js"></script>
    <script src="~/Scripts/jquery.form.js"></script>
</head>
<body>
    <div>@RenderBody()</div>
    <footer id="footer" class="clear-fix">
        <div class="float-right">
            <p class="copyright">&copy; @DateTime.Now.Year - Web ASYA</p>
        </div>
    </footer>
</body>
</html>

AuthorViewModel.cs

public class AuthorViewModel
{
    public int Id { get; set; }

    [Required(ErrorMessage = "{0} alanı boş bırakılmamalıdır!")]
    [Display(Name = "Yazar Adı")]
    public string Name { get; set; }

    [Display(Name = "Kısa Özgeçmiş")]
    public string Description { get; set; }

    [Display(Name = "E-Posta")]
    public string Email { get; set; }

    [Display(Name = "Doğum Tarihi")]
    public Nullable<DateTime> Birthday { get; set; }

    [Display(Name = "Yazar Resim")]
    public string OrginalImageUrl { get; set; }

    public string SmallImageUrl { get; set; }

    public HttpPostedFileBase file { get; set; }
}

FileUploadController.cs

[HttpPost]
public ActionResult FileUpload(AuthorViewModel viewModel)
{
    ...
    // dosya otomatik olarak viewModel içerisindeki 
    // file değişkenine bağlanmıştır.
    var file = viewModel.file;
    ...
}

FileUpload.cshtml

@model AuthorViewModel
<script>
    $(function () {
        $('#form_author').ajaxForm({
            beforeSubmit: ShowRequest,
            success: SubmitSuccesful,
            error: AjaxError
        });
    });

    // form gönderilmeden önce çalışacak olan fonksiyon
    function ShowRequest(formData, jqForm, options) {
        $(".loading_container img").show();
    }

    // form gönderirken hata oluşursa bu fonksiyon çalışır
    function AjaxError() {
        alert("An AJAX error occured.");
    }

    // form gönderildikten sonra çalışacak olan fonksiyon
    function SubmitSuccesful(result, statusText) {
        // result controllerdan geri dönen veri
        // statusText, ajax başarılı ise true değilse false
    }
</script>

<div class="right_inner_container">
    <table>
        <tr>
            <td>
                @using (Html.BeginForm("FileUpload", "FileUpload", FormMethod.Post, new { id = "form_author" }))
                {
                    <div class="editor-label">
                        <input type="file" name="file" id="file" />
                    </div>
                    <div class="editor-label">
                        @Html.LabelFor(model => model.Name)
                    </div>
                    <div class="editor-field">
                        @Html.TextBoxFor(model => model.Name, new { @class = "custom_textbox" })
                    </div>
                    <div class="editor-field">
                        @Html.ValidationMessageFor(model => model.Name)
                    </div>

                    <div class="editor-label">
                        @Html.LabelFor(model => model.Description)
                    </div>
                    <div class="editor-field">
                        @Html.TextAreaFor(model => model.Description, new { @class = "custom_textarea" })
                    </div>
                    <div class="editor-field">
                        @Html.ValidationMessageFor(model => model.Description)
                    </div>

                    <div class="editor-label">
                        @Html.LabelFor(model => model.Email)
                    </div>
                    <div class="editor-field">
                        @Html.TextBoxFor(model => model.Email, new { @class = "custom_textbox" })
                    </div>
                    <div class="editor-field">
                        @Html.ValidationMessageFor(model => model.Email)
                    </div>

                    <div class="editor-label">
                        @Html.LabelFor(model => model.Birthday)
                    </div>
                    <div class="editor-field">
                        @Html.TextBoxFor(model => model.Birthday, new { @class = "custom_textbox easyui-datebox" })
                    </div>
                    <div class="editor-field">
                        @Html.ValidationMessageFor(model => model.Birthday)
                    </div>

                    <div class="submit-field">
                        <input type="submit" value="Ekle" class="button_gray" />
                    </div>
                }
            </td>
        </tr>
    </table>
</div>

Neler Yaptık?

Standart JQuery ve JQueryAjaxForm kütüphanelerini indirdik.
Layout ve ya content sayfası içerisinde scriptleri tanımladık.
Standart JQuery Ajax form post gibi FileUploadView içerisinde tanımladığımız modeli ajax ile controller metoda gönderdik.
Normalde ekstra bir kütüphane kullanmadan modeli ajax ile gönderebiliyoruz fakat dosya gönderemiyoruz. AjaxFormPost kütüphanesi bu işi yapıyor.

ÖNEMLİ: Aslında kodlar üzerinde yeterince açıklama yapmaya çalıştım. Ama tekrar etmekte fayda var. Model içerisinde tanımladığımız HttpPostedFileBase tipindeki değişken için View sayfasında hiç bir model bağlama işlemi (ModelBinding) yapmadık, böyle yaptığımız halde, seçilen dosya model içerisindeki File değişkenine otomatik bağlandı. Peki bu nasıl oldu? MVC bunu isimlerden anlıyor. Yani modeldeki değişken ismi File ise View sayfasındaki file elementininde id si File olmalı.

12 yorum:

Adsız11 Haziran 2013 00:30
Resim yüklemesi için bilgisayara gözat kısmından resim seçilip servera bir dizine upload edilip veritabanına dizin adresinin kaydı (ImageUrl)nasıl yapılır?
YanıtlaSil
Yanıtlar
Adsız27 Haziran 2013 06:22
İyi de hangisi controller hangisi view hangisi class belirtmemişsin
YanıtlaSil
Yanıtlar
Adsız3 Aralık 2013 04:12
controller içerisine başka bir kod yazılmasına gerek varmı
YanıtlaSil
Yanıtlar
Adsız16 Ocak 2014 05:33
Merhaba , sonlarda yer alan div class = right_inner_container ile başlayan ve devam eden satır nereye yazılması gerekli
YanıtlaSil
Yanıtlar
Gençay11 Kasım 2015 12:44
Çok faydalı bir yazı olmuş öncelikle teşekkür ederim ama bir eleştiride bulunmak istiyorum :)
Modeli bu kadar uzun tutmanıza gerek yoktu.Sadece file propertysini tutsanız yeterliydi diye düşünüyorum.Konuyla alakalı daha sade ve okunaklı olurdu .
YanıtlaSil
Yanıtlar
ismailfedakar5 Ekim 2016 11:27
Kardeş mümkünse proje dosyalarını upload edebilirmisiniz. Bir sürü hata oluşuyor.Örneğin ben loading_container img bu clasın nerede olduğunu bulamadım. Bir kaç sorun daha var. Neyse uzatmayayım. Proje dosyalarını upload edebilirseniz daha az sorun yaşarız.
Yazı için teşekkürler yinede.
YanıtlaSil
Yanıtlar
Ekrem5 Kasım 2016 04:56
Teşekkürler Adıyahşi :) Burada bakarak tek seferde çözdüm sorunu
YanıtlaSil
Yanıtlar
Unknown17 Mayıs 2020 17:02
Şefim kafayı yicem. Modele HttppostedFiles Değişkenleri oluşturuyorum lakin upload controllere göndermiyor. Diğer alanlar gidiyor Dosya göndermiyor
YanıtlaSil
Yanıtlar

Yorum ekle

AliRıza Adıyahşi

Sayfalar

13 Şubat 2013 Çarşamba

ASP.NET MVC AJAX FILE UPLOAD (JQUERY AJAX FORM PLUGIN)

12 yorum: