将 HTML 放在 HTML.ActionLink ()中,加上无链接文本?

我有两个问题:

  1. 我想知道在 MVC 视图中使用 Html.ActionLink()时如何不显示链接文本(实际上,这是 Site.Master)。

没有一个不允许链接文本的重载版本,当我尝试只传入一个空的 string时,编译器告诉我它需要一个非空的字符串。

我该怎么补救?

  1. 我需要将 <span>标记放在锚标记中,但它不能与 Html.ActionLink();一起工作。我希望看到以下输出:

    跨文本

如何在 ASP.NET MVC 中将标记放在锚标记中?

181439 次浏览

只要使用 Url.Action而不是 Html.ActionLink:

<li id="home_nav"><a href="<%= Url.Action("ActionName") %>"><span>Span text</span></a></li>

您可以通过 Url.Action 呈现 URL,而不是使用 Html.ActionLink

<a href="<%= Url.Action("Index", "Home") %>"><span>Text</span></a>
<a href="@Url.Action("Index", "Home")"><span>Text</span></a>

你可以做一个空白的 url

<a href="<%= Url.Action("Index", "Home") %>"></a>
<a href="@Url.Action("Index", "Home")"></a>

自定义 HtmlHelper 扩展是另一种选择。参数字典是我自己的类型。您可以替换 RouteValueDictionary,但是必须以不同的方式构造它。

public static string ActionLinkSpan( this HtmlHelper helper, string linkText, string actionName, string controllerName, object htmlAttributes )
{
TagBuilder spanBuilder = new TagBuilder( "span" );
spanBuilder.InnerHtml = linkText;


return BuildNestedAnchor( spanBuilder.ToString(), string.Format( "/{0}/{1}", controllerName, actionName ), htmlAttributes );
}


private static string BuildNestedAnchor( string innerHtml, string url, object htmlAttributes )
{
TagBuilder anchorBuilder = new TagBuilder( "a" );
anchorBuilder.Attributes.Add( "href", url );
anchorBuilder.MergeAttributes( new ParameterDictionary( htmlAttributes ) );
anchorBuilder.InnerHtml = innerHtml;


return anchorBuilder.ToString();
}

这里是(低和肮脏)解决方案,以防你需要使用 ajax 或一些功能,你不能使用时,手动链接(使用标签) :

<%= Html.ActionLink("LinkTextToken", "ActionName", "ControllerName").ToHtmlString().Replace("LinkTextToken", "Refresh <span class='large sprite refresh'></span>")%>

你可以使用任何文本而不是“ LinkTextToken”,它只是在那里被替换,重要的是它不会出现在 actionlink 的其他任何地方。

我认为这可能是有用的,当使用 bootstrap 和一些图标:

<a class="btn btn-primary"
href="<%: Url.Action("Download File", "Download",
new { id = msg.Id, distributorId = msg.DistributorId }) %>">
Download
<span class="glyphicon glyphicon-paperclip"></span>
</a>

这将显示一个 A 标记,其中有一个到控制器的链接,上面有一个漂亮的曲别针图标来表示下载链接,并且 html 输出保持干净

很简单。

如果你想要一个象形文字图标和“愿望清单”之类的东西,

<span class="glyphicon-heart"></span> @Html.ActionLink("Wish List (0)", "Index", "Home")

这里是@tvanfoson 的回答的一个超级扩展。我受到了它的启发,决定把它做得更通用一些。

    public static MvcHtmlString NestedActionLink(this HtmlHelper htmlHelper, string linkText, string actionName,
string controllerName, object routeValues = null, object htmlAttributes = null,
RouteValueDictionary childElements = null)
{
var htmlAttributesDictionary = HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes);


if (childElements != null)
{
var urlHelper = new UrlHelper(htmlHelper.ViewContext.RequestContext);


var anchorTag = new TagBuilder("a");
anchorTag.MergeAttribute("href",
routeValues == null
? urlHelper.Action(actionName, controllerName)
: urlHelper.Action(actionName, controllerName, routeValues));
anchorTag.MergeAttributes(htmlAttributesDictionary);
TagBuilder childTag = null;


if (childElements != null)
{
foreach (var childElement in childElements)
{
childTag = new TagBuilder(childElement.Key.Split('|')[0]);
object elementAttributes;
childElements.TryGetValue(childElement.Key, out elementAttributes);


var attributes = HtmlHelper.AnonymousObjectToHtmlAttributes(elementAttributes);


foreach (var attribute in attributes)
{
switch (attribute.Key)
{
case "@class":
childTag.AddCssClass(attribute.Value.ToString());
break;
case "InnerText":
childTag.SetInnerText(attribute.Value.ToString());
break;
default:
childTag.MergeAttribute(attribute.Key, attribute.Value.ToString());
break;
}
}
childTag.ToString(TagRenderMode.SelfClosing);
if (childTag != null) anchorTag.InnerHtml += childTag.ToString();
}
}
return MvcHtmlString.Create(anchorTag.ToString(TagRenderMode.Normal));
}
else
{
return htmlHelper.ActionLink(linkText, actionName, controllerName, routeValues, htmlAttributesDictionary);
}
}

请尝试以下代码,可能有助于您。

 @Html.ActionLink(" SignIn", "Login", "Account", routeValues: null, htmlAttributes: new {  id = "loginLink" ,**@class="glyphicon glyphicon-log-in"** })

这对我来说一直很管用,不是很脏,也不是很干净。

<a href="@Url.Action("Index", "Home")"><span>Text</span></a>

我使用 bootstrap 组件的解决方案:

<a class="btn btn-primary" href="@Url.Action("resetpassword", "Account")">
<span class="glyphicon glyphicon-user"></span> Reset Password
</a>

我最终得到了一个自定义扩展方法。值得注意的是,当试图在 Anchor 对象中放置 HTML 时,链接文本可以位于左侧,也可以位于内部 HTML 的右侧。出于这个原因,我选择为左右内部 HTML 提供参数-链接文本位于中间。左右两个内部 HTML 都是可选的。

扩展方法 ActionLinkInnerHtml:

    public static MvcHtmlString ActionLinkInnerHtml(this HtmlHelper helper, string linkText, string actionName, string controllerName, RouteValueDictionary routeValues = null, IDictionary<string, object> htmlAttributes = null, string leftInnerHtml = null, string rightInnerHtml = null)
{
// CONSTRUCT THE URL
var urlHelper = new UrlHelper(helper.ViewContext.RequestContext);
var url = urlHelper.Action(actionName: actionName, controllerName: controllerName, routeValues: routeValues);


// CREATE AN ANCHOR TAG BUILDER
var builder = new TagBuilder("a");
builder.InnerHtml = string.Format("{0}{1}{2}", leftInnerHtml, linkText, rightInnerHtml);
builder.MergeAttribute(key: "href", value: url);


// ADD HTML ATTRIBUTES
builder.MergeAttributes(htmlAttributes, replaceExisting: true);


// BUILD THE STRING AND RETURN IT
var mvcHtmlString = MvcHtmlString.Create(builder.ToString());
return mvcHtmlString;
}

用法示例:

下面是一个用法的例子。对于这个示例,我只想要链接文本右侧的内部 html..。

@Html.ActionLinkInnerHtml(
linkText: "Hello World"
, actionName: "SomethingOtherThanIndex"
, controllerName: "SomethingOtherThanHome"
, rightInnerHtml: "<span class=\"caret\" />"
)

结果:

这将导致下面的 HTML..。

<a href="/SomethingOtherThanHome/SomethingOtherThanIndex">Hello World<span class="caret" /></a>

请输入以下代码:

@Html.Raw(@Html.ActionLink("text", "ActionName", "ControllerName", null, new { area = "Home" }).ToHtmlString().Replace("text", "<i class='fa fa-car sub-icon-mg' aria-hidden='true'></i> <span class='mini-sub-pro'>Link Text</span>"))