Фьючерсы: Taghelpers -> Бритвенные компоненты - PullRequest
1 голос
/ 18 октября 2019

Мне интересно, есть ли у кого-нибудь какие-либо взгляды или знания о том, где будущее будущее компонентов TagHelpers & Razor. У меня вопрос только по поводу начального рендеринга. Не использую код C # на стороне клиента.

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

Этосравнивается с TagHelpers, генерирующим разметку.

Возьмите этот компонент метки TagHelper, который я использую, например ...

using Microsoft.AspNetCore.Razor.TagHelpers;

namespace gMIS.TagHelpers
{
    [HtmlTargetElement("glabel", TagStructure = TagStructure.WithoutEndTag)]
    public class glabelTagHelper : TagHelper
    {
        #region Attributes

        [HtmlAttributeName("id")]
        public string id { get; set; }

        [HtmlAttributeName("class")]
        public string cls { get; set; }

        [HtmlAttributeName("xy")]
        public string xy { get; set; }

        [HtmlAttributeName("style")]
        public string style { get; set; }

        [HtmlAttributeName("value")]
        public string value { get; set; }

        #endregion Attributes

        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            //START with the container DIV
            output.TagName = "div";
            output.TagMode = TagMode.StartTagAndEndTag;
            if (id != null) output.Attributes.Add("id", id);
            if ((xy != null) && (xy != null)) output.Attributes.Add("class", "xy" + xy);
            if (style != null) output.Attributes.Add("style", "display:inline-block; font-weight:bold;" + style); //*** Any subsequent WIDTH passed in with supercede the default provided here!
            else output.Attributes.Add("style", "display:inline-block; font-weight:bold;");
            if (cls != null) output.Attributes.Add("class", cls);

            //Insert data value
            if (value != null) output.Content.AppendHtml(value);
        }
    }
}

Мне бы понравилось, если бы это можно было кодировать как-то так ...

<div id="{inject id}" class="{inject class}" style="{inject style}">{inject text}</div>

... вместо того, чтобы использовать C # для создания базовой разметки.

output.TagName = "div";
output.TagMode = TagMode.StartTagAndEndTag;

Затем взаимодействующий код (только на стороне сервера) завершает настройку базовой разметки компонента. Таким образом, вы можете видеть базовую разметку, а не более сложную для чтения и визуализации конструкцию разметки в C #.

С базовой меткой это кажется не слишком выгодным, но с более сложными компонентами,возможность визуализации разметки была бы настоящим благом.

    <div class="{inject class}" id="{inject id}" style="{inject style}">
        <input name="{inject name}" id="{inject id}" style="{inject style}" type="text" value="-4" data-val-required="&amp;nbsp;Req!" data-val="true">
        <input id="{inject id}" style="{inject style}" type="text" placeholder="Start typing here to search..." autocomplete="off">
        <select id="{inject id}" style="{inject style}" size="1">
        </select>

        <script type="text/javascript">   
$(document).ready(function () {       $('#ext_IT_Task_Reported_By_ID').glookupInit('/TagHelpers/InternalContactLookup');   });</script>

        <span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="{inject id}"></span>
    </div>

Кто-нибудь знает, куда Тагхелперс движется в долгосрочной перспективе? Навстречу Бритве Компонентный способ строительства возможно. Извиняюсь, если мой пост недостаточно ясен. Я много думал о том, как сообщить свой вопрос. Надеюсь, это не смущает.

Ответы [ 2 ]

0 голосов
/ 21 октября 2019

Крис Пратт (Как правильно ссылаться на другого пользователя?)

К сожалению, вы неправильно поняли вопрос. У меня нет проблем с созданием TagHelpers или пониманием того, как они работают. У нас есть около 20-25 TagHelpers, которые мы разработали, начиная от динамических поисков и заканчивая нашей довольно обширной и мощной сеткой. Пример использования сетки ниже ...

<ggrid id="grdTaskSearchResults"
       url="Task_Search?handler=results&userguid=@Model.UserGUID&manager=@Model.Manager"
       sortby="@Model.Opt_SortCol"
       sortdir="@Model.Opt_SortDir"
       pagesize="100"
       style="height:100%; width:100%;">
    <cols>
        <coltemplate style="white-space:nowrap;">
            <a onclick="gNewWindowAndTitle('View IT Call Log', null, null, 'Task_Summary?userguid=@Model.UserGUID&taskId={Task_ID}')" title="View IT Call Log"><img class="smallIcon" src="/Icons/Magnify.gif" /></a>
            <gpdialog btnexit="Cancel" btnsubmitandclose="Save" title="Edit Call Log" url="Task_CRUD?userguid=@Model.UserGUID&manager=@Model.Manager&crud=u&taskId={Task_ID}" callback="ggridReload('grdTaskSearchResults')" linkicon="/Icons/Edit.gif" hideif="('@Model.Manager' !== 'true')" suppresstitle="true" />
            <gpdialog btnexit="Cancel" btnsubmitandclose="Save" title="Add Note to Call Log" url="Task_Note_CRUD?userguid=@Model.UserGUID&taskId={Task_ID}" callback="ggridReload('grdTaskSearchResults')" linkicon="/Icons/NewAddition.gif" suppresstitle="true" />
            <img class='smallIcon' src="/Icons/Exclamation.gif" alt='Not Responded yet!' hideif="{Responded}===true" />
        </coltemplate>
        <col heading="ID" fld="Task_ID" />
        <col heading="Type" fld="Task_Type" style="white-space:nowrap;" />
        <col heading="Status" fld="Task_Status" />
        <coltemplate heading="Reported By">
            <a target="_blank" href="https://gmis.info/entity/entity.asp?ec=1&code={Reported_By_ID}">{Reported_By_Name}</a>
        </coltemplate>
        <col heading="Date Entered" fld="Date_Entered" style="white-space:nowrap;" format="ddMMMyy" />
        <col heading="NAB" fld="NAB_Initials" style="white-space:nowrap;" />
        <coltemplate heading="Severity">
            <span hideif="{Task_Status_ID}===3" style="color:{Severity_Color}; font-family:Webdings; font-size:10pt;">n</span><span hideif="{Task_Status_ID} == 3">&nbsp;&nbsp;{Task_Severity}</span>
        </coltemplate>
        <col heading="Description" fld="Description" />
    </cols>
    <footer>
        <gpdialog btnexit="Cancel" btnsubmitandclose="Save" title="Add New Call Log" url="Task_CRUD?userguid=@Model.UserGUID&manager=@Model.Manager&crud=c" callback="ggridReload('grdTaskSearchResults')" linkicon="/Icons/NewAddition.gif" />
    </footer>
</ggrid>

Тем не менее, в вашем примере кода есть пара вещей, которые я хотел бы рассмотреть в своем собственном коде. Потенциальное улучшение для нас, я думаю, я могу предусмотреть там. В этой связи я очень благодарен вам за ваш вклад.

Нет, мой вопрос касается только следующего шага в истории TagHelper.

  • HtmlHelpers были написаны на c # и вызваны на c #.

  • Taghelpers написаны на c # и вызваны в html разметке.

  • Компоненты Razor написаны в html-разметке с некоторым кодом C #, встроенным / задним. Однако лучше всего реализовано в Blazor с использованием html-разметки. При вызове из страниц Razor вызов выполняется в коде c #, как в HtmlHelpers (шаг назад для меня).

Что я хотел бы увидеть где-нибудь в этой истории дляБудущее - это сценарий, в котором TagHelpers написаны в html-разметке, с некоторым кодом C #, встроенным / задним, так же, как компоненты Razor сейчас. И в использовании, Taghelper вызывается в разметке, как они в настоящее время. Я не предлагаю, чтобы TagHelpers начал использовать c # на стороне клиента. Это просто о том, как TagHelpers в их нынешнем виде и функциональности ... написано.

По сути, я спрашиваю, знает ли кто-нибудь, что ждет нас в будущем в отношении следующего шага для TagHelpers? Имеет ли это смысл?

0 голосов
/ 18 октября 2019

Не совсем точно, что вы спрашиваете здесь, но я думаю, вы не понимаете, как работают помощники тегов. Вам не нужно добавлять каждый атрибут вручную к выводу, и вам определенно не нужны вспомогательные свойства, если вам на самом деле не нужно значение для целей помощника по тегам. Razor оставляет любые дополнительные атрибуты немолдированными.

[HtmlTargetElement("glabel")]
public class glabelTagHelper : TagHelper
{
    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        output.TagName = "div";
        output.TagMode = TagMode.StartTagAndEndTag;

        var style = "display:inline-block; font-weight:bold";
        if (output.Attributes.TryGetAttribute("style", out var attr))
        {
            style += $";{attr.Value}";
        }
        output.Attributes.SetAttribute("style", style);
    }
}

Исходя из вашего кода, единственное, что вы изменяете, это атрибут style, поэтому все остальное, включая содержимое, может и будет просто отображаться как-является. Затем для стиля вам просто нужно посмотреть, существует ли атрибут, и если это так, добавить его в свой собственный стиль. Только с приведенным выше кодом:

<glabel id="foo" class="foo" style="width:100px">
    <!-- child content here -->
</glabel>

Результатом будет:

<div id="foo" class="foo" style="display:inline-block;font-weight:bold;width:100px">
    <!-- child content here -->
</div>

Дочерние элементы должны будут иметь свои собственные помощники тегов, если вам нужно делать там особые вещи. Помощник по тегам работает только с самим непосредственным тегом, а не с целым блоком HTML. Вы можете получить дочерний контент и вручную изменить его, но вы будете делать это просто как строку, используя такие вещи, как регулярное выражение. Достаточно сказать, что это было бы не идеально.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...