时间戳

首页 > 解决方案 > 如何在html中显示价值？

c# - 如何在html中显示价值？

问题描述

我有价值List<Studio>，当我尝试 Console.WriteLine 时，价值在那里，我尝试使用一些文本来检查它，每当我点击搜索时，url 都会给出 url 和问号（查询），但仍然没有得到文本测试如下所示

代码

        @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" @onclick=@(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());
        }

    }

每当我点击搜索时，最后一个 url 都会给我问号，即使有数据也没有显示任何内容，我该如何解决这个问题？

标签： c#blazor

解决方案

这似乎是一个非常微妙的问题：

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

你在这里实际上有一个“提交”按钮作为按钮标签，没有type attribute默认提交。现在，由于此按钮元素嵌入在表单元素中，因此当您单击按钮时会执行传统的提交操作，执行代码流会离开 Blazor SPA 的空间边界，然后空手返回。我猜接下来会执行 PostRequest 方法；我无法验证这一点，因为我没有运行任何代码来验证这一点。

但是，您应该将按钮元素的类型设置为button，否则，正如我之前所说，它默认为“提交”按钮：

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

为什么要使用表单元素？您想对您的服务器执行提交操作吗？Blazor 没有这样的概念。Blazor 是一个 SPA 应用程序，所有代码都在一个可怜的页面中执行。只需将其删除。

我建议您改用 Blazor 内置表单组件。

注意：经过一番思考，我猜想是先执行 PostRequest 方法，然后才会发生 post back 提交动作，这就是为什么您的组件的 UI 没有反映调用 PostRequest 方法所做的状态更改的原因。请验证这一点并通知我们。

推荐阅读