我只是想创建一个简单的应用程序，当按下按钮时，它将获取一段文本并用另一个字符串替换某个字符串。由于某种原因，当按下“替换”按钮时，它没有给我新的字符串。
我尝试了各种绑定选项，但在理解为什么这不起作用时遇到了一些麻烦。我一定错过了一个简单的部分，但看不到它。
还有一种方法可以使用内置的剪贴板功能来复制“过滤”后的文本？我看到了一种用 JS 实现的方法，但我想严格使用 c#。
这是我的代码：
agenthelper.razor
@page "/agent-helper"
<div class="input-container">
<label for="originalString">Input string</label>
<div class="input-wrapper">
<input id="originalString" name="originalString" type="text" @bind="originalString" title="Input string" />
</div>
</div>
<div class="button-container">
<button @onclick="ReplaceString" class="button-style button-one">Replace</button>
<button @onclick="Copy" class="button-style">Copy</button>
</div>
<div class="input-container">
<label for="modifiedString">Cleaned string</label>
<div class="input-wrapper">
@* <input id="modifiedString" name="modifiedString" type="text" value="@modifiedString" readonly /> *@
<input id="modifiedString" name="modifiedString" type="text" @bind="modifiedString" readonly />
</div>
</div>
@code {
private string originalString;
private string modifiedString;
private void ReplaceString()
{
@* modifiedString = originalString.Replace("$env:SystemDrive\\", "D:\\"); *@
modifiedString = originalString.Replace("hello test", "test worked");
StateHasChanged();
}
private async Task Copy()
{
}
}
App.razor
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="app.css" />
<link rel="stylesheet" href="Team.Helpers.styles.css" />
<link rel="icon" type="image/png" href="favicon.png" />
<HeadOutlet />
</head>
<body>
<Routes />
<script src="_framework/blazor.web.js"></script>
</body>
</html>
尝试使用各种绑定
问题可能是您没有正确设置Interactive Web assembly渲染模式。
首先，您需要通过向 DI 注册所需的服务来启用支持。
// Register services
builder.Services.AddRazorComponents()
.AddInteractiveWebAssemblyComponents();
// Use Interactive WebAsssembly
app.MapRazorComponents<App>()
.AddInteractiveWebAssemblyRenderMode();
然后根据您想要定义的渲染模式
要在页面级别执行此操作，您应该在页面顶部添加以下内容：
@rendermode InteractiveWebAssembly
当您正确设置后，它应该可以工作。为了更好地理解为什么这是必要的以及幕后发生的事情，我会推荐 .NET Conf 2023 中的这个 YouTube 视频：.NET 8 中使用 Blazor 的全栈 Web UI | .NET 大会 2023.
不幸的是，所有这些关于渲染内容的时间和地点的相当复杂的主题在这里需要详细介绍，但视频涵盖了要点，并且还有更多资源。
有关更多详细信息，请参阅 Micorsoft 文档 - ASP.NET Core Blazor 渲染模式。
如果您使用自动模式创建项目，请按以下方式修改App：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="app.css" />
<link rel="stylesheet" href="Team.Helpers.styles.css" />
<link rel="icon" type="image/png" href="favicon.png" />
<HeadOutlet @rendermode="InteractiveServer" />
</head>
<body>
<Routes @rendermode="InteractiveServer" />
<script src="_framework/blazor.web.js"></script>
</body>
</html>
这将帮助您开始。
如果您想使用 WebAssembly，请添加一个项目并选择 WebAssembly 和 Global。