How to show value into html?

I have value on List<Studio> and when i tried to Console.WriteLine the value are there and i tried to check it using some text, whenever i click search the url will be given url and question mark (query) but still didn’t get text test as given bellow

Code

        @page "/report_studio"
    @using DTO.Dates
    @using Models.BookingCrew
    @using System.Net.Http.Json
    @using Newtonsoft.Json
    @using System.Net

    <style>

    </style>
    <header>

    </header>

    <body>
        <header>
            <div>
                <form class="p-4">
                    <div class="row">
                        <div class="form-group col">
                            <label for="monthInput">Month</label>
                            <select class="custom-select" id="inputGroupSelect01" @bind="monthlies">
                                <option selected>Choose...</option>
                                <option value="1">January</option>
                                <option value="2">February</option>
                                <option value="3">March</option>
                            </select>
                        </div>
                        <div class="form-group col">
                            <label for="yearInput">Year</label>
                            <select class="custom-select" id="inputGroupSelect01" @bind="yearlies">
                                <option selected>Choose...</option>
                                <option value="2020">2020</option>
                                <option value="2021">2021</option>
                                <option value="2022">2022</option>
                            </select>
                        </div>
                    </div>
                    <button class="mt-2 btn btn-outline-success" @[email protected](async () => await PostRequest())>search</button>
                </form>
            </div>
            <div>
            </div>
            @if(reportStudios.Any())
            {
                <h1>Test</h1>
            }
        </header>
    </body>

    @code{
        public string test = "helo";
        private String responseBody;
        private int monthlies;
        private int yearlies;
        public List<Studios> reportStudios = new List<Studios>();
        HttpClient httpClient = new HttpClient();

        private async Task PostRequest()
        {
            Console.WriteLine(reportStudios.Any());
            var requestMessage = new HttpRequestMessage()
            {
                Method = new HttpMethod("POST"),
                RequestUri = new Uri("https://localhost:5001/api/reportstudio/detailstudiobymonth"),
                Content = JsonContent.Create(new MonthYear
                {
                    month = monthlies,
                    year = yearlies,
                })
            };

            var response = await httpClient.SendAsync(requestMessage);
            responseBody = await response.Content.ReadAsStringAsync();
            reportStudios = JsonConvert.DeserializeObject<List<Studios>>(responseBody);

            test = "checks";

            Console.WriteLine(reportStudios.Any());
        }

    }

and whenever i click search the last url give me questionmark and didn’t show anything even though the data is there how can i solve this?

Answer

This seems to be a very subtle issue:

<button class="mt-2 btn btn-outline-success" @[email protected](async () => await PostRequest())>search</button>

What you actually have here is a “submit” button as button tags without a type attribute default to submit. Now since this button element is embedded within a form element, when you click on the button a traditional submit action is performed, the execution code flow leaves the space boundaries of your Blazor SPA, and then returns with empty hands. I guess that next the PostRequest method is executed; I can’t verify this, as I’m not running any code to verify this.

However, you should set the type of the button element to button, otherwise, as I’ve previously said, it defaults to “submit” button:

<button type="button" <.............>)>search</button>

Why do you use the form element? Do you want to perform submission action to your server ? Blazor does not have such a concept. Blazor is an SPA application, and all the code is executed in a single miserable page. Just remove it.

I’d suggest you use the Blazor built-in Forms components instead.

Note: After a bit of thinking, I guess that the PostRequest method is executed first, and only then the post back submit action takes place, which is why your component’s UI does not reflect the state changes made by the call to the PostRequest method. Please verify this and inform us.

Leave a Reply

Your email address will not be published. Required fields are marked *