Ввод HTML внутри Html.ActionLink(), плюс текст ссылки?
У меня есть два вопроса:
- Мне интересно, как я могу отображать текст ссылки при использовании
Html.ActionLink()
в представлении MVC (на самом деле это Site.Master
).
Существует не перегруженная версия, которая не позволяет текст ссылки, и когда я пытаюсь передать только пустой string
, компилятор говорит мне, что ему нужна непустая строка.
Как я могу это исправить?
-
Мне нужно поместить теги <span>
в тег привязки, но он не работает с Html.ActionLink();
. Я хотел бы увидеть следующий вывод:
Текст пробела
Как я могу поместить теги внутри тега привязки в ASP.NET MVC?
Ответы
Ответ 1
Вместо использования Html.ActionLink вы можете отобразить URL-адрес через Url.Action
<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>
Ответ 2
Дополнительным вариантом является пользовательское расширение HtmlHelper. Примечание: ParameterDictionary - это мой собственный тип. Вы можете заменить 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();
}
Ответ 3
Просто используйте Url.Action
вместо Html.ActionLink
:
<li id="home_nav"><a href="<%= Url.Action("ActionName") %>"><span>Span text</span></a></li>
Ответ 4
Ниже приведено обходное решение (низкое и грязное), если вам нужно использовать ajax или какую-либо функцию, которую вы не можете использовать при создании ссылки вручную (используя тег):
<%= Html.ActionLink("LinkTextToken", "ActionName", "ControllerName").ToHtmlString().Replace("LinkTextToken", "Refresh <span class='large sprite refresh'></span>")%>
Вы можете использовать любой текст вместо "LinkTextToken", его нужно только заменить, важно только, чтобы он не встречался нигде внутри actionlink.
Ответ 5
Это всегда хорошо срабатывало для меня. Это не грязно и очень чисто.
<a href="@Url.Action("Index", "Home")"><span>Text</span></a>
Ответ 6
Я думал, что это может быть полезно при использовании бутстрапа и некоторых глипиконов:
<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 будет очищен
Ответ 7
Вот расширение uber ответа @tvanfosson. Я был вдохновлен этим и решил сделать его более общим.
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);
}
}
Ответ 8
У меня появился собственный метод расширения. Стоит отметить, что при попытке разместить HTML внутри объекта Anchor текст ссылки может быть либо слева, либо справа от внутреннего 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>
Ответ 9
Это очень просто.
Если вы хотите иметь что-то вроде значка глификона, а затем "Избранное",
<span class="glyphicon-heart"></span> @Html.ActionLink("Wish List (0)", "Index", "Home")
Ответ 10
Пожалуйста, попробуйте ниже код, который может вам помочь.
@Html.ActionLink(" SignIn", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" ,**@class="glyphicon glyphicon-log-in"** })
Ответ 11
Мое решение с использованием компонентов начальной загрузки:
<a class="btn btn-primary" href="@Url.Action("resetpassword", "Account")">
<span class="glyphicon glyphicon-user"></span> Reset Password
</a>