Как правильно создать помощник привязки в .net Core 2.2

Question

Я хочу создать HtmlHelper для отображения ссылок с иконками каркаса материализации.

Я написал этот код, потому что не смог найти похожие примеры.Мой код работает, но, по крайней мере, выглядит плохо.Я думаю, что я должен использовать UrlHelper и UrlAction, но я не знаю, как это сделать.

public static IHtmlContent IconActionLink(this IHtmlHelper helper,
    string iconName,
    object iconHtmlAttributes,
    string linkText,
    string actionName,
    string controllerName,
    object routeValues,
    object linkHtmlAttributes)
{
    var content = new HtmlContentBuilder();
    var anchorStart = new TagBuilder("a");

    string routeValuesToString = "?";
    foreach(var r in new RouteValueDictionary(routeValues))
    {
        routeValuesToString += r.Key.ToString()+"="+r.Value.ToString()+"&";
    }
    routeValuesToString.Remove(routeValuesToString.Length-1);

    anchorStart.MergeAttribute("href", "../"+controllerName+"/"+actionName+"/"
        + routeValuesToString);

    anchorStart.MergeAttributes(new RouteValueDictionary(linkHtmlAttributes));
    anchorStart.InnerHtml.Append(linkText);
    anchorStart.TagRenderMode = TagRenderMode.StartTag;

    var icon = MaterialIcon(helper, iconName, iconHtmlAttributes);

    var anchorEnd = new TagBuilder("a") { TagRenderMode = TagRenderMode.EndTag };

    content.AppendHtml(anchorStart);
    content.AppendHtml(icon);
    content.AppendHtml(anchorEnd);

    return content;
}

Я хочу знать, как правильно вставить RouteValues, Action, Controller в тег.

Answer 1

В представлении вы можете использовать Url.Action() для создания URL-адреса из значений маршрута, действия и контроллера и использовать его в атрибуте href.Чтобы сделать это в HTML-помощнике, вам нужно создать свой собственный URL-помощник.

// ASP.NET MVC
UrlHelper urlHelper = new UrlHelper(
    helper.ViewContext.RequestContext,
    helper.RouteCollection);

// ASP.NET Core
UrlHelper urlHelper = new UrlHelper(
    new ActionContext(
        helper.ViewContext.HttpContext,
        helper.ViewContext.RouteData,
        helper.ViewContext.ActionDescriptor));

Теперь этот раздел кода:

string routeValuesToString = "?";
foreach(var r in new RouteValueDictionary(routeValues))
{
    routeValuesToString += r.Key.ToString()+"="+r.Value.ToString()+"&";
}
routeValuesToString.Remove(routeValuesToString.Length-1);

anchorStart.MergeAttribute("href", "../"+controllerName+"/"+actionName+"/"
    + routeValuesToString);

Можно сократить до этого:

anchorStart.MergeAttribute("href",
    urlHelper.Action(actionName, controllerName, routeValues));

Это правильно разместит значения в пути, если это часть маршрута, и поместит остальные в строку запроса.

---

РЕДАКТИРОВАТЬ - я упоминалПомощники тегов и их составностьВаш HTML-помощник делает много, что не связано с самой иконкой, просто чтобы сделать ее ссылкой.Помощник HTML может принять делегата рендеринга, но вы все равно используете свой собственный помощник HTML для тега a.

Вот простой помощник тега длятег icon, который даст вам значок FontAwesome.

[HtmlTargetElement("icon", Attributes = "")]
public class IconTagHelper : TagHelper
{
    [HtmlAttributeName("name")]
    public string IconName { get; set; }

    public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
    {
        output.TagName = "span";

        string classAttribute = $@"fa fa-{IconName}";

        output.Attributes.Add("class", classAttribute);
    }
}

Теперь вы можете использовать обычный тег a с атрибутами помощника тега asp- * и добавлять любые дополнительные атрибуты (например, data-id) к вашему тегу icon.

<a asp-action="someAction" asp-controller="theController" asp-route-id="@Model.Id"><icon name="fa-thumbs-up" data-id="@Model.Id" /></a>

С Model.Id == 1 он будет отображать что-то вроде этого:

<a href="/theController/someAction/1"><span class="fa fa-thumbs-up" data-id="1"></span></a>

Другими словами, единственное беспокойство по поводу помощника тега -как превратить ваш исходный параметр iconName в разметку, которая представляет значок.Все остальное - создание тегов привязки, дополнительные атрибуты и т. Д. - можно оставить другим вещам, которые больше подходят для этих задач.Это прекрасное разделение проблем.

Чтобы это сработало, вам может понадобиться изменить свой метод MaterialIcon или даже перенести этот код в помощник по тегам, в зависимости от того, что он делает.