【问题标题】:Blazor - update HTML on button click following async get requestBlazor - 在异步获取请求后单击按钮更新 HTML
【发布时间】:2021-09-27 06:48:27
【问题描述】:

已经在这里呆了两天了。有很多类似的问题,但没有一个答案对我有用。我来自将 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 属性完成两个独立(但相关)的任务:

  1. 将表达式绑定到
  2. 绑定将触发组件的 ValueChanged 属性的委托

我确定我的解释是错误的,但我认为当 Notes 对象的属性发生更改时,会触发 ValueChanged 事件。

编辑:编辑以纠正语法。

【问题讨论】:

标签: c# asp.net blazor .net-5 webassembly


【解决方案1】:

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

  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; 
        }

【讨论】:

  • 这行得通。你能向我解释为什么后者有效而不是原始有效吗?在带有 JavaScript 的 MVC 中,我一直使用 Task 并且它有效。这里有什么区别?也非常感谢你花时间帮助我解决这个问题。我真的很感激。
猜你喜欢
  • 1970-01-01
  • 2021-10-12
  • 2021-02-27
  • 2019-08-25
  • 2022-08-15
  • 2020-11-20
  • 1970-01-01
  • 2020-01-12
  • 1970-01-01
相关资源
最近更新 更多