How to view return data on Bootstrap modal

Question

I'm building a test application in Blazor and WEB API. I'm trying to view the return data (string) of a simple Delete (id) endpoint, it's a deletion message from di server Web API, but I don't understand why the modal doesn't update.

This is the boostrap modal:

<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
      </div>
      <div class="modal-body">
        <label class="form-label">@RetunMessage</label>
      </div>
      <div class="modal-footer">
    <button type="button" class="btn btn-primary" @onclick="() => OK()">Ok</button>
      </div>
    </div>
  </div>
</div>

The code:

public string RetunMessage = string.Empty;
public void OK()
{
    Delete(1);
}
public async Task Delete(int id)
{
    HttpClient httpClient = new HttpClient();
    var URI = new Uri("https://localhost:7008/api/Employee/" + id.ToString());
    var deleteResult = await httpClient.DeleteAsync(URI);

    if (deleteResult.IsSuccessStatusCode)
    {
        var responseContent = await deleteResult.Content.ReadAsStringAsync();
        RetunMessage = responseContent
    }
    else
    {
        RetunMessage = "ERR";
    }
}

The var RetunMessage is set inside the async Task, but why the change is not reflected in the html?

Anyone have any suggestions?

Answer 1

-> In Blazor,when a component's state has changed so that it can re-render the component and update UI.

-> In you case, you updating the retunMessage variable inside async method but blazor is not know about this change.

-> please try my way :- you can use Blazor's 'StatehasChanged()' method to manually trigger re-rendering of the component after updating RetunMessage variable.

-> modify boostrap modal :-

<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
      </div>
      <div class="modal-body">
        <label class="form-label">@RetunMessage</label>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" @onclick="OK">Ok</button>
      </div>
    </div>
  </div>
</div>

-> code:-

@code {
    public string RetunMessage = string.Empty;

    public async Task OK()
    {
        await Delete(1);
    }

    public async Task Delete(int id)
    {
        HttpClient httpClient = new HttpClient();
        var URI = new Uri("https://localhost:7008/api/Employee/" + id.ToString());
        var deleteResult = await httpClient.DeleteAsync(URI);

        if (deleteResult.IsSuccessStatusCode)
        {
            var responseContent = await deleteResult.Content.ReadAsStringAsync();
            RetunMessage = responseContent;
        }
        else
        {
            RetunMessage = "ERR";
        }

        // Notify Blazor that the state has changed
        StateHasChanged();
    }
}