时间戳

首页 > 解决方案 > Razor组件按钮@onclick不调用c#方法

razor - Razor组件按钮@onclick不调用c#方法

问题描述

我正在寻找开始创建一个新网站，我遇到了 blazor/razor for asp.net。我会说只是看着它，这让我非常兴奋能够摆脱所有的 javascript 框架。但是，像许多其他人一样，我在让简单的@onclick 工作时遇到问题，而且我对 blazor/razor 进行的研究越多，我就越感到困惑。正如其他人所指出的，一切似乎都在不断变化，所以我发现的资源一直自相矛盾。

首先，我尝试在 ASP.NET Core Web 应用程序中创建一个简单的 Razor 组件（.razor 扩展名）。作为入门指南，我在 youtube 上观看了“在 ASP.NET Core 3.0 中引入 Razor 组件 - Daniel Roth”视频，并得出以下结论：

<div class="">
    <input type="text" placeholder="Search..." @bind="@searchValue">
    <button @onclick="Search">Search</button>
</div>

@count

@code {

    string searchValue;
    int count;

    void Search()
    {
        var x = searchValue;
        count++;
    }
}

我的问题是，按钮 @onclick 没有调用 Search 方法。我已经看到了这种语法的几种不同变体，并且我都试过了。我提到的视频有

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

但我发现现在 onclick 前面需要 @ 符号。我已经看到方法名称前面包含和不包含 @ 符号。如果我不包含它，它会编译并运行，但按钮不会做任何事情。如果我确实包含它，我会收到错误消息：

无法将方法组“搜索”转换为非委托类型“对象”。您是否打算调用该方法？

我发现这个 BlazorFiddle ( https://blazorfiddle.com/s/aoa87v05 ) 作为一个快速测试场，发现同时添加：

<button @onclick="@SomeAction">Click Me</button>
<button @onclick="SomeAction">Click Me</button>

工作正常。所以我不确定我在这里做错了什么。（也许这个 blazor fiddle 在旧版本上？）

任何帮助将不胜感激。

作为参考，这里是调用这个的 .cshtml 页面：

@page
@using WebPortal.ComponentLibrary.Common
@model WebPortal.Pages.Reporting.ReportingModel
@{
    ViewData["Title"] = "Reports";
}

<div class="text-center">
    <h1 class="display-4">Welcome to the Web Portal</h1>

    <component type="typeof(SearchBar)" render-mode="static" />

</div>

我已经尝试了渲染模式的每个选项，但没有运气。

我还添加了“services.AddServerSideBlazor()”和“endpoints.MapBlazorHub();” 到 Startup.cs 页面。

PS：作为一个旁注问题，没什么大不了的，我看到一些对使用语法调用的组件的引用

<SearchBar />

，但这对我不起作用。那已经被删除了吗？我更喜欢这种语法，因为它看起来更干净。

标签： razorblazorrazor-components

解决方案

您似乎将 Razor 和 Service Side Pages 与 Blazor 混为​​一谈。你想发展什么？如果是 Blazor，请观看最新的 Blazor 视频并开始部署标准 Blazor 模板。您的代码在 BLAZOR 页面中工作。

推荐阅读