41

私は Twitter Bootstrap を使用しており、リンクの ASP.Net MVC の見栄えを良くしようとしています。

ただし、以下のリンクの <i class=... は、html としてブラウザーに送信されるのではなく、html エンコードされています。

    @Html.ActionLink("<i class='icon-user icon-white'></i> Create New", "Create", "", New With {Key .class="btn btn-primary"} )

ボタンの表示方法

ボタンが正しく表示されるように、<i class=... を html として保持する方法はありますか?

4

10 に答える 10

51

を使用する代わりに、自分でタグ@Html.ActionLink()を書き出すだけです。<a>を使用@Url.Action()して、HREF属性のアクションのURLを取得できます。

ヘルパーは素晴らしいですが、@Html必要な柔軟性を常に提供するとは限りません。

于 2012-05-03T10:36:43.807 に答える
16

私は同じ問題に取り組んでいましたが、Ajax ボタンを作成していたため、ヘルパーを使い続けたいと考えていました。

最終的に、ヘルパーごとに 1 つずつ、次の 2 つのヘルパー メソッドが作成されました。

public static MvcHtmlString IconActionLink(this AjaxHelper helper, string icon, string text, string actionName, string controllerName, object routeValues, AjaxOptions ajaxOptions, object htmlAttributes)
{
    var builder = new TagBuilder("i");
    builder.MergeAttribute("class", icon);
    var link = helper.ActionLink("[replaceme] " + text, actionName, controllerName, routeValues, ajaxOptions, htmlAttributes).ToHtmlString();
    return new MvcHtmlString(link.Replace("[replaceme]", builder.ToString()));
}

public static MvcHtmlString IconActionLink(this HtmlHelper helper, string icon, string text, string actionName, string controllerName, object routeValues, object htmlAttributes)
{
    var builder = new TagBuilder("i");
    builder.MergeAttribute("class", icon);
    var link = helper.ActionLink("[replaceme] " + text, actionName, controllerName, routeValues, htmlAttributes).ToHtmlString();
    return new MvcHtmlString(link.Replace("[replaceme]", builder.ToString()));
}

プロジェクトの静的クラスにそれらを投げてコンパイルすると、それらが表示されるはずです (ページに using ステートメントを追加する必要がある場合があります)。

ヘルパーを使用する場合、アイコン文字列に「icon-plus」または「icon-plus icon-white」を使用できます。

于 2012-05-03T15:52:33.097 に答える
4

3 ステップのソリューション:

1. この HtmlExtensions クラスを作成します。

using System.Web.Mvc;

public static class HtmlExtensions
{
    public static MvcHtmlString ActionButton(this HtmlHelper html, string linkText, string action, string controllerName, string iconClass)
    {
        //<a href="/@lLink.ControllerName/@lLink.ActionName" title="@lLink.LinkText"><i class="@lLink.IconClass"></i><span class="">@lLink.LinkText</span></a>
        var lURL = new UrlHelper(html.ViewContext.RequestContext);

        // build the <span class="">@lLink.LinkText</span> tag
        var lSpanBuilder = new TagBuilder("span");
        lSpanBuilder.MergeAttribute("class", "");
        lSpanBuilder.SetInnerText(linkText);
        string lSpanHtml = lSpanBuilder.ToString(TagRenderMode.Normal);

        // build the <i class="@lLink.IconClass"></i> tag
        var lIconBuilder = new TagBuilder("i");
        lIconBuilder.MergeAttribute("class", iconClass);
        string lIconHtml = lIconBuilder.ToString(TagRenderMode.Normal);

        // build the <a href="@lLink.ControllerName/@lLink.ActionName" title="@lLink.LinkText">...</a> tag
        var lAnchorBuilder = new TagBuilder("a");
        lAnchorBuilder.MergeAttribute("href", lURL.Action(action, controllerName));
        lAnchorBuilder.InnerHtml = lIconHtml + lSpanHtml; // include the <i> and <span> tags inside
        string lAnchorHtml = lAnchorBuilder.ToString(TagRenderMode.Normal);

        return MvcHtmlString.Create(lAnchorHtml);
    }
}

2.ビューで使用してこれを追加します 

@using Extensions

3. 必要なときに電話をかけるだけ

@: <li class="btn btn-mini btn-inverse"> @Html.ActionButton(lLink.LinkText, lLink.ActionName, lLink.ControllerName, lLink.IconClass)</li>
于 2012-09-18T14:49:40.123 に答える
4

TwitterBootstrapMVCを使用します。

インテリセンスで動作し、流暢な構文が可能で、次のようなものを書くことができます:

@(Html.Bootstrap().ActionLinkButton("Create New", "Create")
    .IconPrepend(Icons.user, true)
    .Style(ButtonStyle.Primary))

のパラメーターtrueはIconPrepend、白いアイコン タイプ用です。

さらに、非常に便利なヘルパーがたくさんあります。

免責事項: 私は TwitterBootstrapMVC の作成者です

Bootstrap 3 でのこのライブラリの使用は無料ではありません。

于 2013-07-08T04:58:07.953 に答える
2

@Html.ActionLink("Link Title", "ActionName", "ControllerName", New With {.id = Model.id }, New With {.class = Html.Raw("btn btn-primary btn-mini")} )

この HTML.AcionLink オーバーロードを使用すると、レンダリングされた html に属性を追加できます。このオーバーロードでは、必要なパラメーターに null または何も渡さないことを忘れないでください。

于 2012-05-08T12:15:32.373 に答える
1

この質問は古いですが、私はまだより簡単な解決策を提供することを考えています. 最初は、これを達成するのはとても難しいと思っていましたが、とても簡単です。

<a href="@Url.Action("ActionMethod", "Controller",)" class="btn btn-primary"><i class="fa fa-fw fa-bar-chart-o"></i> Chart</a>

@Url.Action() は、Html.ActionLink と同じ力を与えます。下の画像を参照してください（上のボタンはまさにあなたが使用している方法であり、下のボタンは問題の解決策です.

MVC Html.Action 関数で html コードを使用する

于 2015-10-16T18:17:05.907 に答える
0

G Jeny Remirezの答えが好きです。これを少しだけ広げたいと思います。クラスを含めるには、4 つの引数アクションリンクを使用することが重要です。したがって、同じコントローラーにリダイレクトしたいだけで、別のアクションが必要な場合は、次のようになります。

@Html.ActionLink("cancel", "Index", null, new { @class = "btn" })

または、いくつかのパラメーターを使用して同じコントローラーにリダイレクトする場合:

@Html.ActionLink("Cancel", "Index", new { param1 = ViewBag.param1, input = "activity" }, new { @class = "btn" })
于 2014-07-10T09:15:32.430 に答える