Blazor 服务器 Dotnet6 EditForm CSS 问题

Question

我有一个需要升级到 dotnet 6 的 Blazor Server dotnet 5 应用程序。它是一个小型应用程序，因此我没有进行转换，而是使用 VS2022 v17.0.4 中的 Blazor Server 模板从头开始创建了一个新应用程序

我的问题是 EditForm 中控件的样式。

在 dotnet5 站点上，InputText 显示在其标签旁边，并且为模型的布尔属性正确呈现了一个复选框，如下所示：

但是，在dotnet6应用上使用相同的标记，InputText显示在标签下方，并且没有呈现复选框，如下所示：

F12 开发工具没有显示错误。我已经将一个简单的复制项目推到了这个GitHub Repo

有什么想法吗？

Answer 1

我在下面添加了您的 Repo 中重新格式化的页面版本。我假设您正在使用类中的 Bootstrap。

我看不到您的旧页面，但假设它是相同的，那么您的主要问题是将输入控件设置为列。我不确定这在 Bootstrap 4 中是如何工作的，但 Net6.0 的模板使用 Bootstrap 5。BS 4 和 5 之间存在一些重大变化：这可能是其中之一。请参阅Bootstrap 5 docs for forms。

@page "/"

<PageTitle>Index</PageTitle>

<h4>Inputcheckbox not rendered correctly. Also, formatting seems wrong - position of text box for Business Area</h4>

<div class="container-fluid">
    <div class="row">
        <div class="col mb-2">
            Welcome to your new app.
        </div>
    </div>
    <EditForm Model="@ConfigVm">
        <div class="form-group row">
            <label class="col-12 col-sm-3 col-form-label" for="BusinessArea">Business Area: </label>
            <div class="col-12 col-sm-6">
                <InputText id="BusinessArea" class="form-control" @bind-Value="@ConfigVm.BusinessArea" placeholder=""></InputText>
            </div>
            <div class="col-12 col-sm-3">
                <ValidationMessage For="@(() => ConfigVm.BusinessArea)" />
            </div>
        </div>
        <div class="form-group row">
            <label for="RouteInboundSmsToEmail" class="col-12 col-sm-3 col-check-label">Route Inbound Sms to Email: </label>
            <div class="col-12 col-sm-1">
                <InputCheckbox id="RouteInboundSmsToEmail" class="form-check-input" @bind-Value="@ConfigVm.RouteInboundSmsToEmail" placeholder=""> Route</InputCheckbox>
            </div>
        </div>
    </EditForm>
    <div class="row">
        <div class="col mt-5 mb-2">
            Entered Values
        </div>
    </div>
    <div class="row m-2">
        <div class="col-12 col-sm-3">
            BizArea =
        </div>
        <div class="col-12 col-sm-9">
            @ConfigVm.BusinessArea
        </div>
    </div>
    <div class="row m-2">
        <div class="col-12 col-sm-3">
            CheckboxValue =
        </div>
        <div class="col-12 col-sm-9">
            @ConfigVm.RouteInboundSmsToEmail
        </div>
    </div>

</div>

@code
{
    public ConfigViewModel ConfigVm { get; set; } = new ConfigViewModel();
}