Been at this for two days now. There are many similar questions, but none of the answers have successfully worked for me. I come from using C# for the controller side and plain JavaScript for everything client side in ASP.NET Core. I am familiar with the .NET environment but really struggling with Blazor.

Problem: To get started with Blazor, the first thing I'm trying to do is set up a very simple view (razor page since this is Blazor). On a button click, I am calling an HttpGet from a controller - I can verify in browser debugging (network tab) that the call DID go through, and a Notes object was returned with the values I gave it in the controller. I have this code as my razor page:

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


}

Notes object:

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

Controller:

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

However, in debugging within Visual Studio - 'theResponse' remains null through step debugging.

Other answers I've read on stackoverflow confirm that in current Blazor, StateHasChanged is automatically called at the end of a Task method. I tried manually adding that, of course no change.

I'm sure I'm missing something really obvious here - but I've tried quite a variation of ideas on the razor page and I am not succeeding. I read @bind

The @bind attribute accomplishes two separate (but related) tasks:

1. Binds an expression to the value of the <Input... component
2. Binds a delegate that will trigger the component's ValueChanged property

I'm interpreting this wrong I'm sure but I imagined that when the Notes object had a property changed, that would fire the ValueChanged event.

Edit: Edited to correct grammar.

CodePudding user response：

the problem is in your controller replace this

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

with this

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

CodePudding user response：

First, make sure that class Notes { ... } is in the Shared project and that Client and Server use the same class.

In the client, make sure the button does not cause an unwanted submit:

<button type="button" class="btn btn-warning" @onclick="TestPost">Test POST</button>

Then simplify the controller:

[ApiController]
[Route("[controller]")]
public class TestController : Controller
{
    [HttpGet]
    //[Route("[action]")]
    [ActionName("Action4")]   // I would omit this and simplify the URL in the Client
    public async Task<Notes> myStringResult4()
    {
        Notes myNotes = new Notes();
        myNotes.note1 = "YouHitTheGetRequest";
        return myNotes;
    }
}

The action doesn't even have to be async but I left that as it was.