Отображать html внутри @html.actionlink с помощью Twitter Bootstrap

Ответ 1

Вместо использования @Html.ActionLink() просто напишите тег <a> самостоятельно. Вы можете использовать @Url.Action(), чтобы получить URL-адрес действия для вашего атрибута HREF.

Помощники @Html хороши, но они не всегда будут обеспечивать необходимую гибкость.

Ответ 2

Я имел дело с одной и той же проблемой, но хотел продолжать использовать помощника, потому что я делал кнопку Ajax.

Я закончил с этими двумя вспомогательными методами, по одному для каждого помощника:

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()));
}

Просто бросьте их в статическом классе в своем проекте, скомпилируйте, и вы должны увидеть их (вам может потребоваться добавить инструкцию на вашей странице).

При использовании помощника вы можете использовать значок "значок плюс" или даже значок "значок-плюс значок-белый" для строки значков.

Ответ 3

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>

Ответ 4

Используйте TwitterBootstrapMVC.

Он работает с intellisense, позволяет свободно говорить о синтаксисе, и вы можете написать что-то вроде этого:

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

Параметр true в IconPrepend предназначен для белого значка.

Кроме того, он получил гораздо более полезные помощники.

Отказ от ответственности: я являюсь автором TwitterBootstrapMVC

Использование этой библиотеки для Bootstrap 3 не является бесплатным.

Ответ 5

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

В стиле css:

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

Ответ 6

<a href="@Url.Action("Index","Employee")" class="btn btn-primary">Index</a>

Ответ 7

@Html.ActionLink( "Название ссылки", "Имя_экземпляра", "Имя контроллера", "Создать с помощью". {.id = Model.id}, Создать с помощью {.class= Html.Raw( "btn btn-primary БТН-мини" )})

Эта перегрузка HTML.AcionLink позволяет добавить атрибут к отображаемому html - не забудьте передать null/nothing для необходимых параметров в этой перегрузке.

Ответ 8

Для любого пользователя ASP.NET это работает для меня:

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

Показанный текст будет: Отмена. ActionResult будет Index и Catalog_Users является контроллером.

Ответ 9

Хотя этот вопрос старый, но я все же предлагаю более простое решение. Сначала я думал, что это так сложно достичь, но это так просто.

<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. См. Ниже изображение (верхняя кнопка - это именно то, как вы ее используете, а нижняя кнопка - это решение проблемы.

Ответ 10

Мне нравится ответ G Jeny Remirez. Я просто хочу немного расшириться. Важно, чтобы вы использовали четыре аргумента action action для включения класса. Итак, если вы просто хотите перенаправить на тот же контроллер, но другое действие, это:

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

Или если вы хотите перенаправить на тот же контроллер с некоторыми параметрами:

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