Question

我正在构建一个示例剃刀组件，但是我的按钮onclick方法无法启动。当我单击按钮时，什么也没有发生。我什至在方法中放置了一个断点，看它是否捕获了它没有捕获的东西。该组件可以渲染，但是正如我所说的那样，单击按钮时根本没有运行LoginUser方法。

剃须刀配件页面：

//const link =  document.querySelectorAll('.list-menu a')



var nested = document.getElementsByClassName('menu-nested');
  var list = document.querySelectorAll('.list-menu a');
  for (i = 0; i < list.length; i++) {
      list[i].addEventListener('click', toggleItem, false);
  }
  function toggleItem() {
      var itemClass = this.parentNode.className;
      for (i = 0; i < nested.length; i++) {
          nested[i].className = 'menu-nested none';
      }
      if (itemClass == 'list-menu') {
          this.nextElementSibling.classList.toggle('block');
      }
  }


/*[].forEach.call(
    document.querySelectorAll('.list-menu a'),
    function (el) {
      el.addEventListener('click', (e) => {
        //console.log(e.target.parentElement)
        if(e.target.nextElementSibling == null){
          return;
        }
        e.target.parentElement.querySelector('.menu-nested').classList.toggle('block')
        if(e.target.parentElement.nextElementSibling == null){
          return;
        }else{
          e.target.parentElement.nextElementSibling.querySelector('.menu-nested').classList.toggle('none')
          //e.target.parentElement.nextElementSibling.querySelector('.menu-nested').classList.toggle('block')
        }
        console.log(this)
      })
    }
);*/

剃刀组件：

    <div class="text-center">
        <Login FieldsetAttr="fieldsetAttr" UsernameAttr="usernameAttr" PasswordAttr="passwordInput"
               ButtonAttr="buttonAttr" ButtonText="Sign In" SignInManager="SignInManager"
               InvalidAttr="invalidAttr" />

    </div>

    @code {
        Dictionary<string, object> fieldsetAttr =
            new Dictionary<string, object>()
            {
                {"class", "form-group" }
            };

        Dictionary<string, object> usernameAttr =
            new Dictionary<string, object>()
            {
                {"class", "form-control" },
                {"type", "text" },
                {"placeholder", "Enter your user name here." }
            };

        Dictionary<string, object> passwordInput =
            new Dictionary<string, object>()
            {
                {"class", "form-control" },
                {"type", "password" }
            };

        Dictionary<string, object> buttonAttr =
            new Dictionary<string, object>()
            {
                {"class", "" },
                {"type", "button" }
            };

        Dictionary<string, object> invalidAttr =
            new Dictionary<string, object>()
            {
                {"class", "invalid-feedback" }
            };

    }

Answer 1

这是我在MVC核心项目中发生的，我尝试在this blog's guidance之后添加blazor组件。在将我的项目与模板blazor项目进行比较之后，我发现是丢失的_Imports.razor文件导致blazor.server.js不订阅click事件。我将该文件添加到我的项目中，就像在模板项目中一样：

@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

然后，按一下按钮即可正常工作。

Answer 2

确保您

1）在Startup.cs文件中配置Blazor：

在public void ConfigureServices(IServiceCollection services)中您致电services.AddServerSideBlazor();（..用于服务器端Blazor）

和public void Configure(IApplicationBuilder app, IWebHostEnvironment env)中您注册端点，例如（' endpoint.MapBlazorHub（）'是您需要在此处添加的内容）：

app.UseEndpoints(endpoints =>
        {
            endpoints.MapRazorPages();
            endpoints.MapBlazorHub();
        });

2）你有

@using Microsoft.AspNetCore.Components
@using Microsoft.AspNetCore.Components.Web

您正在使用Blazor的Razor组件中的

。

Answer 3

遇到了同样的问题，但通过将 ServerPrerendered 更改为 Server"

在您的 _Host.cshtml 改变这个

<component type="typeof(App)" render-mode="ServerPrerendered" />

到

<component type="typeof(App)" render-mode="Server" />

Blazor服务器端剃刀组件中的onclick方法不起作用

3 个答案: