در این مقاله ، خواهیم دید که چگونه می توانیم بدون refresh کردن صفحه ، فایل را بارگذاری کنیم.همانطور که می دانیم ، در MVC ،کنترلر سرور وجود ندارد، این مثال ، برای اینکه ما بخواهیم فایل ها را بدون refreshکردن صفحه بارگذاری کنیم، مفید خواهد بود.

پیش نیاز:

اگر شما بارگذاری فایل  به شیوه معمولی را میدانید، کافی است فقط پلاگین jquery.form.js را به همراه چند خط کد اضافه کنید تا عملیات مورد نظر ما انجام شود.

در MVC ،  از نوع "file" که یک html  است  برای بارگذاری فایل ها استفاده می شود اما اگر ما بخواهیم بارگذاری فایل ها را بدون refresh  کردن صفحه انجام دهیم ، می توانیم  از Ajax.BeginForm یا از ajax post استفاده کنیم.یک پلاگین jquery وجود دارد به نام jquery.form.js  که ajax post را بدون هیچ مشکلی، آسان می کند.

مراحل زیر را دنبال کنید.

صفحه View :

Jquery .1 مورد نیاز و کتابخانه فرم را در صفحه خود اضافه کنید .

@section Scripts { 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js">
</script> <script src="http://malsup.github.com/jquery.form.js"></script> 
}

2.فایل ورودی را در داخل Html.BeginForm() ، اضافه کنید.

	@using (Html.BeginForm("FileUpload", "Home"))
	{
	  @Html.AntiForgeryToken()
	  <input type="file" name="files"><br>
	  <input type="submit" value="بارگذاری فایل به سرور ">
	}

 نمایش Progress bar  : این کد به صورت انتخابی می باشد، اگر نمی خواهید که progress bar نمایش داده شود ، شما می توانید این قسمت را انجام ندهید.

<div class="progress progress-striped">
   <div class="progress-bar progress-bar-success">0%</div>

3.به صفحه، ajaxForm را اضافه کنید.هنگامی که کاربر بر روی دکمه کلیک کند، post با درخواست  ajax به جای http post ارسال می شود.

<script>
    (function () {
        var bar = $('.progress-bar');
        var percent = $('.progress-bar');
        var status = $('#status');

        $('form').ajaxForm({
            beforeSend: function () {
                status.empty();
                var percentVal = '0%';
                bar.width(percentVal)
                percent.html(percentVal);
            },
            uploadProgress: function (event, position, total, percentComplete) {
                var percentVal = percentComplete + '%';
                bar.width(percentVal)
                percent.html(percentVal);
            },
            success: function () {
                var percentVal = '100%';
                bar.width(percentVal)
                percent.html(percentVal);
            },
            complete: function (xhr) {
                status.html(xhr.responseText);
            }
        });

    })();
</script>

متد Action  :

فایل درخواست post شده به متد  Action به نام FileUpload ارسال خواهد شد.در MVC  ، کلاس HttpPostedFileBase برای بازیابی فایل های Post شده استفاده می شود.در زیر مثالی از متد Action به نام FileUpload   می باشد.

[HttpPost]
[ValidateAntiForgeryToken]
public void FileUpload(IEnumerable files)
{
    if (files != null)
    {
        foreach (var file in files)
        {
            // Verify that the user selected a file
            if (file != null && file.ContentLength > 0)
            {
                // extract only the fielname
                var fileName = Path.GetFileName(file.FileName);
                // TODO: need to define destination
                var path = Path.Combine(Server.MapPath("~/Upload"), fileName);
                file.SaveAs(path);
            }
        }
    }
}

نکته: نام فایل ورودی ("name="files) و شی ای از HttpPostedFileBase در پارامتر متد Action  باید یکسان باشد.

آموزش asp.net mvc