表单布局

概览

• 单列
• 双列

---

单列

示例：

名称 字段说明

发行日期

类别 - 请选择 - 喜剧 战争 英雄

价格

---

<form method="post" asp-page-handler="SingleCol">
    <div class="card">
        <div class="card-body pb-0">
            <div class="form-row">
                <div class="col-md-12">
                    <div asp-validation-summary="All" class="text-danger"></div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label asp-for="Movie.Title"></label>
                        <span class="text-success">字段说明</span>
                        <input asp-for="Movie.Title" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label asp-for="Movie.ReleaseDate"></label>
                        <input asp-for="Movie.ReleaseDate" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label asp-for="Movie.Genre"></label>
                        <select asp-for="Movie.Genre" class="form-control" asp-items="Html.GetEnumSelectList<GenreType>()">
                            <option value="">- 请选择 -</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label asp-for="Movie.Price"></label>
                        <input asp-for="Movie.Price" class="form-control" />
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group col-md-12">
                    <hr />
                    <input type="submit" value="创建" class="btn btn-primary px-5 sg-ajax-submit" />
                </div>
            </div>
        </div>
    </div>
</form>

---

双列

示例：

<div class="card">
    <div class="card-body pb-0">
        <form method="post" asp-page-handler="MultiCol">
            <div class="form-row">
                <div class="col-md-12">
                    <div asp-validation-summary="All" class="text-danger"></div>
                </div>
                <div class="form-group col-md-6">
                    <label asp-for="Movie.Title"></label>
                    <span class="text-success">字段说明</span>
                    <input asp-for="Movie.Title" class="form-control" />
                </div>
                <div class="form-group col-md-6">
                    <label asp-for="Movie.ReleaseDate"></label>
                    <input asp-for="Movie.ReleaseDate" class="form-control" />
                </div>
                <div class="form-group col-md-6">
                    <label asp-for="Movie.Genre"></label>
                    <select asp-for="Movie.Genre" class="form-control" asp-items="Html.GetEnumSelectList<GenreType>()">
                        <option value="">- 请选择 -</option>
                    </select>
                </div>
                <div class="form-group col-md-6">
                    <label asp-for="Movie.Price"></label>
                    <input asp-for="Movie.Price" class="form-control" />
                </div>
            </div>
            <div class="row">
                <div class="form-group col-md-12">
                    <hr />
                    <input type="submit" value="创建" class="btn btn-primary px-5 sg-ajax-submit" />
                </div>
            </div>
        </form>
    </div>
</div>