www.dntips.ir
مطالب ۳۶۹۴
نویسندگان ۲۷۶
گروه‌های مطالب ۱۰۲۴
نقشه‌های راه ۱۱۹
دوره‌ها ۱۴
اشتراک‌ها ۱۷۹۱۴
عنوان:

‫ایجاد لینک با یک تصویر بوسیله Html Helper


نویسنده: مهراد
تاریخ: ۱۳۹۲/۰۵/۰۸ ۸:۵
آدرس: www.dntips.ir
با 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 تولید شده را  مشاهد می‌نمایید.
مطالب مشابه

نظرات

  • حمید چگینی در ۱۳۹۲/۰۵/۲۵ ۱۰:۱
    سلام و ممنون از مطلب ارسالی خیلی مفیدتون. از این خط خطا گرفته میشه: 
    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 و ...) تغییر بده, می‌تونه به خبر دیگه ای دسترسی داشته باشه ؟
    خبری که ثبت کنندش خودش نیست بتبع هم اجازه ویرایش و حذف ان را نباید داشته باشه...
    راه حل چیست؟ آیا باید قبل از نشان دادن صفحه ویرایش یا قبل از عمل حذف ثبت کننده خبر هم چک بشه (که فردی که این خبر رو ثبت نکرده دسترسی به ان نداشته باشه)؟
    لطفا راهنمایی بفرمایید.
    سپاس.