مهراد مهراد
ایجاد لینک با یک تصویر بوسیله Html Helper
اندازه‌ی قلم متن
تخمین مدت زمان مطالعه‌ی مطلب: دو دقیقه
با Html Helper ما میتوانیم لینک‌های متن دار را ایجاد نماییم. شاید گاهی پیش آید که بجای لینک‌های متنی، از تصویر بجای لینک بخواهید استفاده نمایید. می‌توان هر زمانی، لینکی را که حاوی یک تصویر باشد، ایجاد کنید. اما با Asp.net MVC یکی از راه‌های مناسب برای انجام این کار استفاده از Extension methods است که از تکرار کد نویسی نیز جلو گیری می‌نماید.
همان طور که در کد زیر مشاهد می‌نمایید، این کد تشکیل شده است از نوشته لینک و نام اکشن متد و نام کنترلر آن، همراه با آی دی و تعریف css. کاری که قرار است صورت گیرد همانند ActionLink می‌باشد، با این تفاوت که تصویری هم به لینک ما اضافه خواهد شد:
 @Html.ActionLink("Text to display", "ActionNameHere", "ControllerNameHere", new { id = 123 }, new{@class="myClass"})
برای نوشتن این متد جهت تولید لینک‌هایی به همراه تصویر، از کد‌های زیر استفاده می‌کنیم:
public MvcHtmlString ActionImage(this HtmlHelper htmlHelper,
   string controller,
   string action,
   object routeValues,
   string imagePath,
   string alternateText = "",
   object htmlAttributes = null)
{
  var anchorBuilder = new TagBuilder("a");
  var url = new UrlHelper(HtmlHelper.ViewContext.RequestContext);
  anchorBuilder.MergeAttribute("href",url.Action(action,controller,routeValues));
  var imgBuilder = new TagBuilder("img");
  imgBuilder.MergeAttribute("src", url.Content(imagePath));
  imgBuilder.MergeAttribute("alt", alternateText);
  var attributes = (IDictionary<string, object>) HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes);
  imgBuilder.MergeAttributes(attributes);
  string imgHtml = imgBuilder.ToString(TagRenderMode.SelfClosing);
  anchorBuilder.InnerHtml = imgHtml;
  return MvcHtmlString.Create(anchorBuilder.ToString());
}
اولین پارامتر اجازه گسترش HtmlHelper را می‌دهد و توسط آن می‌توان متد‌های جدید خود را با کلمه کلیدی @Html شروع کنید.
4 پارامتر بعدی، پارامترهای ضروری هستند. یکی  controller، پس از آن Action  routeValues و سپس آدرس تصویر است. در نهایت، ما می‌توانیم در صورت نیاز متن جایگزین و ویژگی‌های اضافی متنی را نیز مشخص نماییم.
 در رابطه با توضیحات مربوط به بدنه متد: ابتدا لینک‌ها را ایجاد خواهد کرد با استفاده از RequestContext و UrlHelper. سپس بخش ساخت تصویر و اضافه کردن آن به لینک است. برای استفاده از میتوان از کد زیر استفاده نمود:
 @Html.ActionImage("Workout", "Delete", new { id = @workout.Id }, "/images/bluetrash.png", "Delete", new { id="deletebutton"})

در شکل بالا خروجی HTML تولید شده را  مشاهد می‌نمایید.
‫۱۱ سال و ۲ ماه قبل، سه‌شنبه ۸ مرداد ۱۳۹۲، ساعت ۱۲:۳۵
۴۱۴۵
۹
MVCExtension MethodASP.Net MVC
مطالب مشابه
  • #
    حمید چگینی حمید چگینی
    ‫۱۱ سال و ۲ ماه قبل، جمعه ۲۵ مرداد ۱۳۹۲، ساعت ۱۴:۳۱
    سلام و ممنون از مطلب ارسالی خیلی مفیدتون. از این خط خطا گرفته میشه: 
    var url = new UrlHelper(HtmlHelper.ViewContext.RequestContext);
    و خطای گرفته شده:
    Error 1 An object reference is required for the non-static field, method, or property 'System.Web.Mvc.HtmlHelper.ViewContext.get'
     
  • #
    حمید چگینی حمید چگینی
    ‫۱۱ سال و ۲ ماه قبل، جمعه ۲۵ مرداد ۱۳۹۲، ساعت ۱۴:۳۶
    با عرض معذرت.مشکل از کد خودم بود و در این کد:
     var url = new UrlHelper(htmlHelper.ViewContext.RequestContext);
    htmlHelper را به صورت HtmlHelper نوشته بودم و اصلا متوجه این بخش نبودم.ممنون 
    • #
      رشوند رشوند
      ‫۱۰ سال و ۲ ماه قبل، یکشنبه ۲۹ تیر ۱۳۹۳، ساعت ۲۳:۱۷
      سپاس, بسیار مفید بود.
      البته در کد آقا مهرداد هم به صورت H نوشته شده که لطفا اصلاح بفرمایید...
  • #
    داود داود
    ‫۱۰ سال و ۹ ماه قبل، شنبه ۷ دی ۱۳۹۲، ساعت ۱۷:۴۸
    سلام
    مرسی از مطالب مفیدتون. میشه راهنمایی کنید که چطوری توی یه پروژه MVC از این کد باید استفاده کرد؟
    • #
      محسن خان محسن خان
      ‫۱۰ سال و ۹ ماه قبل، شنبه ۷ دی ۱۳۹۲، ساعت ۲۳:۰۶
      یک کلاس استاتیک جدید درست کنید. بعد متد الحاقی ActionImage رو بهش اضافه کنید. حالا در کدهای Razor مطابق توضیحی که دادند Html.ActionImage قابل استفاده می‌شود. اگر لازم بود فضام نام کلاس را هم ابتدای فایل View اضافه کنید.
      • #
        داود داود
        ‫۱۰ سال و ۹ ماه قبل، یکشنبه ۸ دی ۱۳۹۲، ساعت ۱۲:۵۹
        Compiler Error Message: CS0103: The name 'workout' does not exist in the current context  
@using ActionImage.Extentions;
@Html.ActionImage("Workout", "Delete", new { id = @workout.Id }, "/images/bluetrash.png", "Delete", new { id="deletebutton"})
        • #
          محسن خان محسن خان
          ‫۱۰ سال و ۹ ماه قبل، یکشنبه ۸ دی ۱۳۹۲، ساعت ۱۳:۲۱
          بجای اون id هرچی دوست داشتی بنویس. احتمالا یک حلقه بوده که workout یکی از اشیاء اون هست. مهم نیست. جزو کار نیست.
  • #
    رشوند رشوند
    ‫۱۰ سال و ۲ ماه قبل، شنبه ۱۱ مرداد ۱۳۹۳، ساعت ۲۱:۰۰
    یه سوال برام پیش اومد
    فرض کنیم کاربری لاگین کرده رولش هم مثلا خبرنگاره,
     در پروفایلش لیست خبر هایی که ثبت کرده را می‌بینه با توجه به مثالی که شما هم زدید , اگر مثلا عدد "1" لینک ویرایش (یا حذف) که نشانگر id است رو به صورت دستی(تغییر کد html و ...) تغییر بده, می‌تونه به خبر دیگه ای دسترسی داشته باشه ؟
    خبری که ثبت کنندش خودش نیست بتبع هم اجازه ویرایش و حذف ان را نباید داشته باشه...
    راه حل چیست؟ آیا باید قبل از نشان دادن صفحه ویرایش یا قبل از عمل حذف ثبت کننده خبر هم چک بشه (که فردی که این خبر رو ثبت نکرده دسترسی به ان نداشته باشه)؟
    لطفا راهنمایی بفرمایید.
    سپاس.