Html.ActionLink jako przycisk lub obraz, a nie łącze

Jak w najnowszej (RC1) wersji programu ASP.NET MVC uzyskać Html.ActionLink do renderowania jako przycisku lub obrazu zamiast łącza?

Późna odpowiedź, ale możesz po prostu to uprościć i zastosować klasę CSS do obiektu htmlAttributes.

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

a następnie utwórz klasę w arkuszu stylów

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

Lubię używać Url.Action () i Url.Content () w następujący sposób:

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

Ściśle rzecz biorąc, adres URL jest potrzebny tylko do ścieżki, ale tak naprawdę nie jest częścią odpowiedzi na twoje pytanie.

Dzięki @BrianLegg za zwrócenie uwagi, że powinno to korzystać z nowej składni widoku Razor. Przykład został odpowiednio zaktualizowany.

Pożyczając z odpowiedzi Patricka, stwierdziłem, że muszę to zrobić:

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

aby uniknąć wywołania metody post formularza.

Nazwij mnie uproszczonym, ale po prostu:

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

I po prostu zajmij się podświetleniem hiperłącza. Nasi użytkownicy to uwielbiają :)

Za pomocą bootstrap jest to najkrótsze i najczystsze podejście do utworzenia łącza do akcji kontrolera, która pojawia się jako przycisk dynamiczny:

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

Lub użyć pomocników HTML:

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

Po prostu:

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

Późna odpowiedź, ale w ten sposób zmieniam mój ActionLink w przycisk. W naszym projekcie używamy Bootstrap, ponieważ jest to wygodne. Nieważne @T, ponieważ używamy tylko tłumacza.

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

Powyższe daje taki link i wygląda jak na poniższym obrazku:

localhost:XXXXX/Firms/AddAffiliation/F0500

Według mnie:

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

}

Mam nadzieję, że to komuś pomoże

jeśli nie chcesz używać linku, użyj przycisku. możesz również dodać obrazek do przycisku:

<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" wykonuje akcję zamiast przesyłać formularz.

Nie możesz tego zrobić Html.ActionLink. Należy użyć Url.RouteUrladresu URL i użyć go do zbudowania żądanego elementu.

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

Prosty sposób, aby zrobić Html.ActionLink w przycisk (o ile masz podłączony BootStrap - co prawdopodobnie masz) jest następujący:

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

Nawet późniejsza odpowiedź, ale wpadłem na podobny problem i skończyło się na napisaniu własnego rozszerzenia Image link HtmlHelper .

Implementację można znaleźć na moim blogu w linku powyżej.

Właśnie dodano, na wypadek, gdyby ktoś szukał implementacji.

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

Aby wyświetlić ikonę z linkiem

Zrób to, co mówi Mehrdad - lub skorzystaj z pomocnika URL z HtmlHelpermetody rozszerzenia, takiej jak Stephen Walther, który opisuje tutaj i stwórz własną metodę rozszerzenia, której można użyć do renderowania wszystkich twoich linków.

Wtedy łatwo będzie renderować wszystkie linki jako przyciski / kotwice lub cokolwiek wolisz - i, co najważniejsze, możesz zmienić zdanie później, gdy okaże się, że wolisz inny sposób tworzenia linków.

możesz stworzyć własną metodę rozszerzenia,
spójrz na moją implementację

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

użyj go w swoim widoku, spójrz na moje wezwanie

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

W przypadku Material Design Lite i 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?');" />
    }

Wydaje się, że istnieje wiele rozwiązań dotyczących sposobu tworzenia łącza wyświetlanego jako obraz, ale żadne z nich nie wydaje się być przyciskiem.

Jest tylko dobry sposób, aby to zrobić. Jest trochę zuchwały, ale działa.

Musisz tylko utworzyć przycisk i osobne łącze do akcji. Uczyń link akcji niewidocznym za pomocą css. Po kliknięciu przycisku można uruchomić zdarzenie kliknięcia łącza akcji.

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

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

Może to być problem w tyłku, gdy robi się to za każdym razem, gdy dodajesz link, który musi wyglądać jak przycisk, ale osiąga pożądany efekt.

użyj FORMAKCJI

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

Właśnie znalazłem to rozszerzenie, aby to zrobić - proste i skuteczne.

Sposób, w jaki to zrobiłem, to oddzielne połączenie actionLink i obrazu. Ustaw obraz Actionlink jako ukryty, a następnie dodano wywołanie wyzwalacza jQuery. To jest bardziej obejście.

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

Przykład wyzwalacza:

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

Url.Action()dostarczy ci pusty adres URL dla większości przeciążeń Html.ActionLink, ale myślę, że ta URL-from-lambdafunkcjonalność jest dostępna tylko do Html.ActionLinktej pory. Mam nadzieję, że Url.Actionw pewnym momencie dodadzą podobne przeciążenie .

Oto jak to zrobiłem bez skryptów:

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

To samo, ale z oknem dialogowym parametrów i potwierdzenia:

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