ASP.NET core razor 页面：<a> 标签未执行 @onclick 中写入的内容

Question

所以我有这行代码（页面名称：壁橱）：

<a href="javascript:void(0);" class="btn" id="addText" onclick="AddPart()">Add Part</a>

这是 addPart() 函数：

async Task AddPart()
{
    data_.Parts.Add(new CloPart());
    DataService.DB.Add(data_.Parts[data_.Parts.Count - 1]);

    await JSRuntime.InvokeVoidAsync("handleAddPartButtonClick", DataService.DB[DataService.DB.Count - 1].PartName);
}

据我了解，AddPart() 函数将调用 javascript 函数，这就是该函数：

function handleAddPartButtonClick(PartName) {
    // addText.innerHTML += "<p>\n${PartName}</p>"
    DotNet.invokeMethodAsync('ClosetUI164', 'AddPart()');
    console.log("linked correctly");
}

我确实使用正确的路径正确包含了标签。

但是 javascript 仍然没有连接到 Closet 页面。你认为这是为什么？

我尝试了太多的事情，几乎用了 6 个多小时的时间来聊天 gpt，但我对 razor web 应用程序很陌生，这是我关于该主题的第一个项目，之前没有学习过任何相关内容，所以我在这里缺乏信息。

Answer 1

但是 javascript 仍然没有连接到 Closet 页面。

如果你想调用Closet页面，在asp.net core中你可以尝试：

<a asp-page="Closet" class="btn" id="addText" >Add Part</a> 

使用浏览器中的“查看源代码”来检查生成的标记。生成的 HTML 的一部分如下所示：

 <a class="btn" id="addText" href="/Closet">Add Part</a> 

如果您想使用

onclick="AddPart()"

拨打

function AddPart()

，您可以尝试：

<a  class="btn" id="addText" onclick="AddPart()">Add Part</a>
<script>
    function AddPart() {
        alert("hello");
    }

</script>

如果您想调用服务器端事件处理程序，您可以在 Razor Pages 中使用命名处理程序方法，例如：

在cshtml中：

<form asp-page-handler="AddPart" method="post">
    <button class="btn btn-default">Add Part</button>
</form>

在cshtml.cs中：

public async Task<IActionResult> OnPostAddPart()
{
...//do your staff
    return RedirectToPage();
    
}

此外，您可以阅读ASP.NET Core 中的 Razor Pages 简介和 ASP.NET Core 中的锚点标记帮助器以及此链接：Asp.Net Razor Pages OnClick 未触发了解更多信息。