Typeahead not working in layout page

ironbull45 commented 4 years ago

I'm using this control in a Razor pages project & it works fine if I use in any Page, but it doesn't work if I use in the layout page. Here is the code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - CompanyABC.Provisioning.Web.Razor</title>

    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    @*<link rel="stylesheet" href="~/css/bootstrap-flatly.css" asp-append-version="true" />*@
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    @* Kendo CSS after defaults *@
    <link rel="stylesheet" href="~/lib/telerik/styles/kendo.common-bootstrap.min.css" />
    <link rel="stylesheet" href="~/lib/telerik/styles/kendo.bootstrap.min.css" />

    <link rel="stylesheet" href="https://unpkg.com/@@progress/kendo-theme-default@@latest/dist/all.css" />

    <link href="_content/Blazored.Typeahead/blazored-typeahead.css" rel="stylesheet" />

    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    @* Kendo scripts after defaults *@
    <script src="~/lib/telerik/js/kendo.all.min.js"></script>
    <script src="~/lib/telerik/js/kendo.aspnetmvc.min.js"></script>
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div style="padding-right:20px">
                    <a class="navbar-brand" asp-controller="Home" asp-action="Index">
                        <img src="~/images/CompanyABCLogo.gif" class="d-inline-block align-top" alt="Logo">
                        Provisioning
                    </a>
                </div>
                <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                    <p class="nav navbar-text navbar-right" style="padding-left: 20px">Hello, @User.Identity.Name!</p>
                    <cust>@(await Html.RenderComponentAsync<CompanyABC.Provisioning.Web.Razor.Components.AutoComplete>(RenderMode.ServerPrerendered))</cust>
                    @*<div style="border:solid thin">
                            <vc:employee-auto-complete default-model="new Components.EmployeeAutoComplete.DefaultModel()"></vc:employee-auto-complete>
                        </div>*@
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
                        </li>
                    </ul>

                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2019 - CompanyABC.Provisioning.Web.Razor - <a asp-area="" asp-page="/Privacy">Privacy</a>
        </div>
    </footer>

    <script src="_content/Blazored.Typeahead/blazored-typeahead.js"></script>
    <script src="_framework/blazor.server.js"></script>

    @RenderSection("Scripts", required: false)
</body>
</html>

These are the errors I receive:

blazor.server.js:15 [2019-12-09T19:02:36.046Z] Error: The list of component records is not valid.
e.log @ blazor.server.js:15
blazor.server.js:1 [2019-12-09T19:02:36.048Z] Information: Connection disconnected.
blazor.server.js:1 Uncaught (in promise) Error: Invocation canceled due to the underlying connection being closed.
    at e.connectionClosed (blazor.server.js:1)
    at e.connection.onclose (blazor.server.js:1)
    at e.stopConnection (blazor.server.js:1)
    at e.transport.onclose (blazor.server.js:1)
    at e.close (blazor.server.js:1)
    at e.stop (blazor.server.js:1)
    at e.<anonymous> (blazor.server.js:1)
    at blazor.server.js:1
    at Object.next (blazor.server.js:1)
    at s (blazor.server.js:1)

Any help would be appreciated.

chrissainty commented 4 years ago

Thanks for reporting this @ironbull45. I'll try and recreate this my end, but I suspect this may be a Blazor bug as there is nothing in the typeahead which should care about this. I've not seen anyone try and render a Blazor component in a layout page before so it's an interesting one.

Leave it with me.

ironbull45 commented 4 years ago

Hold your horses :) I just installed .Net Core 3.1 & everything works as expected! Thanks for looking into this for me.

Blazored / Typeahead

Typeahead not working in layout page #95