آموزش ایجاد Upload Helper برای آپلود تصاویر در MVC

در MVC جهت نمایش تگ ها در View از HtmlHelper ها استفاده می کنیم ولی برای آپلود تصاویر هیچ HtmlHelper وجود ندارد به همین دلیل باید خودمان یک HtmlHelper بنویسیم تا بتوانیم تصاویر را انتخاب و سپس آپلود کنیم.

ابتدا یک کلاسی به نام UploadHelper ایجاد کنید و سپس کدهای زیر را به آن اضافه کنید.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Linq.Expressions;
using System.Web;
using System.Web.Mvc;

/// <summary>
/// برای ایجاد تگ آپلود فور در ویو برای آپلود تصاویر
/// </summary>
public static class UploadHelper
{
    #region Upload
    public static MvcHtmlString Upload(this HtmlHelper helper, string name, object htmlAttributes = null)
    {
        //helper.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(ExpressionHelper.GetExpressionText(expression))
        TagBuilder input = new TagBuilder("input");
        input.Attributes.Add("type", "file");
        input.Attributes.Add("id", helper.ViewData.TemplateInfo.GetFullHtmlFieldId(name));
        input.Attributes.Add("name", helper.ViewData.TemplateInfo.GetFullHtmlFieldName(name));

        if (htmlAttributes != null)
        {
            var attributes = HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes);
            input.MergeAttributes(attributes);
        }

        return new MvcHtmlString(input.ToString());
    }
    #endregion

    #region UploadFor
    public static MvcHtmlString UploadFor<TModel, TValue>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TValue>> expression, object htmlAttributes = null)
    {
        //helper.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(ExpressionHelper.GetExpressionText(expression))
        var data = ModelMetadata.FromLambdaExpression(expression, helper.ViewData);
        TagBuilder input = new TagBuilder("input");
        input.Attributes.Add("type", "file");
        input.Attributes.Add("id", helper.ViewData.TemplateInfo.GetFullHtmlFieldId(ExpressionHelper.GetExpressionText(expression)));
        input.Attributes.Add("name", helper.ViewData.TemplateInfo.GetFullHtmlFieldName(ExpressionHelper.GetExpressionText(expression)));

        if (htmlAttributes != null)
        {
            var attributes = HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes);
            input.MergeAttributes(attributes);
        }

        return new MvcHtmlString(input.ToString());
    }
    #endregion
}

کلاس فوق دو متد به صورت زیر دارد.

متد Upload

این متد نام تصویر و سپس htmlAttributes که نیاز دارید را دریافت می کند و همچنین می توانید htmlAttributes را نال نیز به این متد ارسال کنید و سپس یک تک آپلود در ویو برای ما ایجاد می کند.

نحوه استفاده از متد upload

@Html.Upload("img", new { id = "myImg" })

متد UploadFor

این متد نام تگ آپلود را به صورت مدل دریافت می کند و سپس در ورودی دوم می توانید htmlAttributes های که نیاز دارید به این تگ آپلود خود ارسال کنید و همچنین می توانید htmlAttributes را نال نیز به این متد ارسال کنید و سپس یک متد یک تک آپلود در ویو برای ما ایجاد می کند.

نحوه استفاده از متد uploadfor

@Html.UploadFor(model => model.ImageUrl, new { multiple = "" })