MVC 视图中的 Blazor 组件：onclick 事件不起作用

Question

我正在 Visual Studio 2019 年将 Blazor 组件整合到 MVC 应用程序中。我有一个 MVC Razor View，Index.cshtml，它包含一个 Blazor 组件 UserIndex.razor，其中包含一个点击事件。要测试 onclick 事件，UserIndex.razor 的 BaseComponent class UserIndexBase.cs 中有一个简单的函数，它会更改页面顶部按钮的显示值。该组件呈现良好，并且 Intellisense 在 blazor 组件文件中工作正常，但是该事件不会触发或无法成功完成其任务。（我使用的是火狐浏览器）控制台日志中有一些警告和错误，我已将其包含在代码片段下方的图像中。我检查了有关 blazor onclick 事件不起作用的其他问题，但 none 似乎有适用于我的情况的解决方案。

UserIndexBase.cs:

public class UserIndexBase : ComponentBase
{
    [Inject]
    public IUserAccountService UserAccountService { get; set; }

    [Parameter]
    public string Search { get; set; }

    public string Error { get; set; }

    [Parameter]
    public Listing<Account, AccountParams> Listing { get; set; }

    [Parameter]
    public Account UserToView { get; set; }

    public Account UserToEdit { get; set; }

    public Account UserToDelete { get; set; }

    [Parameter]
    public string Action { get; set; }

    [Parameter]
    public string Controller { get; set; }

    [Parameter]
    public Dictionary<string, object> RouteDataDict { get; set; }

    public async Task HandleSearchSubmit()
    {
        var searchFields = new string[] { "UserName", "Email" };
        var listingParams = new AccountParams
        {
            Search = Search,
            SearchFields = searchFields
        };
        var result = UserAccountService.GetListing(listingParams);
        if (result.Status != OpStatus.Ok)
        {

            return;
        }
        Listing = result.Listing;
        
    }

    public async Task ViewUser()
    {
        UserToView = new Account
        {
            Id = $"{Guid.NewGuid()}"
        };

        //var UserToView = UserAccountService.GetUser(userId);
    }
}

UserIndex.razor 顶部的按钮包含 onclick 触发器：

@inherits UserIndexBase
<button @onclick="ViewUser">@UserToView?.FirstName user</button>
<div class="content">
    <div class="page-content">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body p-35">
                        <div class="col-md-12 m-text-center">
                            <h1>Users</h1>
                            <small class="text-muted f-w-500">@Listing.Params.TotalDataSize users</small>
                        </div>
                        <div class="row m-b-10">
                            <div class="col-md-6">
                                <form action="@LinkGenerator.GetPathByAction("Index", "Users")" method="GET">
                                    <label class="tiny-label">&nbsp;</label>
                                    <div class="form-group">
                                        <div class="input-group mb-3">
                                            <input autocomplete="off" name="Search" type="text" class="form-control f-sz-1-em" placeholder="Search by username or email" aria-describedby="basic-addon2" value="@Search" />
                                            <div class="input-group-append">
                                                <button type="submit" id="search-btn" class="btn btn-secondary btn-icon p-t-6 p-b-6">
                                                    <i class="zmdi zmdi-search color-theme hover-color-white f-sz-1-em"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <input type="hidden" name="SearchFields[]" value="UserName" />
                                        <input type="hidden" name="SearchFields[]" value="Email" />
                                    </div>
                                </form>
                            </div>
                        </div>
                        <table class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th scope="col">Name</th>
                                    <th scope="col">Username</th>
                                    <th scope="col">Email</th>
                                    <th scope="col">Contact</th>
                                    <th scope="col">Email</th>
                                    <th scope="col">Two Factor Enabled</th>
                                    <th scope="col">Created On</th>
                                    <th scope="col">Last Logged On</th>
                                    <th scope="col"></th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach (var user in Listing.Data)
                                {
                                    <tr>
                                        <td>@($"{user.FirstName} {user.LastName}")</td>
                                        <td>@user.UserName</td>
                                        <td>@user.Email</td>
                                        <td>@user.PhoneNumber</td>
                                        <td>@user.Email</td>
                                        <td>@(user.TwoFactorEnabled?"Yes":"No")</td>
                                        <td>@user.CreatedOn.ToString(Formats.DISPLAY_DATE_WITHOUT_DAY)</td>
                                        <td>
                                            @(user.LastLoggedOn==null?"":
                                        user.LastLoggedOn.Value.ToString(Formats.DISPLAY_DATE_WITHOUT_DAY))
                                        </td>
                                        <td>
                                            <button title="Actions" class="btn btn-tranparent btn-circle dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="zmdi zmdi-menu"></i>
                                            </button>
                                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                                <a class="dropdown-item" @onclick="ViewUser">View</a>
                                                <a class="dropdown-item" href="">Edit</a>
                                                <a class="dropdown-item" href="">Delete</a>
                                                <a class="dropdown-item" href="@(LinkGenerator.GetPathByAction("Index", "Profiles", new {UserId=user.Id}))">View Profiles</a>
                                            </div>
                                        </td>
                                    </tr>
                                }
                            </tbody>
                        </table>
                        @if (Listing.Data.Count() > 0)
                        {
                            var pagingParams = PagingParams.GetPagingParams(Listing.Params);
                            <IndexPaging PagingParams="@pagingParams" Action="@Action" Controller="@Controller" RouteDataDict="@RouteDataDict" />
                        }
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

这是组件添加到 Index.cshtml 的方式：

<component type="typeof(UserIndex)" render-mode="ServerPrerendered"
           param-Listing= "Model" param-Search = "search" param-Action= "action" param-Controller= "controller" param-RouteDataDict= "routeData" />

我在 _Layout.cshtml 的标签中有这个：

<base href="~/" />

这在 _Layout.cshtml 的底部：

...
<script src="_framework/blazor.server.js"></script>
@await RenderSectionAsync("Scripts", required: false)
</body>

这是我的 _Imports.razor:

@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.JSInterop
@using System.IO
@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.JSInterop
@using System.IO

在Startup.cs中的适当位置添加了以下行：

services.AddServerSideBlazor();

.....

app.UseEndpoints(endpoints => {
                endpoints.MapControllerRoute(
                    name: "default",
                    pattern: "{controller=Home}/{action=Index}/{id?}");
                endpoints.MapRazorPages();
                endpoints.MapBlazorHub();
            });

Portion of console log in browser

Answer 1

问题是包含一个脚本 pace.js 脚本。不知道为什么，但是当我排除它时，错误就停止了。

MVC 视图中的 Blazor 组件：onclick 事件不起作用

Blazor component in MVC view: onclick event not working

c#

asp.net-mvc

onclick

blazor

blazor-server-side