Why i cannot use input values in Blazor?

Question

i have a problem with my Blazor app, there are 2 input and 1 button

<div class="form-group">
    <label class="form-label">Фильм</label>
    <input type="text" class="form-control" @bind="@filmname" placeholder="Введите название" required>
</div>

<div class="form-group">
    <label>Год</label>
    <input type="text" class="form-control" @bind="@year" placeholder="Введите год выхода фильма">
    <small class="form-text text-muted">Это необязательное поле</small>
</div>

<div class="col-4">
    <button class="btn btn-primary" id="sendbutton" type="submit" @onclick="GetData" disabled=@isLoading>Получить результат</button>
</div>

In GetData method i call another method with arg like "filmname + year"

@code {
    private List<string>? answers = null;
    private bool isLoading = false;
    public string filmname = "";
    public string year = "";
    private int check = 1;

    private async Task GetData()
    {
        check = 0;
        isLoading = true;
        string Text = "конец света";
       @* if (year != "")
            Text = filmname + " " + year;
        else
            Text = filmname;*@
    answers = new List<string>();
    check = 0;
    answers = await Data.Exec.GetScoreAsync(Text);
    isLoading = false;
    check = 1;
    StateHasChanged();
}
}

But it doesnt show up on the page, btw if its important when i define string Text in GetData and dont touch input forms all works good. Whats the problem here?

Try to show elements of "answers" like this:

 @if (check == 0)
{
    <p>Loading [@answers?.Count] ...</p>
    <div class="spinner-border" role="status">
        <span class="sr-only">Loading...</span>
    </div>
}

@if (answers == null || answers.Count == 0)
{
    <p>no data</p>
}
else
{
    <p>@answers[0]</p>
    <p>@answers[1]</p>
    <p>@answers[2]</p>
    <p>@answers[3]</p>
}

Getdata

public static async Task<List<string>> GetScoreAsync(string FilmName)
    {
        List<string> alldata = new List<string>();
        List<string> comments = await Program.ParserExec(FilmName, false);
        List<string> scores = new List<string>();
        List<string> comments_new = Norm(comments);
        List<string> positive = new List<string>();
        List<string> negative = new List<string>();
        foreach (string comment in comments_new)
        {
            ModelInput input = new ModelInput()
            {
                Review = comment
            };
            ModelOutput result = ConsumeModel.Predict(input);
            scores.Add(result.Prediction);
            if (result.Prediction == "0")
                negative.Add(result.Prediction);
            else
                positive.Add(result.Prediction);
        }

        double last_score = 0;
        foreach (string score in scores)
            last_score += Convert.ToInt32(score);

        last_score /= scores.Count;
        last_score *= 10;
        alldata = new List<string>();
        alldata.Add(Math.Round(last_score, 1).ToString());
        alldata.Add(scores.Count.ToString());
        alldata.Add(positive.Count.ToString());
        alldata.Add(negative.Count.ToString());
        Dictionary<string, double> scoresDictionary = ExecIvi.Exec(FilmName);
        return alldata;

"But it doesnt show up on the page". What doesn't show up where? The only display you've shown us is a form and one function that get's a thing called answers. — MrC aka Shaun Curtis
– MrC aka Shaun Curtis, Commented Apr 27, 2022 at 17:56
public static async Task<List<string>> GetScoreAsync(string FilmName) returns List<string>, it works fine because when i define Text in GetData all is okay — vinnyi_pogrebok
– vinnyi_pogrebok, Commented Apr 27, 2022 at 20:21
Could you add the code for that function as well? If I replace that line with answers.Add(Text) and uncomment your if else statement, all works fine. So I'm thinking your issue is within there? — Sarah Cox
– Sarah Cox, Commented Apr 27, 2022 at 20:26

vinnyi_pogrebok · Accepted Answer · 2022-04-28 18:22:37Z

1

stupid mistake, all my code was in tag like that:

<form>
  all my code here
</form>

But in @MrC aka Shaun Curtis answer ther is no this form tag and i drop it from my code, now all works as i expected, thanks for help

answered Apr 28, 2022 at 18:22

vinnyi_pogrebok

233 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MrC aka Shaun Curtis Over a year ago

No problem - point 2!!!

MrC aka Shaun Curtis · Accepted Answer · 2022-04-28 07:22:26Z

0

So here's a demo working version of what you've shown us so far:

@page "/"

<div class="form-group">
    <label class="form-label">Фильм</label>
    <input type="text" class="form-control" @bind="@filmname" placeholder="Введите название" required>
</div>

<div class="form-group">
    <label>Год</label>
    <input type="text" class="form-control" @bind="@year" placeholder="Введите год выхода фильма">
    <small class="form-text text-muted">Это необязательное поле</small>
</div>

<div class="col-4">
    <button class="btn btn-primary" id="sendbutton" type="submit" @onclick="GetData" disabled=@isLoading>Получить результат</button>
</div>


@if (check == 0)
{
    <p>Loading [@answers?.Count] ...</p>
    <div class="spinner-border" role="status">
        <span class="sr-only">Loading...</span>
    </div>
}

@if (answers == null || answers.Count == 0)
{
    <p>no data</p>
}
else
{
    <p>@answers[0]</p>
    <p>@answers[1]</p>
    <p>@answers[2]</p>
    <p>@answers[3]</p>
}

@code {
    private List<string>? answers = null;
    private bool isLoading = false;
    public string filmname = "";
    public string year = "";
    private int check = 1;

    private async Task GetData()
    {
        check = 0;
        isLoading = true;
        string Text = "конец света";
        @* if (year != "")
            Text = filmname + " " + year;
            else
            Text = filmname;*@
        answers = new List<string>();
        check = 0;
        answers = await GetAnswersAsync();
        isLoading = false;
        check = 1;
        // not needed;
        // StateHasChanged();
    }

    private async Task<List<string>> GetAnswersAsync()
    {
        await Task.Delay(1000);
        return new List<string> { "France", "Portugal", "Spain", "Australia" };
    }
}

If you run this code it does what it's supposed to do. I've substituted your GetScoreAsync for a simple async emulator, but it does the same thing.

So:

Put a break point in after your call to GetScoreAsync and verify it returns the list you are expecting.
Compare your code with my code and figure out what's different, or what you haven't shown us. There's something or it would work!

Note: Everyone tries to add a StateHasChanged to solve a rendering problem when the problem almost always lies elsewhere.

answered Apr 28, 2022 at 7:22

MrC aka Shaun Curtis

32.4k3 gold badges27 silver badges56 bronze badges

3 Comments

Sarah Cox Over a year ago

I would also like to add that you can take out the duplicate "check = 0" right after setting answers to a new list. And to make it more readable in the html instead of accessing answers using the index (answers[0]) you could use a foreach loop to display all answers.

vinnyi_pogrebok Over a year ago

Thanks for your answer, i've tried to exec your code (without my getscore method), and i notice the same problem: if i push the button without filling inputs all works fine, but when i write down smth in inputs then it doesnt work, but now i know that problem not in my async method

MrC aka Shaun Curtis Over a year ago

@vinnyi_pogrebok . Was that with my test page because I've just checked it again and it works whether or not I fill in data in the inputs,

Collectives™ on Stack Overflow

Why i cannot use input values in Blazor?

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related