Question

如何在Razor页面中运行的Razor组件中触发事件？

我的创业公司：

        public void ConfigureServices(IServiceCollection services)
        {
            services.AddRazorPages();
            services.AddServerSideBlazor();
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Error");
            }

            app.UseStaticFiles();

            app.UseRouting();

            app.UseAuthorization();

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

我的Razor页面调用了该组件：

@page
@model DocketDetail.OrderModel
@{
    Layout = null;
}
@using RelationalObjectLayerCore;

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>

    <script src="_framework/blazor.server.js"></script>

    <script src="~/js/site.js"></script>
    <title>Order</title>
</head>
<body>
<component type="typeof(Component.Filedby)" render-mode="ServerPrerendered"  />
</body>

一切正常显示。

我的组件

@using Microsoft.AspNetCore.Components


@code {

    private void SearchPerson()
    {
        string x = "TEST";
    }    
}


<button @onclick="SearchPerson">Search</button>

很明显，这是从我的实际代码中削减的...但是我不知道如何在Razor组件中触发“ SearchPerson”。

Answer 1

发现： https://docs.microsoft.com/en-us/aspnet/core/blazor/hosting-models?view=aspnetcore-3.1#integrate-razor-components-into-razor-pages-and-mvc-apps

有这个小注释：

在blazor.server.js脚本的内部添加一个<script>标签关闭</body>标签：

HTML
<script src="_framework/blazor.server.js"></script>

移动了我的脚本标签，现在可以使用了。

感谢大家的建议。

Answer 2

我想我明白了您要做什么。不知道这是否会按照您的意图工作。该组件将使用Blazor渲染，但是按钮上附加的代码将不起作用。将@code{}的按钮放在要加载的页面上。或者，如果您希望每次加载页面时都运行该代码，则可以进行OnInitialized()重载。

此外，请确保Blazor在浏览器中正确呈现。使用F12并确保其显示已连接。

https://docs.microsoft.com/en-us/aspnet/core/blazor/lifecycle?view=aspnetcore-3.1

剃刀组件事件未在剃刀页面中触发

2 个答案: