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

https://stackoverflow.com/questions/596444

09-09-2019
|

質問

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

解決

後期応答がありますが、単純な、それを維持し、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 */
}

他のヒント

私はこのようなUrl.Action（）とUrl.Content（）を使用したい：

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

厳密Url.Contentのみパス化のために必要とされ、話すことは本当にあなたの質問への答えの一部ではありません。

これは新しいカミソリビューの構文を使用する必要があることを指摘し@BrianLeggに

ありがとう。例には、それに応じて更新されています。

パトリックの答えからの借入が、私はこれをしなければならなかったことが判明します：

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

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

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

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

そして、あなただけのハイパーリンクのハイライトの世話をします。当社のユーザーはそれを愛する：）

ただ単にます：

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

後半の答えが、これは私がボタンに私の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>

}

が、これは誰か。

お役に立てば幸いです

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

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

type="ボタン" フォームを送信する代わりにアクションを実行します。

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

これは動的ボタンとして表示コントローラのアクションへのリンクを作成するために最短とクリーンなアプローチであるブートストラップの使用

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

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

でも、後で応答が、私はちょうど=同様の問題に遭遇し、私自身の<のhref =「http://blogs.aspiant.com/Mirko/2009/06/15/ASPNETMVCStronglyTypedActionLinkWithImages.aspx」のrelを書いてしまいました"noreferrer">画像リンクHtmlHelperの拡張に。

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

ただ、誰かが実装を追い詰めるされた場合に追加しました。

（限り、あなたはブートストラップに差し込まれていて - あなたはおそらく持っている）ボタンにあなたのHtml.ActionLinkを作る行う簡単な方法は、このようなものです。

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

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

リンクでアイコンを表示するには、

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

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

あなた自身の拡張メソッドを作成することができます

私の実装を見てとります

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
                    )

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

画像として表示するリンクを作成する方法についてのソリューションの多くが、ボタンに見えることなしがあるようです。

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

何をする必要がありすることはボタンを押して、別のアクション・リンクを作成しています。 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();
 }

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

FORMACTIONを使用する

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

ただ、見つかった<のhref = "http://dotnetdevdude.com/Blog/CommentView,guid,D1BC810E-CEE1-4A38-967E-AF7EB553831B.aspx#71a95cc2-ffe8-4a91-a238-efca693c25b8" のrel = "nofollowを「>この拡張機能は、それを行うにはを - シンプルで効果的な

。

私はそれを行っている方法は、ActionLinkのと別々にイメージを持っていることです。隠されたとしてActionLinkのイメージを設定します。その後、jQueryのトリガーの呼び出しを追加しました。これは、回避策の詳細です。

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

トリガ例：

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

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

これは、私は、スクリプトなしでそれをやった方法です。

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

材料設計ライトとMVCの場合：

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

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow