Development Tip

ASP.NET MVC에서 이미지 주위에 Html.ActionLink를 만드시겠습니까?

yourdevel 2020. 11. 16. 22:15
반응형

ASP.NET MVC에서 이미지 주위에 Html.ActionLink를 만드시겠습니까?


링크를 뱉어내는 대신 생성 된 링크를 이미지 주위에 배치하는 것을 제외하고 Html.ActionLink ()와 유사한 작업을 어떻게 수행 할 수 있습니까?


Razor (View Engine) :

<a href="@Url.Action("ActionName", "ControllerName")">
    <img src="@Url.Content("~/Content/img/imgname.jpg")" />
</a>

ASPX (View Engine) :

<a href="<%= Url.Action("ActionName", "ControllerName") %>">
    <img src="<%= Url.Content("~/Content/img/imgname.jpg") %>" />
</a>

분명히 한 번 이상이 작업을 수행하면 도우미를 작성하십시오. 그리고 img / a의 다른 속성을 입력합니다. 그러나 이것은 당신에게 일반적인 아이디어를 줄 것입니다.


다음과 같이 시도하십시오.

public static string ActionLinkWithImage(this HtmlHelper html, string imgSrc, string actionName)
{
    var urlHelper = new UrlHelper(html.ViewContext.RequestContext);

    string imgUrl = urlHelper.Content(imgSrc);
    TagBuilder imgTagBuilder = new TagBuilder("img");
    imgTagBuilder.MergeAttribute("src", imgUrl);
    string img = imgTagBuilder.ToString(TagRenderMode.SelfClosing);

    string url = UrlHelper.Action(actionName);

    TagBuilder tagBuilder = new TagBuilder("a") {
        InnerHtml = img
    };
    tagBuilder.MergeAttribute("href", url);

    return tagBuilder.ToString(TagRenderMode.Normal);
}

도움이 되었기를 바랍니다


@Craig Stuntz가 제공 한 첫 번째 대답은 절대적으로 완벽하지만 내 관심사는 Ajax.ActionLink대신 Html.ActionLink. 여기서는 두 가지 방법에 대한 쉬운 솔루션을 설명합니다. 다음에 대해 다음과 같이 할 수 있습니다 Html.ActonLink.

@Html.Raw(@Html.ActionLink("[replacetext]", "Index", "Home").ToHtmlString().Replace("[replacetext]", "<img src=\"/Contents/img/logo.png\" ... />"))

동일한 개념을 적용 할 수 있습니다. Ajax.ActionLink

@Html.Raw(@Ajax.ActionLink("[replacetext]", "Index", "Home", new AjaxOptions { UpdateTargetId="dvTest"}).ToHtmlString().Replace("[replacetext]", "<img src=\"/Contents/img/logo.png\" … />"))

그래서 이것은 당신에게 쉬울 것입니다.

편집하다:

스타일 시트 또는 클래스 이름이있는 ActionLink 이미지

스타일 시트 포함

@Html.Raw(@Ajax.ActionLink("[replacetext]", "Index", "Home", new AjaxOptions { UpdateTargetId="dvTest"}).ToHtmlString().Replace("[replacetext]", "<img src=\"/assets/img/logo.png\"  style=\"width:10%\" ... />"))

클래스 이름 포함

<style>
.imgClass {
 width:20%
}

@Html.Raw(@Ajax.ActionLink("[replacetext]", "Index", "Home", new AjaxOptions { UpdateTargetId="dvTest"}).ToHtmlString().Replace("[replacetext]", "<img src=\"/assets/img/logo.png\" class=\"imgClass\"  ... />"))

For more reference regarding ActionLink around Image visit ActionLink around Image in Asp.net MVC


more easy...

change your code by:

<p class="site-title">@Html.ActionLink(" ", "Index", "Home",
    new
    {
        style = "background: url('" + Url.Content("~/images/logo.png") + "') no-repeat center right; display:block; height:50px;width:50px;"
    })</p>

You can use url.content:

@Url.Content("~/images/img/slide.png")

this return relative path


You can create htmlhelper which can return image with link... As parameters you will pass to htmlhelper values like image path and link and in htmlhelper you will use StringBuilder to format html of that linked image properly...

cheers

참고URL : https://stackoverflow.com/questions/989005/make-an-html-actionlink-around-an-image-in-asp-net-mvc

반응형