Html.ActionLinkはリンクではなくボタンまたは画像として

Question

最新の（RC1）リリースのASP.NET MVCでは、リンクの代わりにボタンまたはイメージとしてレンダリングするためにHtml.ActionLinkを取得するにはどうすればよいですか？

Answer 1

遅れても応答は簡単ですが、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 */ 
} 

Answer 2

Html.ActionLinkでこれを行うことはできません。 Url.RouteUrlを使用し、URLを使用して必要な要素を作成する必要があります。

Answer 3

Mehrdadの言う通り、またはHtmlHelperのような拡張メソッドのURLヘルパーを使用して、hereと記載し、すべてのリンクのレンダリングに使用できる独自の拡張メソッドを作成します。

それから、すべてのリンクをボタン/アンカーまたは好みのものとして簡単にレンダリングすることができます。また、実際にリンクを作成する方法が実際には好きであることがわかったときには、

Answer 4

でも、後で応じてクラスを作成しますが、私はちょうど同様の問題に遭遇したとImage link HtmlHelper extension自分自身を書いてしまいました。

私のブログでは、上のリンクでその実装を見つけることができます。

誰かが実装を捜している場合に備えて追加されました。

Answer 5

私はこのようなUrl.Action（）とUrl.Content（）を使用したい：厳密Url.Contentのみパス化のために必要とされ、話す

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

が本当にあなたの答えの一部ではありません質問。

新しいRazorビューの構文を使用する必要があることを指摘してくれた@BrianLeggに感謝します。例はそれに応じて更新されました。

Answer 6

Url.Action()はあなたのHtml.ActionLinkのほとんどのオーバーロードのために裸のURLを取得しますが、私はURL-from-lambda機能は、これまでHtml.ActionLinkを通じてのみ利用可能だと思います。うまくいけば、彼らはある時点でUrl.Actionに同様のオーバーロードを追加します。

Answer 7

は、単純な私を呼び出して、私はちょうど行います

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

そして、あなただけのハイパーリンクのハイライトの世話をします。私たちのユーザーはそれが大好きです:)

Answer 8

ちょうど見つけたthis extension - それは簡単で効果的です。

Answer 9

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

Answer 10

ただ単に：

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

Answer 11

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

Answer 12

私はそれを行っている方法は、ActionLinkのと別々にイメージを持っていることです。 アクションリンクイメージを非表示に設定して とし、jQueryトリガーコールを追加しました。これは回避策です。

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

トリガ例：パトリックの答えから

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

Answer 13

借入は、私はこれを行うために持っていたことが分かった：

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

は、フォームのPOSTメソッドを呼び出さないようにします。

Answer 14

イメージとして表示するリンクを作成する方法はたくさんありますが、ボタンとして表示されるものはありません。

私はこれを行うことが判明した良い方法があります。その少しハッキーですが、それは動作します。

ボタンと別のアクションリンクを作成するだけです。 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(); 
} 

は、それはあなたがボタンのように見える必要があるのリンクを追加し、このたびを行うにはお尻の痛みかもしれないが、それは、所望の結果を達成ありません。

Answer 15

これは遅い回答ですが、これが私のActionLinkをボタンにする方法です。ブートストラップを使っているので便利です。私たちが使用している唯一の翻訳者から@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> 

} 

・ホープこれは誰か

を支援します

Answer 16

リンクを使用したくない場合は、ボタンを使用してください。あなたにも、ボタンに画像を追加することができます。

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

タイプは、=「ボタン」はではなく、フォームを送信するあなたのアクションを実行します。

Answer 17

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

Answer 18

使用FORMACTION

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

Answer 19

は、これは私がスクリプトなしでそれをやった方法ですリンクしてアイコンを表示するには：

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

Answer 20

あなたはこれが最短とされ、ブートストラップの使用私のコール

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

Answer 21

を見て取り、あなたのビューでそれを使用

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

私の実装では、独自の拡張メソッド
テイク外観を作成することができますダイナミックボタンとして表示されるコントローラーアクションへのリンクを作成する最もクリーンな方法：

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

またはHTMLヘルパーを使用する：（限り、あなたはブートストラップに差し込まれているよう - あなたはおそらく持っている）ボタンにあなたのHtml.ActionLinkを作る行うに

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

Answer 22

簡単な方法は、このようなものです：

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