web-dev-qa-db-ja.com

Twitterで@ html.actionlink内にHTMLを表示Bootstrap

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

How button appers

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

asp.netasp.net-mvcasp.net-mvc-3twitter-bootstrap
41
Mark

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

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

51
Jonathan Wood

私は同じ問題を扱っていましたが、Ajaxボタンを作成していたので、ヘルパーを使い続けたいと思いました。

私はこれらの2つのヘルパーメソッドになりました。各ヘルパーに1つです。

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」を使用できます。

16
markus101
@Html.ActionLink(" New", "Create", "", new { @class="icon"} )

CSSスタイルの場合：

.icon:before{
    font-family: FontAwesome;
    content: "\f055";
}
4
Lucas Gabriel

TwitterBootstrapMVC を使用します。

それはインテリセンスで動作し、流syntaxな構文を可能にし、あなたはそれでこのような何かを書くことができます：

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

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

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

免責事項：私はTwitterBootstrapMVCの著者です

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

4
Dmitry

-Step Solution：

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

。そして必要なときに簡単な呼び出し

@: <li class="btn btn-mini btn-inverse"> @Html.ActionButton(lLink.LinkText, lLink.ActionName, lLink.ControllerName, lLink.IconClass)</li>
4
Rodolpho Brock
<a href="@Url.Action("Index","Employee")" class="btn btn-primary">Index</a>
3
Sraban75

@ Html.ActionLink（ "Link Title"、 "ActionName"、 "ControllerName"、{.id = Model.id}で新規作成、{。class = Html.Raw（ "btn btn-primary btn-で新規作成mini "）}）

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

2
Rob Pemberton

ASP.Netユーザーの場合、これは私にとってどのように機能したかです。

<%: Html.ActionLink("Cancel", "Index", "Catalog_Users", new { @class = "btn btn-primary" })%>

表示されるテキストは「キャンセル」です。 ActionResultはIndexになり、Catalog_Usersはコントローラーになります。

1
G Jeny Ramirez

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

<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と同じパワーを提供します。下の画像を参照してください（上のボタンはまさにその使用方法であり、下のボタンは問題の解決策です。

using html code in MVC Html.Action function

1
Gabriel Ojomu

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

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

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

@Html.ActionLink("Cancel", "Index", new { param1 = ViewBag.param1, input = "activity" }, new { @class = "btn" })
0
trees_are_great