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

Question

ASP.NET MVC の最新 (RC1) リリースで、Html.ActionLink をリンクではなくボタンまたはイメージとして表示するにはどうすればよいですか?

score 356 · Accepted Answer

次のように Url.Action() と Url.Content() を使用するのが好きです。

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

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

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

score 334 · Accepted Answer

遅い応答ですが、シンプルに保ち、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 */
}

score 96 · Accepted Answer

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

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

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

score 51 · Accepted Answer

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

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

そして、ハイパーリンクのハイライトを処理するだけです。私たちのユーザーはそれを気に入っています:)

score 16 · Accepted Answer

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

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

score 15 · Accepted Answer

ただ単に：

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

score 12 · Accepted Answer

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

score 9 · Accepted Answer

9

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

于 2012-03-05T14:04:29.387 に答える

score 8 · Accepted Answer

さらに後で応答しましたが、同様の問題が発生し、独自の画像リンクHtmlHelper拡張機能を作成することになりました。

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

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

score 5 · Accepted Answer

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

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

score 4 · Accepted Answer

Mehrdad の言うことを実行するか、 HtmlHelperStephen Walther がここで説明しているような拡張メソッドの url ヘルパーを使用して、すべてのリンクをレンダリングするために使用できる独自の拡張メソッドを作成します。

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

score 3 · Accepted Answer

独自の拡張メソッド
を作成して、私の実装を見てください。

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
                    )

score 1 · Accepted Answer

フォーマクションを使用

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

score 1 · Accepted Answer

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

score 1 · Accepted Answer

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

これを行うために私が見つけた唯一の良い方法があります。少しハックですが、動作します。

ボタンと別のアクションリンクを作成する必要があります。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();
 }

ボタンのように見える必要があるリンクを追加するたびにこれを行うのは面倒かもしれませんが、目的の結果が得られます.

score 0 · Accepted Answer

これは、スクリプトを作成せずに行った方法です。

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

score 0 · Accepted Answer

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

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

トリガーの例:

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

score 0 · Accepted Answer

Url.Action()のほとんどのオーバーロードの裸の URL を取得しますが、機能はこれまでのところしか利用できないHtml.ActionLinkと思います。うまくいけば、彼らはある時点で同様のオーバーロードを追加するでしょう.URL-from-lambdaHtml.ActionLinkUrl.Action

score 0 · Accepted Answer

0

シンプルで効果的なこの拡張機能を見つけました。

于 2012-01-06T12:34:18.377 に答える

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

23 に答える 23

Related

Reference