.NET Core - асинхронная загрузка компонентов представления (на стороне клиента) через Wrapper

Question

Чтобы оптимизировать время отклика нашего веб-приложения, я хотел бы загрузить View Components в .NET Core 2.2 асинхронно со стороны клиента без Javascript. Конечно, этого можно достичь, загрузив их вызовом AJAX, а затем отобразив представление из контроллера.

Но я хотел бы сохранить intellisense и работать с тегами в коде, чтобы вы могли вызывать компонент представления с таким тегом несколько раз в разных местах и ​​не нужно создавать несколько сообщений ajax в JS:

<vc:free-text ftx-code="STARTPAGE" obj-ref="null" custom-para="null"></vc:free-text>

Я попытался загрузить компонент представления через TagHelper, но, по-видимому, они также отображаются синхронно (только на стороне сервера асинхронно):

    [HtmlTargetElement("widget", Attributes = WidgetNameAttributeName)]
    public class WidgetTagHelper : TagHelper
    {
        private readonly IViewComponentHelper _viewComponentHelper;
        public WidgetTagHelper(IViewComponentHelper viewComponentHelper)
        {
            _viewComponentHelper = viewComponentHelper;
        }

.....
        public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
        {
            ((IViewContextAware)_viewComponentHelper).Contextualize(ViewContext);
            var content = await _viewComponentHelper.InvokeAsync(typeof(FreeTextViewComponent), new { ftxCode = FTXCode, objRef = OBJRef, customPara = CustomPara });
            output.Content.SetHtmlContent(content);
        }
    }

Кто-нибудь знает подход (обертка, TagHelper и т. Д.?), В котором я сначала загружаю ViewComponent с «пустым» модальным режимом, и когда он отображается, он выполняет асинхронный обратный вызов на стороне клиента для извлечения фактических данных, как описано в этом сообщение? https://github.com/aspnet/AspNetCore.Docs/issues/7914#issuecomment-441280663

Answer 1

Просмотр компонентов и помощников тегов недоступен напрямую.Они не являются частью конвейера запросов и ни на что не отвечают.Лучшее, что вы можете сделать, - это создать представление, в котором используется компонент или помощник по тегам, а затем вернуть это представление из действия, к которому вы бы фактически обратились с запросом.

В общем, для этогоЧто-то типа того, вам лучше использовать клиентскую библиотеку, такую ​​как Vue, Angular и т. д., и создавать клиентские компоненты через эти библиотеки.Затем ваш сервер работает как API, возвращая данные JSON, которые вы передаете в эти компоненты.

Answer 2

Я закончил тем, что перезагрузил их через вызов AJAX, но только один для всех визуализированных представлений.Во-первых, я загружаю ViewComponent с параметром «async», установленным в «true» (он выбирает данные, только когда async установлен в «false»):

        public async Task<IViewComponentResult> InvokeAsync(string ftxCode, string objRef = "", List<FTXPara> customPara = null, bool async = false)
        {
            if (async)
            {
                ViewData["ftxCode"] = ftxCode;
                ViewData["async"] = async;
                return View(new GetFreeTextResponse());
            }
            List<CMailCustomParameter> para = new List<CMailCustomParameter>();
            if (customPara != null)
            {
                foreach (var p in customPara)
                {
                    para.Add(new CMailCustomParameter { ParameterName = p.Name, ParameterValue = p.Value });
                }
            }

            var resp = await GetItemsAsync(ftxCode, objRef, para);
            return View(resp);
        }
        private async Task<GetFreeTextResponse> GetItemsAsync(string ftxCode, string objRef, List<CMailCustomParameter> para)
        {
            return await FreeTextService.GetFreeText(new GetFreeTextRequest { FTX_Code = ftxCode, ObjRef = objRef, CustomParameters = para });
        }

Затем я перебираю все визуализированные «пустые» представленияКомпонент и загрузите View Component с фактическими данными из контроллера (на этот раз «async» ложно »):

    $('.view-component').each(function (i, obj) {
        var that = this;
        var id = $(this).attr('id');
        var test = $(this).data();
        console.log($(this).data('async'));
        if ($(this).data('async')) {

            $.ajax({
                url: "/VC/Get" + "FreeText" + "ViewComponent",
                type: 'POST',
                data: $(this).data(),
                contentType: 'application/x-www-form-urlencoded',
                success: function (data) {
                    $(that).html(data);
                },
                error: function (xhr, status, error) {
                    console.log(xhr.status + " - " + error);
                }
            });
        }
    });