web-dev-qa-db-ja.com

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

ASP.NET MVCの最新（RC1）リリースで、Html.ActionLinkをリンクではなくボタンまたは画像としてレンダリングする方法を教えてください。

asp.net-mvcactionlink
314
Ryan Lundy

応答が遅くなりますが、単純にしてCSSクラスをhtmlAttributesオブジェクトに適用するだけで済みます。

<%= 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 */
}
321
Mark

私はこのようにUrl.Action（）とUrl.Content（）を使うのが好きです。

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

厳密に言えば、Url.Contentはパスするために必要なだけで、実際にはあなたの質問に対する答えの一部ではありません。

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

342
jslatts

パトリックの答えから借りて、私はこれをしなければならなかったことがわかりました：

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

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

91
DevDave

私は単純化して呼んでください、しかし私はただします：

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

そして、あなたはただハイパーリンクハイライトの世話をします。私たちのユーザーはそれを気に入っています:)

51
agAus

遅い答えですが、これが私のActionLinkをボタンにする方法です。プロジェクトではBootstrapを使用しているので便利です。私たちが使っている唯一の翻訳者なので、@ Tは気にしないでください。

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

上記のようにリンクを張ると、下の図のようになります。

localhost:XXXXX/Firms/AddAffiliation/F0500

picture demonstrating button with bootstrap

私からしてみれば：

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

}

これが誰かに役立つことを願っています

15
Emperor 2052

ただ単に：

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

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

<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" フォームを送信する代わりにアクションを実行します。

14
Amir Chatrbahr

Html.ActionLinkではこれができません。あなたはUrl.RouteUrlを使い、あなたが欲しい要素を作るためにURLを使うべきです。

12
Mehrdad Afshari

ブートストラップを使用すると、これは動的ボタンとして表示されるコントローラアクションへのリンクを作成するための最短かつ最もわかりやすい方法です。

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

またはHTMLヘルパーを使用するには：

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

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

9
Jiri HWeb Horalek

それ以降の対応でも、私は同様の問題に遭遇し、私自身の Image link HtmlHelperエクステンション を書いてしまいました。

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

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

8
Mirko

あなたのHtml.ActionLinkをボタンにする簡単な方法は（BootStrapが接続されている限り - おそらくあなたは持っているでしょう）：

@Html.ActionLink("Button text", "ActionName", "ControllerName", new { @class = "btn btn-primary" })
6
haugan
<li><a href="@Url.Action(  "View", "Controller" )"><i class='fa fa-user'></i><span>Users View</span></a></li>

リンク付きのアイコンを表示する

5
Andrew Day

Mehrdadが言っていることをするか、またはStephen Waltherが here と記述したようなHtmlHelper拡張メソッドからurlヘルパーを使用して、すべてのリンクをレンダリングするために使用できる独自の拡張メソッドを作成します。

そうすれば、すべてのリンクをボタン/アンカーとして、またはどちらを好むとしても簡単にレンダリングできます。そして最も重要なことは、リンクを作成する他の方法を実際に好むことがわかったら、後で考えを変えることができます。

4
mookid8000

あなたはあなた自身の拡張メソッドを作成することができます
私の実装を見てください

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

それからあなたの見解でそれを使ってください私の電話を見てください

 @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
                    )
3
Basheer AL-MOMANI
@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?');" />
    }
1
user477864

画像として表示されるリンクを作成する方法には多くの解決策があるようですが、ボタンに見えるようにするものはありません。

私がこれを行うことを発見したのは良い方法だけです。ちょっとハッキーだけど、うまくいく。

あなたがしなければならないのはボタンと別のアクションリンクを作成することです。 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();
 }

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

1
bsayegh

fORMACTIONを使う

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

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

0
Dhanasekar

たった今 この拡張 それをするために - シンプルで効果的。

0
Shaul Behr

材料設計LiteおよびMVCの場合：

<a class="mdl-navigation__link" href='@Url.Action("MyAction", "MyController")'>Link Name</a>
0
Rody Davis

私がしたやり方は、actionLinkと画像を別々に持つことです。 actionlink画像を非表示に設定してから、jQueryトリガー呼び出しを追加しました。これは回避策です。

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

トリガーの例：

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

これは私がスクリプトなしでやった方法です：

@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>
}
0
Jevgenij Martynenko