Html.ActionLink sebagai tombol atau gambar, bukan tautan

Dalam rilis terbaru (RC1) dari ASP.NET MVC, bagaimana cara mendapatkan Html.ActionLink untuk dirender sebagai tombol atau gambar alih-alih tautan?

Respons terlambat tetapi Anda bisa membuatnya tetap sederhana dan menerapkan kelas CSS ke objek htmlAttributes.

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

dan kemudian buat kelas di stylesheet Anda

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

Saya suka menggunakan Url.Action () dan Url.Content () seperti ini:

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

Sebenarnya, Url.Content hanya diperlukan untuk pathing bukan bagian dari jawaban untuk pertanyaan Anda.

Terima kasih kepada @BrianLegg untuk menunjukkan bahwa ini harus menggunakan sintaks tampilan Razor baru. Contoh telah diperbarui.

Meminjam dari jawaban Patrick, saya menemukan bahwa saya harus melakukan ini:

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

untuk menghindari memanggil metode posting form.

Panggil saya dengan sederhana, tetapi saya hanya melakukannya:

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

Dan Anda hanya merawat sorotan hyperlink. Pengguna kami menyukainya :)

Menggunakan bootstrap, ini adalah pendekatan terpendek dan terbersih untuk membuat tautan ke tindakan pengontrol yang muncul sebagai tombol dinamis:

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

Atau menggunakan bantuan Html:

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

Cukup sederhana:

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

Sebuah jawaban yang terlambat tetapi ini adalah bagaimana saya membuat ActionLink saya menjadi sebuah tombol. Kami menggunakan Bootstrap di proyek kami karena membuatnya nyaman. Sudahlah, @T karena satu-satunya penerjemah yang kami gunakan.

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

Di atas memberikan tautan seperti ini dan terlihat seperti gambar di bawah ini:

localhost:XXXXX/Firms/AddAffiliation/F0500

Menurut saya:

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

}

Semoga ini bisa membantu seseorang

jika Anda tidak ingin menggunakan tautan, gunakan tombol. Anda dapat menambahkan gambar ke tombol juga:

<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" melakukan tindakan Anda alih-alih mengirimkan formulir.

Anda tidak dapat melakukan ini dengan Html.ActionLink. Anda harus menggunakan Url.RouteUrldan menggunakan URL untuk membangun elemen yang Anda inginkan.

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

Cara mudah untuk membuat Html.ActionLink Anda menjadi sebuah tombol (selama Anda memasang BootStrap - yang mungkin Anda miliki) adalah seperti ini:

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

Bahkan tanggapan kemudian, tetapi saya hanya mengalami masalah yang sama dan akhirnya menulis sendiri gambar saya HtmlHelper ekstensi .

Anda dapat menemukan penerapannya di blog saya di tautan di atas.

Baru ditambahkan jika seseorang memburu suatu implementasi.

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

Untuk menampilkan ikon dengan tautan

Lakukan apa yang dikatakan Mehrdad - atau gunakan penolong url dari HtmlHelpermetode ekstensi seperti dijelaskan Stephen Walther di sini dan buat metode ekstensi Anda sendiri yang dapat digunakan untuk merender semua tautan Anda.

Maka akan mudah untuk merender semua tautan sebagai tombol / jangkar atau mana pun yang Anda suka - dan, yang paling penting, Anda dapat berubah pikiran nanti ketika Anda mengetahui bahwa Anda sebenarnya lebih memilih cara lain untuk membuat tautan Anda.

Anda dapat membuat metode ekstensi sendiri,
lihat implementasi saya

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

kemudian gunakan dalam tampilan Anda lihat panggilan saya

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

Untuk Material Design Lite dan 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?');" />
    }

Tampaknya ada banyak solusi tentang cara membuat tautan yang ditampilkan sebagai gambar, tetapi tidak ada yang membuatnya tampak sebagai tombol.

Hanya ada cara bagus yang saya temukan untuk melakukan ini. Agak aneh, tapi berhasil.

Yang harus Anda lakukan adalah membuat tombol dan tautan tindakan terpisah. Buat tautan tindakan tidak terlihat menggunakan css. Ketika Anda mengklik tombol, itu bisa memunculkan event klik pada tautan tindakan.

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

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

Mungkin ada rasa sakit di pantat untuk melakukan ini setiap kali Anda menambahkan tautan yang perlu terlihat seperti tombol, tetapi itu mencapai hasil yang diinginkan.

gunakan FORMACTION

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

Baru saja menemukan ekstensi ini untuk melakukannya - sederhana dan efektif.

Cara saya melakukannya adalah memiliki actionLink dan gambar secara terpisah. Atur gambar actionlink sebagai tersembunyi dan kemudian tambahkan panggilan pemicu jQuery. Ini lebih merupakan solusi.

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

Contoh pemicu:

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

Url.Action()akan memberi Anda URL telanjang untuk sebagian besar kelebihan Html.ActionLink, tapi saya pikir URL-from-lambdafungsionalitas hanya tersedia Html.ActionLinksejauh ini. Semoga mereka akan menambahkan kelebihan serupa Url.Actiondi beberapa titik.

Ini adalah bagaimana saya melakukannya tanpa skrip:

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

Sama, tetapi dengan dialog parameter dan konfirmasi:

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