为什么我的 .cshtml 页面渲染 ViewComponent 不正确

debugcn 发表于 Dev

乔克

我正在尝试在 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>

日期时间显示组件.cs

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

        }

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

仅供参考，这是部分视图

@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 正在尝试在代码块中呈现。这是我不明白的一部分，为什么它在页面加载时执行函数（为 ViewComponent 渲染 html）。不应该等到我点击按钮吗？

我考虑将 View 转换为 HTML 字符串，希望浏览器可以解释（当我用一个简单的替换 invokeasync 调用时，我验证了工作 <p> Hello There<p>

迈克·布林德

该InvokeAsync调用在呈现页面时执行。您不能使用 JavaScript 调用它。是 C#。您可以通过 AJAX 加载部分。也许将您的 ViewComponent 放入部分页面。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。