ASP.NET视图中输入元素不显示问题求助

核心问题梳理 #

1. 重复HTML属性引发解析异常：多个<input>标签重复定义了class="form-control"，HTML规范不允许同一元素重复设置相同属性，浏览器解析时出现异常，直接导致输入框无法正常渲染。
2. 属性语法错误破坏解析逻辑：Email输入框的placeholder属性引号嵌套混乱，语法错误导致后续HTML代码解析失败，连带影响下方提交按钮的渲染。
3. 布局类冲突导致元素错乱：表单使用form-inline类，该类强制表单元素横向排列，与内部Bootstrap栅格（row+col-md-*）的垂直布局逻辑冲突，引发元素布局错乱、被隐藏。

修复后的完整代码 #

@model Boekingssysteem.ViewModels.BewerkDocentViewModel
@{
    ViewData["Title"] = "Docent bewerken";
}

<div class="row">
    <div class="col-md-6">
        <h1>@ViewData["Title"]</h1>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <form asp-action="BewerkDocent" method="post" class="justify-content-center">
            <input type="hidden" asp-for="RolId" />
            <input type="hidden" asp-for="Rnummer" />
            <div asp-validation-summary="ModelOnly" class="text-danger"/>
            <div class="row formRow">
                <div class="form-group col-md-6">
                    <input type="text" disabled class="form-control" id="inputRnummer" asp-for="Rnummer" />
                    <span asp-validation-for="Rnummer" class="text-danger"></span>
                </div>
                <div class="form-group col-md-6 align-bottom">
                    <button type="button" class="btn btn-outline-primary w-100">Richtingen</button>
                </div>
            </div>
            <div class="row formRow">
                <div class="form-group col-md-6">
                    <label asp-for="Voornaam" class="control-label">@Html.DisplayNameFor(model => model.Voornaam)</label>
                    <input type="text" class="form-control" asp-for="Voornaam" />
                    <span asp-validation-for="Voornaam" class="text-danger"></span>
                </div>
                <div class="form-group col-md-6">
                    <label asp-for="Achternaam" class="control-label">@Html.DisplayNameFor(model => model.Achternaam)</label>
                    <input type="text" class="form-control" asp-for="Achternaam" />
                    <span asp-validation-for="Achternaam" class="text-danger"></span>
                </div>
            </div>
            <div class="form-group formRow">
                <label asp-for="Email" class="control-label">@Html.DisplayNameFor(model => model.Email)</label>
                <input type="email" class="form-control" asp-for="Email" placeholder="rnummer@thomasmore.be" />
                <span asp-validation-for="Email" class="text-danger"></span>
            </div>
            <br>
            <input type="submit" class="btn btn-primary" value="Bevestig"/>
        </form>
    </div>
</div>

关键修复说明 #

• 移除所有<input>标签中重复的class="form-control"属性
• 修正Email输入框的placeholder属性，改为标准写法placeholder="rnummer@thomasmore.be"
• 移除表单的form-inline类，避免与栅格布局冲突；保留justify-content-center实现表单居中
• 去掉Achternaam所在div多余的style="display: inline-block"，栅格布局已足够控制显示方式
• 简化@Html.DisplayNameFor的写法，model => model.Voornaam即可，无需this.Model

内容的提问来源于stack exchange，提问作者gilleslag