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として保持する方法はありますか?
@Html.ActionLink()
を使用する代わりに、自分で_<a>
_タグを書き出すだけです。 @Url.Action()
を使用して、HREF属性のアクションのURLを取得できます。
_@Html
_ヘルパーは素晴らしいですが、必要な柔軟性を常に提供するとは限りません。
私は同じ問題を扱っていましたが、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」を使用できます。
@Html.ActionLink(" New", "Create", "", new { @class="icon"} )
CSSスタイルの場合:
.icon:before{
font-family: FontAwesome;
content: "\f055";
}
TwitterBootstrapMVC を使用します。
それはインテリセンスで動作し、流syntaxな構文を可能にし、あなたはそれでこのような何かを書くことができます:
@(Html.Bootstrap().ActionLinkButton("Create New", "Create")
.IconPrepend(Icons.user, true)
.Style(ButtonStyle.Primary))
true
のパラメーターIconPrepend
は、白いアイコンタイプ用です。
それに、非常に便利なヘルパーがたくさんあります。
免責事項:私はTwitterBootstrapMVCの著者です
Bootstrap 3に対するこのライブラリの使用は無料ではありません。
-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>
<a href="@Url.Action("Index","Employee")" class="btn btn-primary">Index</a>
@ Html.ActionLink( "Link Title"、 "ActionName"、 "ControllerName"、{.id = Model.id}で新規作成、{。class = Html.Raw( "btn btn-primary btn-で新規作成mini ")})
このHTML.AcionLinkオーバーロードを使用すると、レンダリングされたhtmlに属性を追加できます。このオーバーロードで必要なパラメーターにnull/nothingを渡すことを忘れないでください。
ASP.Netユーザーの場合、これは私にとってどのように機能したかです。
<%: Html.ActionLink("Cancel", "Index", "Catalog_Users", new { @class = "btn btn-primary" })%>
表示されるテキストは「キャンセル」です。 ActionResultはIndexになり、Catalog_Usersはコントローラーになります。
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" })