Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

How can I invoke StateHasChanged() or update my UI from an implemented interface within a .net Blazor .RAZOR page?

$
0
0

I have a Blazor Server application. With this application, I am "talking" with MistralAI. This REST API endpoint has a streaming token you can set that will allow it to "stream" responses to you.

In my application, I have a service that contacts MistralAI for this conversation. I have implemented the Observer pattern so that I can update my .RAZOR page whenever I get a response from MistralAI:

MyService.cs:

public class MyService {    private List<Reader> readers = new List<Reader>();    private AIResponse response;    public async Task<AIResponse> myTask(){        Reader newReader = new MyPage();        readers.Add(newReader);        // Send requests to and receive responses from MistralAI        addWord(receivedJSONString);        notifyReaders();    }    public void notifyReaders()    {        foreach (var reader in readers) {            reader.updateWords(response);        }    }    public void addWord(AIResponse newResponse)    {        response = newResponse;    }}public interface Reader {    void updateResponses(AIResponse newResponse);}

MyPage.razor

@implements Reader<div>    @foreach(var newResponse in responses){        @newResponse    }</div>@code {    private List<AIResponse> responses { get; set; } = new List<AIResponse>();    private async Task QueryAI(){        AIResponse streamingAIResponse = await myService.myTask(someString);    }    public void updateResponses(AIResponse newResponse){        responses.Add(newResponse);        Console.Write(newResponse);        StateHasChanged();    }}

I can successfully get the responses to my .RAZOR page, I can see them in the console when I Console.Write, but I cannot update the UI with the new content; I keep getting the error The render handle is not yet assigned.

So, how can I use the StateHasChanged() from within my implemented interface?

Or, how can I update my UI with the new content?


UPDATES:

@code {    [Inject]    public IMyService myService { get; set; }    private String queryString { get; set; } = null;    private List<AIResponse> responses { get; set; } = new List<AIResponse>();    private Conversation conversation { get; set; }    private ElementReference aiQuery;    protected override void OnInitialized()    {        if (conversation == null)        {            conversation = new onversation();            conversation.messages = new List<Message>();        }    }    private async Task QueryAI()    {        Message message = new Message("user", queryString);        conversation.messages.Add(message);        StreamingQueryResponse streamingAIResponse = await myService.getStreamingAIResponseAsync(conversation);    }    public void updateWords(StreamingQueryResponse newResponse)    {        responses.Add(newResponse);        Console.Write(newResponse);    }}

Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>