Почему моя страница .cshtml неправильно отображает ViewComponent? - PullRequest
Новая
       29

Почему моя страница .cshtml неправильно отображает ViewComponent?

0 голосов
/ 14 мая 2019

Я пытаюсь обновить / перезагрузить View View в Dotnet Core Razor Page SPA.

На моей главной странице я успешно визуализирую ViewComponent, используя: 

<div class="row>">
        <button class="btn btn-primary" id="myButton">refresh</button>
        <div id="timeDisplays" class="row">
            @await Component.InvokeAsync("DateTimeDisplay", @DateTime.Now.ToShortDateString());
        </div>
    </div>

Но когдаЯ поместил его в функцию, например, так: 

<script src="~/lib/jquery/dist/jquery.js" type="text/javascript"></script>
<script>
    $("myButton").on("click",
        $(function()
        {
            $("#timeDisplays").load(@await Component.InvokeAsync("DateTimeDisplay", @DateTime.Now.ToShortDateString()));
            console.log("Reloaded");

        }));
</script>

DateTimeDisplayComponent.cs 

[ViewComponent(Name = "DateTimeDisplay")]
    public class DateTimeDisplayViewComponent : ViewComponent
    {
        public DateTimeDisplayViewComponent()
        {

        }

        public async Task<IViewComponentResult> InvokeAsync(DateTime date)
        {            
            return View("DateTimeStringDisplay", DateTime.Now.ToShortDateString());
        }
    }

, как FYI, вот частичное представление 

@model string
    <div class="container">
        <div class="row">
            <div class="col-6 text-right">
                <label> Current Time is</label>
            </div>
            <div class="col-6 text-left">
                <p id="timeDisplay">@Model</p>
            </div>
        </div>
    </div>

, когдастраница загружена, прежде чем я когда-либо нажму на кнопку, это выглядит так: 

<script>
    $("#myButton").on("click",
        function()
        {
            $("#timeDisplays").load("    <div class="container">
        <div class="row">
            <div class="col-6 text-right">
                <label> Current Time is</label>
            </div>
            <div class="col-6 text-left">
                <p id="timeDisplay">5/13/2019</p>
            </div>
        </div>
    </div>
");
            console.log("Reloaded");

        });
</script>

Я могу отчасти сказать, что происходит.Invokeasync возвращает html, но кажется, что jquery пытается выполнить рендеринг в блоке кода.Это одна часть, которую я не понимаю, почему она выполняет функцию (рендеринг html для ViewComponent), когда страница загружается.Разве это не должно ждать, пока я не нажму кнопку?

Я думал о том, чтобы преобразовать View в HTML-строку, которую, я надеюсь, браузер сможет интерпретировать (и я проверил, работает, когда я заменяю вызов invokeasync простым <p> Hello There<p>

1 Ответ

0 голосов
/ 14 мая 2019

Вызов InvokeAsync выполняется при отображении страницы. Вы не можете назвать это с помощью JavaScript. Это C #. Вы можете загрузить партию через AJAX . Возможно, поместите ваш ViewComponent на частичную страницу.

...