링크가 아닌 버튼이나 이미지로 html.actionLink

Question

ASP.NET MVC의 최신 (RC1) 릴리스에서 HTML.ActionLink를 링크 대신 버튼이나 이미지로 렌더링하려면 어떻게해야합니까?

Answer 1

늦은 응답이지만 간단하게 유지하고 CSS 클래스를 htmlattributes 객체에 적용 할 수 있습니다.

<%= Html.ActionLink("Button Name", "Index", null, new { @class="classname" }) %>

그런 다음 스타일 시트에서 수업을 만듭니다

a.classname
{
    background: url(../Images/image.gif) no-repeat top left;
     display: block;
     width: 150px;
     height: 150px;
     text-indent: -9999px; /* hides the link text */
}

Answer 2

url.action () 및 url.content ()를 사용하는 것을 좋아합니다.

<a href='@Url.Action("MyAction", "MyController")'>
    <img src='@Url.Content("~/Content/Images/MyLinkImage.png")' />
</a>

엄밀히 말하면, URL.Content는 Pathing에만 필요합니다. 실제로 귀하의 질문에 대한 답의 일부는 아닙니다.

새로운 Razor View Syntax를 사용해야한다고 지적한 @brianlegg 덕분에 감사합니다. 그에 따라 예제가 업데이트되었습니다.

Answer 3

Patrick의 답변에서 빌려서 나는 이것을해야한다는 것을 알았습니다.

<button onclick="location.href='@Url.Action("Index", "Users")';return false;">Cancel</button>

양식의 게시물을 호출하지 않도록합니다.

Answer 4

나를 단순하게 부르라고 불러주세요.

<a href="<%: Url.Action("ActionName", "ControllerName") %>">
    <button>Button Text</button>
</a>

그리고 당신은 단지 하이퍼 링크 하이라이트를 관리합니다. 우리의 사용자는 그것을 좋아합니다 :)

Answer 5

간단히 :

<button onclick="@Url.Action("index", "Family", new {familyid = Model.FamilyID })">Cancel</button>

Answer 6

늦은 답변이지만 이것이 actionLink를 버튼으로 만드는 방법입니다. 우리는 프로젝트에서 Bootstrap을 편리하게 사용하고 있습니다. @T는 우리가 사용하고있는 번역가이므로 신경 쓰지 마십시오.

@Html.Actionlink("Some_button_text", "ActionMethod", "Controller", "Optional parameter", "html_code_you_want_to_apply_to_the_actionlink");

위의 내용은 이와 같은 링크를 제공하며 아래 그림처럼 보입니다.

localhost:XXXXX/Firms/AddAffiliation/F0500

내 견해로 :

@using (Html.BeginForm())
{
<div class="section-header">
    <div class="title">
        @T("Admin.Users.Users")
    </div>
    <div class="addAffiliation">
        <p />
        @Html.ActionLink("" + @T("Admin.Users.AddAffiliation"), "AddAffiliation", "Firms", new { id = (string)@WorkContext.CurrentFirm.ExternalId }, new { @class="btn btn-primary" })
    </div>
</div>

}

이것이 누군가를 돕기를 바랍니다

Answer 7

링크를 사용하지 않으려면 사용 버튼을 사용하십시오. 버튼에 이미지를 추가 할 수 있습니다.

<button type="button" onclick="location.href='@Url.Action("Create", "Company")'" >
   Create New
   <img alt="New" title="New" src="~/Images/Button/plus.png">
</button>

type = "버튼" 양식을 제출하는 대신 행동을 수행합니다.

Answer 8

당신은 이것을 할 수 없습니다 Html.ActionLink. 당신은 사용해야합니다 Url.RouteUrl URL을 사용하여 원하는 요소를 구성하십시오.

Answer 9

부트 스트랩 사용 이는 동적 버튼으로 나타나는 컨트롤러 동작에 대한 링크를 만드는 가장 짧고 깨끗한 접근 방식입니다.

<a href='@Url.Action("Action", "Controller")' class="btn btn-primary">Click Me</a>

또는 HTML 도우미를 사용하려면 :

@Html.ActionLink("Click Me", "Action", "Controller", new { @class = "btn btn-primary" })

Answer 10

<button onclick="location.href='@Url.Action("NewCustomer", "Customers")'">Checkout >></button>

Answer 11

나중에 응답이지만, 나는 비슷한 문제에 부딪쳐서 내 자신의 글을 썼습니다. 이미지 링크 htmlhelper 확장.

위의 링크에서 내 블로그에서 구현을 찾을 수 있습니다.

누군가가 구현을 사냥하는 경우를 대비하여 추가했습니다.

Answer 12

간단한 방법으로 HTML.ActionLink를 버튼에 넣는 방법 (부트 스트랩 연결이있는 한).

@Html.ActionLink("Button text", "ActionName", "ControllerName", new { @class = "btn btn-primary" })

Answer 13

<li><a href="@Url.Action(  "View", "Controller" )"><i class='fa fa-user'></i><span>Users View</span></a></li>

링크와 함께 아이콘을 표시합니다

Answer 14

Mehrdad의 말을하거나 URL 도우미를 HtmlHelper Stephen Walther와 같은 확장 방법이 설명합니다 여기 모든 링크를 렌더링하는 데 사용할 수있는 자체 확장 방법을 만드십시오.

그러면 모든 링크를 버튼/앵커 또는 원하는 것을 쉽게 렌더링 할 수 있으며, 가장 중요한 것은 실제로 링크를 만드는 다른 방법을 선호한다는 것을 알게되면 나중에 마음을 바꿀 수 있습니다.

Answer 15

자신만의 확장 방법을 만들 수 있습니다
내 구현을 살펴보십시오

public static class HtmlHelperExtensions
{
    public static MvcHtmlString ActionImage(this HtmlHelper html, string action, object routeValues, string imagePath, string alt, object htmlAttributesForAnchor, object htmlAttributesForImage)
    {
        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);
        imgBuilder.MergeAttributes(new RouteValueDictionary(htmlAttributesForImage));
        string imgHtml = imgBuilder.ToString(TagRenderMode.SelfClosing);

        // build the <a> tag
        var anchorBuilder = new TagBuilder("a");
        anchorBuilder.MergeAttribute("href", action != null ? url.Action(action, routeValues) : "#");
        anchorBuilder.InnerHtml = imgHtml; // include the <img> tag inside
        anchorBuilder.MergeAttributes(new RouteValueDictionary(htmlAttributesForAnchor));

        string anchorHtml = anchorBuilder.ToString(TagRenderMode.Normal);
        return MvcHtmlString.Create(anchorHtml);
    }
}

그런 다음 당신의 관점에서 그것을 사용하십시오 내 전화를 살펴보세요

 @Html.ActionImage(null, null, "../../Content/img/Button-Delete-icon.png", Resource_en.Delete,
               new{//htmlAttributesForAnchor
                   href = "#",
                   data_toggle = "modal",
                   data_target = "#confirm-delete",
                   data_id = user.ID,
                   data_name = user.Name,
                   data_usertype = user.UserTypeID
               }, new{ style = "margin-top: 24px"}//htmlAttributesForImage
                    )

Answer 16

@using (Html.BeginForm("DeleteMember", "Member", new { id = Model.MemberID }))
    {
        <input type="submit" value="Delete Member" onclick = "return confirm('Are you sure you want to delete the member?');" />
    }

Answer 17

이미지로 표시되는 링크를 만드는 방법에 대한 솔루션이 많이 있지만 버튼으로 보이는 것은 없습니다.

내가 이것을하는 것을 발견 한 좋은 방법 만 있습니다. 약간 해킹되지만 작동합니다.

당신이해야 할 일은 버튼과 별도의 액션 링크를 만드는 것입니다. CSS를 사용하여 액션 링크를 보이지 않게 만듭니다. 버튼을 클릭하면 액션 링크의 클릭 이벤트를 발사 할 수 있습니다.

<input type="button" value="Search" onclick="Search()" />
 @Ajax.ActionLink("Search", "ActionName", null, new AjaxOptions {}, new { id = "SearchLink", style="display:none;" })

function Search(){
    $("#SearchLink").click();
 }

버튼처럼 보일 필요가있는 링크를 추가 할 때 마다이 작업을 수행하는 것은 엉덩이에 고통 일 수 있지만 원하는 결과를 얻을 수 있습니다.

Answer 18

사용 양식

<input type="submit" value="Delete" formaction="@Url.Action("Delete", new { id = Model.Id })" />

Answer 19

방금 발견되었습니다 이 확장 그렇게하려면 - 간단하고 효과적입니다.

Answer 20

내가 한 방식은 ActionLink와 이미지를 별도로 갖는 것입니다. ActionLink 이미지를 숨겨진 것으로 설정 한 다음 jQuery 트리거 호출을 추가하십시오. 이것은 더 많은 해결 방법입니다.

'<%= Html.ActionLink("Button Name", "Index", null, new { @class="yourclassname" }) %>'
<img id="yourImage" src="myImage.jpg" />

트리거 예 :

$("#yourImage").click(function () {
  $('.yourclassname').trigger('click');
});

Answer 21

Url.Action() 대부분의 과부하에 대한 베어 URL을 얻을 수 있습니다. Html.ActionLink, 그러나 나는 그것이 생각합니다 URL-from-lambda 기능은 만으로만 사용할 수 있습니다 Html.ActionLink 지금까지. 바라건대 그들은 비슷한 오버로드를 추가하기를 바랍니다 Url.Action 어느 시점에서.

Answer 22

이것이 스크립팅없이 수행 한 방법입니다.

@using (Html.BeginForm("Action", "Controller", FormMethod.Get))
{
    <button type="submit" 
            class="btn btn-default" 
            title="Action description">Button Label</button>
}

동일하지만 매개 변수 및 확인 대화 상자 :

@using (Html.BeginForm("Action", "Controller", 
        new { paramName = paramValue }, 
        FormMethod.Get, 
        new { onsubmit = "return confirm('Are you sure?');" }))
{
    <button type="submit" 
            class="btn btn-default" 
            title="Action description">Button Label</button>
}

Answer 23

재료 디자인 Lite 및 MVC의 경우 :

<a class="mdl-navigation__link" href='@Url.Action("MyAction", "MyController")'>Link Name</a>