c# - 带有 Html.EditorFor 的表格

Question

我正在尝试使用表格创建表单。我总共有 7 个字段。我希望完成的是一行有 3 个字段，第二行有 3 个字段，最后一行将是扩展的最后一个字段。我尝试使用 colspan，但是 NextAction 的 editorfor box 并没有一直扩展。该字段的右侧有空白。我已经尝试创建一个 CSS 类来消除边距，但是效果不佳。

如何才能让 NextAction 字段一直延伸到最后一列？

下面我为表格的最后两行添加了代码。

            <table>
            <tr>
                <td>
                    @Html.LabelFor(model => model.Customer, htmlAttributes: new { @class = "control-label labelpadding" })
                </td>
                <td style="width:300px">
                    @Html.EditorFor(model => model.Customer, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Customer, "", new { @class = "text-danger" })
                </td>
                <td>
                    @Html.LabelFor(model => model.Principal, htmlAttributes: new { @class = "control-label col-md-2" })
                </td>
                <td style="width:300px">
                    @Html.EditorFor(model => model.Principal, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Principal, "", new { @class = "text-danger" })
                </td>

                <td>
                    @Html.LabelFor(model => model.Product, htmlAttributes: new { @class = "control-label labelpadding" })
                </td>
                <td>
                    @Html.EditorFor(model => model.Product, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Product, "", new { @class = "text-danger" })
                </td>

            </tr>
            <tr>

                <td>
                    @Html.LabelFor(model => model.Status, htmlAttributes: new { @class = "control-label labelpadding" })
                </td>
                <td>
                    @Html.DropDownListFor(m => m.Status, new SelectList(ViewBag.Status, "Status", "Text"), new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.Status, "", new { @class = "text-danger" })
                </td>
                <td>
                    @Html.LabelFor(model => model.Value, htmlAttributes: new { @class = "control-label labelpadding" })
                </td>
                <td>
                    @Html.EditorFor(model => model.Value, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Value, "", new { @class = "text-danger" })
                </td>
                <td>
                    @Html.LabelFor(model => model.FollowUpDate, htmlAttributes: new { @class = "control-label labelpadding" })
                </td>
                <td>
                    <div>
                        <div class="input-group date" data-provide="datepicker">
                            @Html.EditorFor(model => model.FollowUpDate, new { htmlAttributes = new { @class = "form-control" } })
                            <div class="input-group-addon">
                                <span class="glyphicon glyphicon-th"></span>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    @Html.LabelFor(model => model.NextAction, htmlAttributes: new { @class = "control-label labelpadding" })
                </td>
                <td colspan="5">
                    @Html.EditorFor(model => model.NextAction, new { htmlAttributes = new { @class = "form-control ", @style = "margin-right: 0 !important;"} })
                    @Html.ValidationMessageFor(model => model.NextAction, "", new { @class = "text-danger" })
                </td>
            </tr>
        </table>

Answer 1

由于您在元素中启用了 Bootstrap，因此请使用 Bootstrap 的 CSS 类 w-100。此类将使应用它的元素具有 100% 的宽度。这是添加了该类的更新后的 EditorFor 行:

@Html.EditorFor(model => model.NextAction, new { htmlAttributes = new { @class = "form-control w-100"} })

如果这不起作用，您可能有其他东西覆盖了它。检查您的其他样式表和浏览器中呈现的 HTML。