Html.ActionLink dưới dạng nút hoặc hình ảnh, không phải là liên kết

Trong bản phát hành mới nhất (RC1) của ASP.NET MVC, làm cách nào để có được Html.ActionLink để hiển thị dưới dạng nút hoặc hình ảnh thay vì liên kết?

Phản hồi muộn nhưng bạn chỉ có thể giữ nó đơn giản và áp dụng một lớp CSS cho đối tượng htmlAttribut.

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

và sau đó tạo một lớp trong biểu định kiểu của bạn

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

Tôi thích sử dụng Url.Action () và Url.Content () như thế này:

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

Nói đúng ra, Url.Content chỉ cần thiết cho đường dẫn không thực sự là một phần của câu trả lời cho câu hỏi của bạn.

Cảm ơn @BrianLegg đã chỉ ra rằng điều này sẽ sử dụng cú pháp chế độ xem Dao cạo mới. Ví dụ đã được cập nhật tương ứng.

Mượn từ câu trả lời của Patrick, tôi thấy rằng tôi phải làm điều này:

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

để tránh gọi phương thức bài của mẫu.

Gọi tôi đơn giản, nhưng tôi chỉ làm:

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

Và bạn chỉ cần chăm sóc các liên kết nổi bật. Người dùng của chúng tôi thích nó :)

Sử dụng bootstrap đây là cách tiếp cận ngắn nhất và sạch nhất để tạo liên kết đến hành động của bộ điều khiển xuất hiện dưới dạng nút động:

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

Hoặc để sử dụng trình trợ giúp Html:

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

Chỉ đơn giản vậy thôi :

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

Một câu trả lời muộn nhưng đây là cách tôi biến ActionLink của mình thành một nút. Chúng tôi đang sử dụng Bootstrap trong dự án của chúng tôi vì nó thuận tiện. Đừng bận tâm đến @T vì nó chỉ là một dịch giả chúng tôi đang sử dụng.

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

Ở trên cung cấp một liên kết như thế này và nó trông giống như hình dưới đây:

localhost:XXXXX/Firms/AddAffiliation/F0500

Theo quan điểm của tôi:

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

}

Hy vọng điều này sẽ giúp ai đó

nếu bạn không muốn sử dụng một liên kết, sử dụng nút. bạn cũng có thể thêm hình ảnh vào nút:

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

gõ = "nút" thực hiện hành động của bạn thay vì gửi biểu mẫu.

Bạn không thể làm điều này với Html.ActionLink. Bạn nên sử dụng Url.RouteUrlvà sử dụng URL để xây dựng thành phần bạn muốn.

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

Một cách đơn giản để biến Html.ActionLink của bạn thành một nút (miễn là bạn đã cắm BootStrap - thứ mà bạn có thể có) là như thế này:

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

Ngay cả phản hồi sau đó, nhưng tôi chỉ gặp phải một vấn đề tương tự và cuối cùng đã viết phần mở rộng liên kết hình ảnh HtmlHelper của riêng tôi .

Bạn có thể tìm thấy một triển khai của nó trên blog của tôi trong liên kết ở trên.

Chỉ cần thêm vào trong trường hợp ai đó đang săn lùng một thực hiện.

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

Để hiển thị một biểu tượng với liên kết

Làm những gì Mehrdad nói - hoặc sử dụng trình trợ giúp url từ HtmlHelperphương thức tiện ích mở rộng như Stephen Walther mô tả ở đây và tạo phương thức tiện ích mở rộng của riêng bạn có thể được sử dụng để hiển thị tất cả các liên kết của bạn.

Sau đó, sẽ dễ dàng hiển thị tất cả các liên kết dưới dạng nút / neo hoặc bất cứ điều gì bạn thích - và quan trọng nhất là bạn có thể thay đổi suy nghĩ của mình sau khi bạn phát hiện ra rằng bạn thực sự thích một số cách khác để tạo liên kết của mình.

bạn có thể tạo phương thức mở rộng của riêng mình
hãy xem triển khai của tôi

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

sau đó sử dụng nó trong chế độ xem của bạn hãy xem cuộc gọi của tôi

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

Đối với Thiết kế Vật liệu Lite và 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?');" />
    }

Dường như có rất nhiều giải pháp về cách tạo một liên kết hiển thị dưới dạng hình ảnh, nhưng không có giải pháp nào làm cho nó có vẻ là một nút.

Chỉ có cách tốt mà tôi đã tìm thấy để làm điều này. Đó là một chút hacky, nhưng nó hoạt động.

Những gì bạn phải làm là tạo một nút và một liên kết hành động riêng biệt. Làm cho liên kết hành động vô hình bằng cách sử dụng css. Khi bạn nhấp vào nút, nó có thể kích hoạt sự kiện nhấp của liên kết hành động.

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

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

Nó có thể là một nỗi đau ở mông để làm điều này mỗi khi bạn thêm một liên kết cần trông giống như một nút, nhưng nó thực hiện được kết quả mong muốn.

sử dụng HÌNH THỨC

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

Chỉ cần tìm thấy phần mở rộng này để làm điều đó - đơn giản và hiệu quả.

Cách tôi đã làm là để có ActionLink và hình ảnh riêng biệt. Đặt hình ảnh hành động là ẩn và sau đó thêm một cuộc gọi kích hoạt jQuery. Đây là một cách giải quyết.

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

Ví dụ kích hoạt:

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

Url.Action()sẽ giúp bạn có được URL trống cho hầu hết các trường hợp quá tải Html.ActionLink, nhưng tôi nghĩ rằng URL-from-lambdachức năng này chỉ khả dụng Html.ActionLinkcho đến nay. Hy vọng rằng họ sẽ thêm một quá tải tương tự Url.Actiontại một số điểm.

Đây là cách tôi đã làm mà không cần kịch bản:

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

Tương tự, nhưng với hộp thoại tham số và xác nhận:

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