Html.ActionLink bağlantı değil, düğme veya resim olarak

ASP.NET MVC'nin en son (RC1) sürümünde, Html.ActionLink'in bağlantı yerine düğme veya görüntü olarak görüntülenmesini nasıl sağlayabilirim?

Geç yanıt, ancak basit tutabilir ve htmlAttributes nesnesine bir CSS sınıfı uygulayabilirsiniz.

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

ve sonra stil sayfanızda bir sınıf oluşturun

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

Bu şekilde Url.Action () ve Url.Content () kullanmayı seviyorum:

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

Açıkçası, Url.Content sadece yol için gereklidir, sorunuzun cevabının gerçek bir parçası değildir.

@BrianLegg'e bunun yeni Razor görünüm sözdizimini kullanması gerektiğine işaret ettiği için teşekkürler. Örnek buna göre güncellendi.

Patrick'in cevabından ödünç alarak bunu yapmak zorunda olduğumu fark ettim:

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

formun post yöntemini çağırmamak için.

Bana basit deyin, ama ben sadece:

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

Ve sadece köprü vurgularına dikkat edin. Kullanıcılarımız buna bayılıyor :)

Bootstrap kullanmak, dinamik bir düğme olarak görünen bir denetleyici eylemine bağlantı oluşturmak için en kısa ve en temiz yaklaşımdır:

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

Veya Html yardımcılarını kullanmak için:

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

Basitçe :

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

Geç bir cevap ama bu şekilde ActionLink'imi bir düğmeye çeviriyorum. Projemizde Bootstrap'i uygun olduğu için kullanıyoruz. @T'yi boş verin çünkü kullandığımız tek çevirmen.

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

Yukarıdaki gibi bir bağlantı verir ve aşağıdaki resim gibi görünüyor:

localhost:XXXXX/Firms/AddAffiliation/F0500

Bana göre:

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

}

Umarım bu birine yardımcı olur

bağlantı kullanmak istemiyorsanız düğmesini kullanın. düğmeye de resim ekleyebilirsiniz:

<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" form göndermek yerine eyleminizi gerçekleştirir.

Bunu ile yapamazsın Html.ActionLink. İstediğiniz Url.RouteUrlöğeyi oluşturmak için URL'yi kullanmalı ve kullanmalısınız.

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

Html.ActionLink'inizi bir düğmeye dönüştürmenin basit bir yolu (BootStrap'ı taktığınız sürece - muhtemelen sahip olduğunuz gibi) şöyle:

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

Daha sonra yanıt, ama ben sadece benzer bir sorunla karşılaştı ve kendi Image link HtmlHelper uzantısını yazdım .

Yukarıdaki bağlantıda blogumda bir uygulama bulabilirsiniz.

Birisi bir uygulamayı avlamak durumunda ekledi.

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

Bağlantı ile bir simge görüntülemek için

Mehrdad'ın söylediklerini yapın - veya url yardımcısını HtmlHelperStephen Walther'ın burada açıkladığı gibi bir uzantı yönteminden kullanın tüm bağlantılarınızı oluşturmak için kullanılabilecek kendi uzantı yönteminizi yapın.

Daha sonra, tüm bağlantıları düğme / çapa veya hangisini tercih ederseniz edin kolay olacaktır - ve en önemlisi, bağlantılarınızı oluşturmanın başka bir yolunu tercih ettiğinizi öğrendiğinizde daha sonra fikrinizi değiştirebilirsiniz.

kendi uzantı yönteminizi oluşturabilirsiniz
benim uygulama bakmak

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

sonra görüşünüzü kullanın görüşme bakmak

 @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 ve MVC için:

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

Görüntü olarak görüntülenen bir bağlantının nasıl oluşturulacağına dair birçok çözüm var gibi görünüyor, ancak hiçbiri bir düğme gibi görünmüyor.

Bunu yapmanın iyi bir yolu var. Biraz hacky, ama işe yarıyor.

Yapmanız gereken bir düğme ve ayrı bir eylem bağlantısı oluşturmaktır. Css kullanarak eylem bağlantısını görünmez yapın. Düğmeye tıkladığınızda, eylem bağlantısının tıklama olayını tetikleyebilir.

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

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

Düğme gibi görünmesi gereken bir bağlantı eklediğiniz her seferinde bunu yapmak bir acı olabilir, ancak istenen sonucu elde eder.

FORMACTION kullanın

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

Sadece bu uzantıyı yapmak için buldum - basit ve etkili.

Bunu yapmamın yolu, actionLink ve görüntüyü ayrı ayrı elde etmektir. Actionlink görüntüsünü gizli olarak ayarlayın ve ardından bir jQuery tetikleyici çağrısı eklendi. Bu daha çok bir çözüm.

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

Tetikleyici örneği:

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

Url.Action()çoğu aşırı yükleme için çıplak URL alacak Html.ActionLink, ancak URL-from-lambdaişlevselliğin sadece Html.ActionLinkşu ana kadar kullanılabilir olduğunu düşünüyorum . Umarım bir Url.Actionnoktada benzer bir aşırı yük eklerler .

Ben bunu komut dosyası olmadan yaptım:

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

Aynı, ancak parametre ve onay iletişim kutusu ile:

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