آموزش ایجاد Image Helper برای نمایش تصاویر در MVC

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

پیدا سازی کلاس ImageHelper

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

using System;
using System.IO;
using System.Linq.Expressions;
using System.Web.Mvc;

/// <summary>
/// برای ایجاد تگ ایمیج در ویو برای نمایش تصویر
/// </summary>
public static class ImageHelper
{
    #region ImageLink
    public static string ImageLink(this HtmlHelper htmlHelper, string imgSrc, string alt, string actionName, string controllerName, object routeValues, object htmlAttributes, object imgHtmlAttributes)
    {
        UrlHelper urlHelper = ((Controller)htmlHelper.ViewContext.Controller).Url;
        TagBuilder imgTag = new TagBuilder("img");
        imgTag.MergeAttribute("src", imgSrc);

        //imgTag.MergeAttributes((IDictionary<string, string>)imgHtmlAttributes, true);
        var attributesimg = HtmlHelper.AnonymousObjectToHtmlAttributes(imgHtmlAttributes);
        imgTag.MergeAttributes(attributesimg, true);

        string url = urlHelper.Action(actionName, controllerName, routeValues);

        TagBuilder imglink = new TagBuilder("a");
        imglink.MergeAttribute("href", url);
        imglink.InnerHtml = imgTag.ToString();

        var attributesLink = HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes);
        imglink.MergeAttributes(attributesLink, true);

        return imglink.ToString();

    }
    #endregion

    #region Image
    public static string Image(this HtmlHelper helper, string src, string alt = null)
    {
        TagBuilder tb = new TagBuilder("img");
        tb.Attributes.Add("src", helper.Encode(src));
        if (alt != null)
            tb.Attributes.Add("alt", helper.Encode(alt));
        return tb.ToString(TagRenderMode.SelfClosing);
    }
    #endregion

    #region Image
    public static string Image(this HtmlHelper helper, string src, object htmlAttributes = null)
    {
        TagBuilder tb = new TagBuilder("img");
        tb.Attributes.Add("src", helper.Encode(src));
        if (htmlAttributes != null)
        {
            var attributes = HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes);
            tb.MergeAttributes(attributes);
        }
        return tb.ToString(TagRenderMode.SelfClosing);
    }
    #endregion

    #region ImageFor
    public static MvcHtmlString ImageFor<TModel, TValue>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TValue>> expression, object htmlAttributes, string noImage, params string[] folders)
    {
        var data = ModelMetadata.FromLambdaExpression(expression, helper.ViewData);
        string path = "~/";
        foreach (var folderName in folders)
        {
            path += folderName + "/";
        }
        if (data.Model != null && File.Exists(System.Web.HttpContext.Current.Server.MapPath(path + data.Model)))
            path += data.Model.ToString();
        else
            path += noImage;

        TagBuilder img = new TagBuilder("img");
        img.Attributes.Add("src", UrlHelper.GenerateContentUrl(path, helper.ViewContext.HttpContext));

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

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

کلاس ImageHelper سه متد دارد و متد Image نیز دو تا اورلود دارد

متد ImageLink

این متد ابتدا یک تگ a ایجاد می کند و سپس بین تگ a یک تگ ایجاد img می کند

ورودی های متد ImageLink

1. آدرس تصویر
2. Alt تصویر
3. اکشن و کنترولر مورد نظر
4. مقدار ارسالی به کنترولر مورد نظر
5. htmlAttributes های مروبط به تگ a
6. htmlAttributes های مروبط به تگ img

نکته: چون این متد یک رشته از تگ ها بر می گرداند به همین خاطر باید توسط دستور Html.Raw آنها را در ویو رندر کنیم.

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

@Html.Raw(Html.ImageLink(Model.ImageUrl, "user", "Edit", "Users", new { id = Model.UserProfileId }, new { @class = "text-danger" }, new { title = "user" }))

متد Image

این متد آدرس تصویر و Alt تصویر را دیافت و تصویر را نمایش می دهد. این متد دو تا اور لود دارد و در اور لود دوم htmlAttributes نیز دریافت می کند یعنی شما می توانید کلاس ، آی دی و... به تصویر خود بدهید.

نکته: چون این متد یک رشته از تگ ها بر می گرداند به همین خاطر باید توسط دستور Html.Raw آنها را در ویو رندر کنیم.

نحوه استفاده از متد Image در ویو

@Html.Raw(Html.Image(Model.ImageUrl, "user"))
@Html.Raw(Html.Image(Model.ImageUrl, new {width="80"}))

متد ImageFor

یک حالت پیشرفته  از نمایش  تصویر در ویو می باشد

ورودی های متد ImageFor

1. نام تصویر اصلی را به صورت مدل دریافت می کند
2. htmlAttributes های مورد نیاز تصویر
3. نام تصویر دیگر که در صورت عدم وجود تصویر اصلی نمایش دهد.
4. مسیر تصویر که به صورت آرایه ای از نام پوشه ها که از به ترتیب از ریشه سایت دریافت می کند

نحوه استفاده از متد ImageFor در ویو

@Html.ImageFor(model => model.ImageUrl, new { width = "80" }, "no_avatar.gif", "Images", "Uploads", "Users")