ASP.Net Razor File Upload

Ö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




    
    @ViewBag.Title - Yönetim Paneli
    
    
    
    


    
@RenderBody()

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 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

@using (Html.BeginForm("FileUpload", "FileUpload", FormMethod.Post, new { id = "form_author" })) {
@Html.LabelFor(model => model.Name)
@Html.TextBoxFor(model => model.Name, new { @class = "custom_textbox" })
@Html.ValidationMessageFor(model => model.Name)
@Html.LabelFor(model => model.Description)
@Html.TextAreaFor(model => model.Description, new { @class = "custom_textarea" })
@Html.ValidationMessageFor(model => model.Description)
@Html.LabelFor(model => model.Email)
@Html.TextBoxFor(model => model.Email, new { @class = "custom_textbox" })
@Html.ValidationMessageFor(model => model.Email)
@Html.LabelFor(model => model.Birthday)
@Html.TextBoxFor(model => model.Birthday, new { @class = "custom_textbox easyui-datebox" })
@Html.ValidationMessageFor(model => model.Birthday)
}

Neler Yaptık?

  1. Standart JQuery ve JQueryAjaxForm kütüphanelerini indirdik.
  2. Layout ve ya content sayfası içerisinde scriptleri tanımladık.
  3. Standart JQuery Ajax form post gibi FileUploadView içerisinde tanımladığımız modeli ajax ile controller metoda gönderdik.
  4. 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 Fileolmalı.