অ্যাকশন চিত্র এমভিসি 3 রেজার


119

এমভিসি 3 তে রেজার ব্যবহার করে চিত্রগুলির সাথে লিঙ্কগুলি প্রতিস্থাপনের সেরা উপায় কী। এই মুহূর্তে আমি কেবল এটি করছি:

<a href="@Url.Action("Edit", new { id=MyId })"><img src="../../Content/Images/Image.bmp", alt="Edit" /></a> 

একটি ভাল উপায় আছে কি?


15
সরাসরি সম্পর্কিত নয়, তবে আমি আপনাকে দৃ strongly়ভাবে পরামর্শ দিচ্ছি যে আপনি বিএমপি ফাইলের পরিবর্তে পিএনজি বা জেপিজি ফাইলগুলি (চিত্রের সামগ্রীর উপর নির্ভর করে) ব্যবহার করুন। এবং @ জাগাফিনের পরামর্শ অনুসারে, অ্যাপ্লিকেশন সম্পর্কিত আপেক্ষিক পাথগুলি ব্যবহার করার চেষ্টা করুন ( ~/Content)। পথ ../../Contentআলাদা রুট থেকে বৈধ নাও হতে পারে (যেমন /, /Home, /Home/Index)।
লুকাস

ধন্যবাদ লুকাস। আমি পিএনজি ব্যবহার করি না তবে ইউআরএল ব্যবহারের জন্য পরামর্শ on কনটেন্টটি আমি যা খুঁজছিলাম। ভোট আপ :)
ডেভি

উত্তর:


217

আপনি আপনার সিএসএইচটিএমএল ফাইলটিতে কোডটি সহজ করার জন্য এইচটিএমএলহেল্পারের জন্য একটি এক্সটেনশন পদ্ধতি তৈরি করতে পারেন। আপনি এই জাতীয় পদ্ধতিতে আপনার ট্যাগগুলি প্রতিস্থাপন করতে পারেন:

// Sample usage in CSHTML
@Html.ActionImage("Edit", new { id = MyId }, "~/Content/Images/Image.bmp", "Edit")

উপরের কোডের জন্য এখানে একটি নমুনা বর্ধনের পদ্ধতি রয়েছে:

// Extension method
public static MvcHtmlString ActionImage(this HtmlHelper html, string action, object routeValues, string imagePath, string alt)
{
    var url = new UrlHelper(html.ViewContext.RequestContext);

    // build the <img> tag
    var imgBuilder = new TagBuilder("img");
    imgBuilder.MergeAttribute("src", url.Content(imagePath));
    imgBuilder.MergeAttribute("alt", alt);
    string imgHtml = imgBuilder.ToString(TagRenderMode.SelfClosing);

    // build the <a> tag
    var anchorBuilder = new TagBuilder("a");
    anchorBuilder.MergeAttribute("href", url.Action(action, routeValues));
    anchorBuilder.InnerHtml = imgHtml; // include the <img> tag inside
    string anchorHtml = anchorBuilder.ToString(TagRenderMode.Normal);

    return MvcHtmlString.Create(anchorHtml);
}

5
দুর্দান্ত স্নিপেট। টি 4 এমভিসির সাথে এটি ব্যবহার করতে চাইলে যে কোনও ব্যক্তিকে কেবল তার ধরণটি পরিবর্তন routeValuesকরতে হবে ActionResultএবং তারপরে url.Actionফাংশনে পরিবর্তন routeValuesকরতে হবেrouteValues.GetRouteValueDictionary()
জে কনস্ট্যান্টাইন

12
@ ক্যাস্পার স্কোভ: পদ্ধতিটি একটি স্ট্যাটিক ক্লাসে রাখুন, তারপরে উপাদানটির ওয়েবকনফাইগের 'ক্লাসের' নেমস্পেসটি উল্লেখ করুন /configuration/system.web/pages/namespaces
উমর ফারুক খাজা

4
ভাল! এর পরিবর্তে alt, আমি কোনও বেনামে অবজেক্ট ব্যবহার করে এইচটিএমএল বৈশিষ্ট্যগুলি গ্রহণ করার জন্য কোনও জিনিস গ্রহণ করি var attributes = HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes);এবং শেষ অবধিforeach (var attr in attributes){ imgBuilder.MergeAttribute(attr.Key, attr.Value.ToString());}
guzart

7
আমি বুঝতে না পারছি যতক্ষণ না আমি বুঝতে পেরেছি যে আমি অঞ্চলগুলি ক্লাসের নেমস্পেসের জন্য একটি রেফারেন্স ব্যবহার করছি (উমরের নির্দেশ অনুসারে) সমস্ত অঞ্চলের জন্য ভিউ ফোল্ডারে সমস্ত ওয়েবকনফিগ ফাইলগুলিতে যুক্ত করা দরকার শীর্ষ স্তরের /Viewsফোল্ডার
মার্ক_গিবসন

2
আপনার যদি কেবলমাত্র একক পৃষ্ঠায় এটি দরকার হয় তবে ওয়েবকনফিগ ফাইলগুলি পরিবর্তনের পরিবর্তে, আপনি .cshtml এ একটি @ ব্যবহারের বিবৃতি যুক্ত করতে পারেন এবং নামের স্থানটি উল্লেখ করতে পারেন
জেএমএল

64

এটি ব্যবহার করতে পারেন Url.Contentযা সমস্ত লিঙ্কের জন্য কাজ করে কারণ এটি টিলডকে ~মূল ইউরিতে অনুবাদ করে ।

<a href="@Url.Action("Edit", new { id=MyId })">
    <img src="@Url.Content("~/Content/Images/Image.bmp")", alt="Edit" />
</a>

3
এটি এমভিসি 3 তে দুর্দান্ত কাজ করে। ধন্যবাদ! <a href="@Url.Action("Index","Home")"><img src="@Url.Content("~/Content/images/myimage.gif")" alt="Home" /></a>
rk1962

24

উপরে লুকাসের উত্তরের উপর ভিত্তি করে, এটি একটি ওভারলোড যা অ্যাকশনলিংকের অনুরূপ প্যারামিটার হিসাবে একটি নিয়ামকের নাম নেয়। আপনার চিত্রটি যখন অন্য কোনও নিয়ামকের কোনও ক্রিয়ায় লিঙ্ক হয় তখন এই ওভারলোডটি ব্যবহার করুন।

// Extension method
public static MvcHtmlString ActionImage(this HtmlHelper html, string action, string controllerName, object routeValues, string imagePath, string alt)
{
    var url = new UrlHelper(html.ViewContext.RequestContext);

    // build the <img> tag
    var imgBuilder = new TagBuilder("img");
    imgBuilder.MergeAttribute("src", url.Content(imagePath));
    imgBuilder.MergeAttribute("alt", alt);
    string imgHtml = imgBuilder.ToString(TagRenderMode.SelfClosing);

    // build the <a> tag
    var anchorBuilder = new TagBuilder("a");

    anchorBuilder.MergeAttribute("href", url.Action(action, controllerName, routeValues));
    anchorBuilder.InnerHtml = imgHtml; // include the <img> tag inside
    string anchorHtml = anchorBuilder.ToString(TagRenderMode.Normal);

    return MvcHtmlString.Create(anchorHtml);
}

1
এখানে আপনার যোগ সম্পর্কে কোনও মন্তব্য নেই ... ভাল আমি প্রদত্ত কোডটিতে ভাল পরিবর্তন চাই। আমার কাছ থেকে +1
জ্যাক জান্নসেন

11

ঠিক আছে, আপনি @ লুকাশ সমাধানটি ব্যবহার করতে পারেন, তবে আরও একটি উপায় আছে।

 @Html.ActionLink("Update", "Update", *Your object value*, new { @class = "imgLink"})

এখন, এই ক্লাসটি একটি সিএসএস ফাইলে বা আপনার পৃষ্ঠায় যুক্ত করুন:

.imgLink
{
  background: url(YourImage.png) no-repeat;
}

এই শ্রেণীর সাথে, যে কোনও লিঙ্কে আপনার পছন্দসই চিত্র থাকবে।


2
@ ক্যাস্পারস্কভ আমি এই ছোট সমস্যাটি ভুলে গেছি। কোনও কারণে, অ্যাকশনলিঙ্ক সহায়কের এই নির্দিষ্ট ওভাররাইড, উপরের উদাহরণটির সাথে কাজ করে না। যা শুরু করেছো ControllerNameআপনার কর্মের। এটি পছন্দ করুন:@Html.ActionLink("Update", "Update", "*Your Controller*",*object values*, new {@class = "imgLink"})
অ্যাড্রিয়ানোআরআর

3

এটি একটি খুব দরকারী থ্রেড পরিণত।

যারা কোঁকড়ানো ধনুর্বন্ধনী থেকে অ্যালার্জিযুক্ত তাদের জন্য এখানে লুকাসের VB.NET সংস্করণ এবং ক্র্যাকের উত্তর:

Public Module ActionImage
    <System.Runtime.CompilerServices.Extension()>
    Function ActionImage(html As HtmlHelper, Action As String, RouteValues As Object, ImagePath As String, AltText As String) As MvcHtmlString

        Dim url = New UrlHelper(html.ViewContext.RequestContext)

        Dim imgHtml As String
        'Build the <img> tag
        Dim imgBuilder = New TagBuilder("img")
        With imgBuilder
            .MergeAttribute("src", url.Content(ImagePath))
            .MergeAttribute("alt", AltText)
            imgHtml = .ToString(TagRenderMode.Normal)
        End With

        Dim aHtml As String
        'Build the <a> tag
        Dim aBuilder = New TagBuilder("a")
        With aBuilder
            .MergeAttribute("href", url.Action(Action, RouteValues))
            .InnerHtml = imgHtml 'Include the <img> tag inside
            aHtml = aBuilder.ToString(TagRenderMode.Normal)
        End With

        Return MvcHtmlString.Create(aHtml)

    End Function

    <Extension()>
    Function ActionImage(html As HtmlHelper, Action As String, Controller As String, RouteValues As Object, ImagePath As String, AltText As String) As MvcHtmlString

        Dim url = New UrlHelper(html.ViewContext.RequestContext)

        Dim imgHtml As String
        'Build the <img> tag
        Dim imgBuilder = New TagBuilder("img")
        With imgBuilder
            .MergeAttribute("src", url.Content(ImagePath))
            .MergeAttribute("alt", AltText)
            imgHtml = .ToString(TagRenderMode.Normal)
        End With

        Dim aHtml As String
        'Build the <a> tag
        Dim aBuilder = New TagBuilder("a")
        With aBuilder
            .MergeAttribute("href", url.Action(Action, Controller, RouteValues))
            .InnerHtml = imgHtml 'Include the <img> tag inside
            aHtml = aBuilder.ToString(TagRenderMode.Normal)
        End With

        Return MvcHtmlString.Create(aHtml)

    End Function

End Module

1

এই সম্প্রসারণ পদ্ধতিটিও কাজ করে (একটি সর্বজনীন স্ট্যাটিক শ্রেণিতে স্থাপন করা):

    public static MvcHtmlString ImageActionLink(this AjaxHelper helper, string imageUrl, string altText, string actionName, object routeValues, AjaxOptions ajaxOptions)
    {
        var builder = new TagBuilder("img");
        builder.MergeAttribute("src", imageUrl);
        builder.MergeAttribute("alt", altText);
        var link = helper.ActionLink("[replaceme]", actionName, routeValues, ajaxOptions);
        return new MvcHtmlString( link.ToHtmlString().Replace("[replaceme]", builder.ToString(TagRenderMode.SelfClosing)) );
    }

1

লুক দ্বারা শুরু করা সমস্ত দুর্দান্ত কাজের সাথে যুক্ত করতে আমি আরও একটি পোস্ট করছি যা একটি সিএসএস শ্রেণির মান নেয় এবং শ্রেণি এবং Altটিকে paraচ্ছিক প্যারামিটার হিসাবে বিবেচনা করে (এএসপি.নেট 3.5+ এর অধীনে বৈধ)। এটি আরও কার্যকারিতা মঞ্জুর করবে তবে প্রয়োজনীয় ওভারলোড পদ্ধতিগুলির সংখ্যা হ্রাস করবে।

// Extension method
    public static MvcHtmlString ActionImage(this HtmlHelper html, string action,
        string controllerName, object routeValues, string imagePath, string alt = null, string cssClass = null)
    {
        var url = new UrlHelper(html.ViewContext.RequestContext);

        // build the <img> tag
        var imgBuilder = new TagBuilder("img");
        imgBuilder.MergeAttribute("src", url.Content(imagePath));
        if(alt != null)
            imgBuilder.MergeAttribute("alt", alt);
        if (cssClass != null)
            imgBuilder.MergeAttribute("class", cssClass);

        string imgHtml = imgBuilder.ToString(TagRenderMode.SelfClosing);

        // build the <a> tag
        var anchorBuilder = new TagBuilder("a");

        anchorBuilder.MergeAttribute("href", url.Action(action, controllerName, routeValues));
        anchorBuilder.InnerHtml = imgHtml; // include the <img> tag inside
        string anchorHtml = anchorBuilder.ToString(TagRenderMode.Normal);

        return MvcHtmlString.Create(anchorHtml);
    }

এছাড়াও, এমভিসিতে নতুন যে কারও জন্য, সহায়ক ইঙ্গিত - রুটভ্যালু শোল্ডলের মান হ'ল @ রুটটবেল R
জ্যাক জান্নসেন

1

স্লাইড পরিবর্তন পরিবর্তিত হেল্পার

     public static IHtmlString ActionImageLink(this HtmlHelper html, string action, object routeValues, string styleClass, string alt)
    {
        var url = new UrlHelper(html.ViewContext.RequestContext);
        var anchorBuilder = new TagBuilder("a");
        anchorBuilder.MergeAttribute("href", url.Action(action, routeValues));
        anchorBuilder.AddCssClass(styleClass);
        string anchorHtml = anchorBuilder.ToString(TagRenderMode.Normal);

        return new HtmlString(anchorHtml);
    }

সিএসএস ক্লাস

.Edit {
       background: url('../images/edit.png') no-repeat right;
       display: inline-block;
       height: 16px;
       width: 16px;
      }

লিঙ্কটি তৈরি করুন কেবল শ্রেণীর নাম পাস করুন

     @Html.ActionImageLink("Edit", new { id = item.ID }, "Edit" , "Edit") 

0

আমি লুকাস এবং " এএসপি.নেট এমভিসি হেল্পার্স, দুটি অবজেক্ট এইচটিএমএলএ্যাট্রিবিউট একসাথে মার্জ করা " এবং প্লাস কন্ট্রোলার নেম থেকে নিম্নলিখিত কোডগুলিতে উত্তরটিতে যোগদান করেছি :

// সিএসএইচটিএমএলে নমুনার ব্যবহার

 @Html.ActionImage("Edit",
       "EditController"
        new { id = MyId },
       "~/Content/Images/Image.bmp",
       new { width=108, height=129, alt="Edit" })

এবং উপরের কোডের জন্য এক্সটেনশন ক্লাস:

using System.Collections.Generic;
using System.Reflection;
using System.Web.Mvc;

namespace MVC.Extensions
{
    public static class MvcHtmlStringExt
    {
        // Extension method
        public static MvcHtmlString ActionImage(
          this HtmlHelper html,
          string action,
          string controllerName,
          object routeValues,
          string imagePath,
          object htmlAttributes)
        {
            ///programming/4896439/action-image-mvc3-razor
            var url = new UrlHelper(html.ViewContext.RequestContext);

            // build the <img> tag
            var imgBuilder = new TagBuilder("img");
            imgBuilder.MergeAttribute("src", url.Content(imagePath));

            var dictAttributes = htmlAttributes.ToDictionary();

            if (dictAttributes != null)
            {
                foreach (var attribute in dictAttributes)
                {
                    imgBuilder.MergeAttribute(attribute.Key, attribute.Value.ToString(), true);
                }
            }                        

            string imgHtml = imgBuilder.ToString(TagRenderMode.SelfClosing);

            // build the <a> tag
            var anchorBuilder = new TagBuilder("a");
            anchorBuilder.MergeAttribute("href", url.Action(action, controllerName, routeValues));
            anchorBuilder.InnerHtml = imgHtml; // include the <img> tag inside            
            string anchorHtml = anchorBuilder.ToString(TagRenderMode.Normal);

            return MvcHtmlString.Create(anchorHtml);
        }

        public static IDictionary<string, object> ToDictionary(this object data)
        {
            ///programming/6038255/asp-net-mvc-helpers-merging-two-object-htmlattributes-together

            if (data == null) return null; // Or throw an ArgumentNullException if you want

            BindingFlags publicAttributes = BindingFlags.Public | BindingFlags.Instance;
            Dictionary<string, object> dictionary = new Dictionary<string, object>();

            foreach (PropertyInfo property in
                     data.GetType().GetProperties(publicAttributes))
            {
                if (property.CanRead)
                {
                    dictionary.Add(property.Name, property.GetValue(data, null));
                }
            }
            return dictionary;
        }
    }
}

0

এটি খুব সূক্ষ্ম কাজ হবে

<a href="<%:Url.Action("Edit","Account",new {  id=item.UserId }) %>"><img src="../../Content/ThemeNew/images/edit_notes_delete11.png" alt="Edit" width="25px" height="25px" /></a>
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.