Asp.Net Mvc ile Ajax File Upload

Asp.Net Mvc Çağrı ŞİŞMAN 29.11.2015

Merhaba,

Asp.Net Mvc ile ajax file upload işlemini gerçekleştirmek için kullanılabilecek en iyi yöntemlerden biri jquery kütüphanesi içerisinde bulunan ajax metodunu uygulamaktır. Bu yöntemle istediğimiz herhangi bir modeli controller'a rahatlıkla ajax ile post edebiliriz. 

İşlemimiz File Upload olduğundan, dosya post edeceğimizi varsayarak projeye basit bir model ekleyelim.

 

public class Product
{
        public int Id { get; set; }
        public string Name { get; set; }
        public HttpPostedFileBase FileName { get; set; }

}

Yukarıdaki modelde upload edeceğimiz dosyayı temsil eden FileName özelliği HttpPostedFileBase tipindedir. Dosyayı temsil eden özellik bu sınıf ile tanımlanmalıdır.

Şimdi modelimizle işlem yapacağımız View'e bir göz atalım.

@model AjaxFileUploadSample.Models.Product
@{
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Create</h2>
<div>
    <form id="createProduct" method="post" enctype="multipart/form-data">
        <fieldset>
            <legend>Product Information</legend>

            <div class="editor-label">
                @Html.LabelFor(m => m.Name)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(m => m.Name)
            </div>

            <div class="editor-label">
                @Html.Label("File Name")
            </div>
            <div class="editor-field">
                <input type="file" name="FileName" />
            </div>

            <p>
                <input type="submit" onclick="Save()" value="Save" />
            </p>
        </fieldset>
    </form>
</div>

Post işlemini yapacağımız form elementinde, post edeceğimiz modelin özellikleri bulunmaktadır. Upload edeceğimiz dosya için tipi file olan bir input ekliyoruz ve name özelliğine modelimizde HttpPostedFileBase sınıfı ile tanımladığımız FileName özelliğinin adını veriyoruz.

Buradan sonra yapmamız gereken formu ajax ile post etmek.

Bunun için form içinde bulunan submit inputu içerisinde yazılmış, bu inputa tıklandığında çalışacak Save metodu içerisinde ajax post işlemini yazıyoruz. 

<script type="text/javascript">

    function Save() {


        $.ajax({

            type: 'POST',
            url: '@Url.Action("Create", "Product")',
            dataType: 'json',
            data: $("#createProduct").serialize(),
            contentType: 'application/json; charset=utf-8',
            success: function (xhr) {

                alert(xhr.statusText);

            }

        });


    }


</script>

Ajax ile Product controller'ı içerisindeki HttpPost ile işaretlenmiş Create Action'ına modelimizin post edildiğini görebiliriz.

Sağlıcakla kalın. İyi çalışmalar.


Etiketler: Asp.Net MVC Jquery