顯示HTML與Twitter的引導

我使用Twitter的引導，並試圖讓我的鏈接ASP.Net MVC好看。顯示HTML與Twitter的引導

然而，< I級= ...在下面的鏈接，是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級= ...爲html，使按鈕顯示是否正確？

來源

2012-05-03 Mark

而不是使用@Html.ActionLink()的，只寫了自己的<a>標籤。您可以使用@Url.Action()來獲取HREF屬性的操作的URL。

的@Html助手都不錯，但他們不會總是提供您需要的靈活性。

來源

2012-05-03 10:36:43

我正在處理同樣的問題，但希望使用輔助保持，因爲我是做一個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())); 
}

只是把他們在項目中的靜態類，編譯，你應該看到它們（您可能需要一個使用添加聲明在您的頁面上）。

當使用助手，您可以使用「圖標加」，甚至「圖標加號圖標白」爲圖標的字符串。

來源

2012-05-03 15:52:33 markus101

肯定這個答案應該被標記爲最好的一個。 – krypru

@ Html.ActionLink（「Link Title」，「ActionName」，「ControllerName」，New with {.id = Model.id}，New With {.class = Html.Raw（「btn btn-primary btn 「}}）

此HTML.AcionLink重載允許您將屬性添加到呈現的html - 請記住在此重載中爲所需參數傳遞null/nothing。

來源

2012-05-08 12:15:32

這不會影響顯示的鏈接，這是問題是關於什麼的文本。 –

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-18 14:49:40

這是矯枉過正。 – Apollo

使用TwitterBootstrapMVC。

它的工作原理與智能感知，允許流暢的語法，你可以寫這樣的事情吧：

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

參數true在IconPrepend是白色的圖標類型。

此外，它有一個很多非常有用的工具。

免責聲明：我TwitterBootstrapMVC筆者

使用這個庫的自舉3的不是免費的。

來源

2013-07-08 04:58:07 Dmitry

+10

僅供參考，TwitterBootstrapMVC不再免費使用引導3開發人員，因爲他們現在收取許可費，如果你是一個個人或機構開發者。 – CokoBWare

我只能建議不要使用HTML輔助不惜一切只是原始的Jquery這意味着100％的Flexi bility ... – Elisabeth

對於任何ASP.NET用戶這是怎樣的工作對我來說：

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

所顯示的文本將是：取消。 ActionResult將是Index並且Catalog_Users是控制器。

來源

2014-05-26 20:38:53

我喜歡G耶尼雷米雷斯的答案。我只是想對此進行一些擴展。使用四個argumnent actionlink來包含課程非常重要。所以，如果你只是想重定向到相同的控制器，但不同的動作，這是：

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

或者，如果你想重定向到同一個控制器的一些參數：

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

來源

2014-07-10 09:15:32 Sam

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

在CSS樣式：

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

來源

2015-03-05 13:10:22

我不得不添加以下內容來完成這項工作。 @字體面{ FONT-FAMILY：FontAwesome; SRC：網址（../字體/ fontawesome-webfont.woff2）; } – sonicbabbler

儘管這個問題是舊的，但我還是雖然提供了一個簡單的解決方案的。起初，我認爲實現這一目標非常困難，但它非常簡單。

<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相同。見下圖（頂部的按鈕正是你使用它的方式，而底部的按鈕是解決問題的辦法。

來源

2015-10-16 18:17:05

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

來源

2016-01-15 20:13:11 Sraban75

你可以擴展和證明你的答案？爲什麼這是一個很好的答案？ –

顯示HTML與Twitter的引導

回答

相關問題