Hiển thị html trong @ html.actionlink với Twitter Bootstrap

Question

Tôi đang sử dụng Twitter Bootstrap và cố gắng tạo liên kết ASP.Net MVC của tôi trông đẹp mắt.

Tuy nhiên, lớp < i = ... trong liên kết dưới đây, được mã hóa html, chứ không phải được gửi dưới dạng HTML cho trình duyệt:

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

Có cách nào của giữ < i class = ... dưới dạng html, để nút hiển thị chính xác?

Answer 1

Thay vì sử dụng @Html.ActionLink(), chỉ cần tự mình viết <a> thẻ. Bạn có thể sử dụng @Url.Action() để nhận URL của một hành động cho thuộc tính HREF của bạn.

Người giúp việc @Html thật tuyệt, nhưng họ sẽ không luôn cung cấp sự linh hoạt bạn cần.

Answer 2

Tôi đã xử lý cùng một vấn đề nhưng muốn tiếp tục sử dụng trình trợ giúp, vì tôi đã tạo nút Ajax.

tôi đã kết thúc với hai phương pháp helper, một cho mỗi helper:

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

Chỉ cần ném chúng trong một lớp học tĩnh trong dự án của bạn, biên dịch và bạn sẽ thấy họ (Bạn có thể cần thêm một bằng tuyên bố trên trang của bạn).

Khi sử dụng trình trợ giúp, bạn có thể sử dụng "biểu tượng cộng" hoặc thậm chí "biểu tượng-dấu cộng biểu tượng-trắng" cho chuỗi biểu tượng.

Answer 3

@ Html.ActionLink ("Tiêu đề liên kết", "Tên hành động", "Tên bộ điều khiển", Mới có {.id = Model.id}, Mới Với {.class = Html.Raw ("btn btn-primary btn -mini ")})

Quá tải HTML.AcionLink này cho phép bạn thêm thuộc tính vào html được hiển thị - hãy nhớ truyền null/không có gì cho các tham số cần thiết trong quá tải này.

Answer 4

3-Bước Giải pháp:

1. Tạo lớp HtmlExtensions này:

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. Thêm này sử dụng tại Xem bạn

@using Extensions 

3. Và cuộc gọi đơn giản khi bạn cần

@: <li class="btn btn-mini btn-inverse"> @Html.ActionButton(lLink.LinkText, lLink.ActionName, lLink.ControllerName, lLink.IconClass)</li> 

Answer 5

Sử dụng TwitterBootstrapMVC.

Nó hoạt động với IntelliSense, cho phép cú pháp thông thạo và bạn có thể viết một cái gì đó như thế này với nó:

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

Parameter true trong IconPrepend là cho loại hình biểu tượng màu trắng.

Bên cạnh đó, nó có rất nhiều người trợ giúp rất hữu ích.

---

Disclaimer: Tôi là tác giả của TwitterBootstrapMVC

Sử dụng thư viện này cho Bootstrap 3 là không được tự do.

Answer 6

Đối với bất kỳ người sử dụng ASP.NET đây là cách nó làm việc cho tôi:

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

Văn bản hiển thị sẽ là: Cancel. ActionResult sẽ là Index và Catalog_Users là bộ điều khiển.

Answer 7

Tôi thích câu trả lời của G Jeny Remirez. Tôi chỉ muốn mở rộng điều này một chút. Điều quan trọng là bạn sử dụng một liên kết hành động bốn argumnent để bao gồm các lớp học. Vì vậy, nếu bạn chỉ muốn chuyển hướng đến bộ điều khiển tương tự, nhưng một hành động khác nhau, đó là:

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

Hoặc nếu bạn muốn chuyển hướng đến bộ điều khiển cùng với một số thông số:

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

Answer 8

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

Theo kiểu css:

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

Answer 9

Mặc dù câu hỏi này cũ nhưng tôi vẫn cung cấp giải pháp đơn giản hơn. Lúc đầu, tôi nghĩ rất khó để đạt được điều này nhưng nó rất đơn giản.

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

@ Url.Action() cung cấp sức mạnh tương tự như của Html.ActionLink. Xem bên dưới hình ảnh (nút trên cùng chính là cách bạn đang sử dụng nó, trong khi nút dưới sự là giải pháp cho vấn đề.

Answer 10

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