Blazor 服务器 Dotnet6 EditForm CSS 问题

Question

我有一个 Blazor Server dotnet 5 应用程序需要升级到 dotnet 6。这是一个小应用程序，因此我没有转换，而是使用 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();
}

Blazor 服务器 Dotnet6 EditForm CSS 问题

Blazor Server Dotnet6 EditForm CSS Issues

css

blazor

blazor-server-side

.net-6.0