c# - Blazor - 在异步获取请求后单击按钮更新 HTML

问题描述

现在已经在这两天了。有很多类似的问题，但没有一个答案对我有用。我来自将 C# 用于控制器端，将纯 JavaScript 用于 ASP.NET Core 中的所有客户端。我熟悉 .NET 环境，但在使用 Blazor 时确实很吃力。

问题：要开始使用 Blazor，我要做的第一件事是设置一个非常简单的视图（剃须刀页面，因为这是 Blazor）。单击按钮时，我正在从控制器调用 HttpGet - 我可以在浏览器调试（网络选项卡）中验证调用 DID 是否通过，并返回一个 Notes 对象，其中包含我在控制器中给它的值。我有这个代码作为我的剃须刀页面：

<div class="row">
    <div class="col-md-3">
        <input class="form-control" placeholder="Insert Random Value" @bind="@theResponse.note1" />
    </div>
    <div class="col-md-1">
        <button class="btn btn-warning" @onclick="TestPost">Test POST</button>
    </div>
</div>



@code {

    Notes theResponse = new Notes();

    private async Task TestPost()
    {
        theResponse = await Http.GetFromJsonAsync<Notes>("Test/Action4");
    }


}

备注对象：

    public class Notes
    {
        public string note1 { get; set; }
    }

控制器：

namespace BlazorTry1.Server.Controllers
{
    [ApiController]
    [Route("[controller]")]
    public class TestController : Controller
    {
        [HttpGet]
        [Route("[action]")]
        [ActionName("Action4")]
        public async Task<JsonResult> myStringResult1()
        {
            Notes myNotes = new Notes();
            myNotes.note1 = "YouHitTheGetRequest";
            var yourdata = myNotes;
            return Json(new { data = yourdata });
        }
    }
}

但是，在 Visual Studio 中进行调试时 - 'theResponse' 通过分步调试保持为空。

我在 stackoverflow 上阅读的其他答案确认在当前 Blazor 中，StateHasChanged 在 Task 方法结束时自动调用。我尝试手动添加，当然没有改变。

我确定我在这里遗漏了一些非常明显的东西——但我在剃须刀页面上尝试了很多不同的想法，但我没有成功。我读了@bind

@bind 属性完成两个独立（但相关）的任务：

将表达式绑定到 <Input... 组件的值

绑定将触发组件的 ValueChanged 属性的委托

我确定我在解释这个错误，但我想象当 Notes 对象的属性发生更改时，会触发 ValueChanged 事件。

编辑：编辑以纠正语法。

标签： c#asp.netblazor.net-5webassembly

问题出在你的控制器上替换这个

  public async Task<JsonResult> myStringResult1()
        {
            Notes myNotes = new Notes();
            myNotes.note1 = "YouHitTheGetRequest";
            var yourdata = myNotes;
            return Json(new { data = yourdata });
        }

有了这个

 public async Task<ActionResult<Notes>> myStringResult1()
        {
            Notes myNotes = new Notes();
            myNotes.note1 = "YouHitTheGetRequest";
            return myNotes; 
        }

c# - Blazor - 在异步获取请求后单击按钮更新 HTML

问题描述

解决方案

推荐阅读