HTML.ActionLink는 링크가 아닌 단추 또는 이미지

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

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

<%= 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 */
}

다음과 같이 Url.Action () 및 Url.Content ()를 사용하고 싶습니다.

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

엄밀히 말하면 Url.Content는 경로 지정에만 필요하며 실제로 귀하의 질문에 대한 답변의 일부는 아닙니다.

새로운 면도기 뷰 구문을 사용해야 함을 지적한 @BrianLegg에게 감사드립니다. 이에 따라 예제가 업데이트되었습니다.

Patrick의 답변에서 차용 한 결과 다음과 같이해야합니다.

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

양식의 post 메소드를 호출하지 않도록하십시오.

단순하다고 불러주세요.

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

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

부트 스트랩을 사용하면 동적 단추로 표시되는 컨트롤러 작업에 대한 링크를 만드는 가장 짧고 깔끔한 방법입니다.

<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" })

단순히 :

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

늦은 답변이지만 이것이 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>

}

희망이 누군가에게 도움이되기를 바랍니다.

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

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

type = "button" 은 양식을 제출하는 대신 작업을 수행합니다.

으로이 작업을 수행 할 수 없습니다 Html.ActionLink. Url.RouteUrlURL을 사용 하고 사용하여 원하는 요소를 구성 해야합니다 .

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

Html.ActionLink를 버튼으로 만드는 간단한 방법은 (부트 스트랩이 연결되어있는 한) 아마도 다음과 같습니다.

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

나중에 응답하지만 비슷한 문제가 발생하여 내 이미지 링크 HtmlHelper 확장을 작성하게되었습니다. .

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

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

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

링크가있는 아이콘을 표시하려면

Mehrdad의 말을 따르십시오-또는 HtmlHelperStephen Walther와 같은 확장 방법 의 URL 도우미를 사용 하십시오. 당신의 모든 링크를 렌더링하는 데 사용할 수있는 자신 만의 확장 방법을 확인하십시오.

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

자신의 확장 방법
을 만들어 내 구현을 살펴볼 수 있습니다.

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
                    )

Material Design Lite 및 MVC의 경우 :

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

@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?');" />
    }

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

내가 찾은 좋은 방법이 있습니다. 약간 해 키지 만 작동합니다.

당신이해야 할 일은 버튼과 별도의 작업 링크를 만드는 것입니다. 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();
 }

버튼처럼 보이는 링크를 추가 할 때마다이 작업을 수행하는 데 어려움이있을 수 있지만 원하는 결과를 얻을 수 있습니다.

FORMACTION 사용

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

간단하고 효과적인 확장 프로그램 을 찾았습니다 .

내가 한 방법은 actionLink와 이미지를 분리하는 것입니다. 액션 링크 이미지를 숨김으로 설정 한 다음 jQuery 트리거 호출을 추가하십시오. 이것은 더 많은 해결 방법입니다.

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

트리거 예 :

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

Url.Action()의 대부분의 과부하에 대한 기본 URL을 얻을 수 Html.ActionLink있지만 지금까지 URL-from-lambda기능을 사용할 수 있다고 생각합니다 Html.ActionLink. 바라건대 그들은 Url.Action어느 시점에서 비슷한 과부하를 추가 할 것 입니다.

이것이 내가 스크립팅하지 않고했던 방법입니다.

@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>
}