Question

我想知道是否有人可以帮助我解决我遇到的一些对齐问题。我有一个局部视图，我想把它放在一个表中，因为我循环它。

我尝试了两种方法

使用两个单独的表（一个在主视图中，一个在局部视图中）。
将表放在主视图中，然后只将部分视图中的行放入，否则无效。

我也在每个循环之间通过我的模型获得额外的换行符（这是我想要使用表格的主要原因，试图阻止这些额外的空行。）

我已经更新了现在发生的事情，包括提出的建议。我还有问题。

当我点击添加新内容时，问题会非常具体。新行不会进入表，因为已经在页面加载时创建了表，是否可以在部分更新时更新整个表...？问题是表的标题在局部视图之外，因此不会不断重复

任何帮助将不胜感激。

图像

主要观点：

<div id="editorRows">
    <div class="row text-center ">
        @Html.ActionLink("Add New Line", "BlankEditorRow", null, new { id = "addItem", @class = "btn blue" })
        <input type="submit" value="Save Changes" class="btn blue" />
    </div>

    <table class="table" style="border: none;" width="70">
        <tr>
            <th>StockCode</th>
            <th class="tg-031e">Description</th>
            <th>Qty</th>
            <th>Price</th>
            <th>Net</th>
            <th>Tax</th>
            <th>Gross</th>
            <th>Remove</th>
        </tr>
        <tr>
            @if (Model.OrderLines != null)
            {
                foreach (var item in Model.OrderLines)
                {
                    Html.RenderPartial("OrderLinesEditorRow", item);
                }
            }
        </tr>
    </table>
</div>

部分视图：

@using HtmlHelpers.BeginCollectionItem
@model MyModel.Models.OrderLines

<style>
    input.Width {
        width: 5em;
    }
</style>

<div class="editorRow">
    <script>
        $("a.deleteRow").live("click", function () {
            $(this).parents("div.editorRow:first").remove();
            return false;
        });

        $(document).ready(function () {
            $('.selectpicker').selectpicker({
                liveSearch: true,
                showSubtext: true
            });
        });
    </script>

    @using (Html.BeginCollectionItem("OrderLines"))
    {
        <td>
            @Html.HiddenFor(model => model.Itemid, new { size = 4 })
            @Html.DropDownList("StockCode",
                    new SelectList(ViewBag.StockCodeList, "Value", "Text"),
                    new
                    {
                        @class = "form-control selectpicker",
                        @Value = @Model.Description,
                        onchange = "this.form.submit();",
                        data_show_subtext = "true",
                        data_live_search = "true"
                    })
        </td>

        <td>
            @Html.DropDownListFor(x => x.StockCode,
                      (IEnumerable<SelectListItem>)ViewBag.AllStockList,
                       new
                       {
                           @class = "form-control selectpicker",
                           @Value = @Model.Description,
                           onchange = "this.form.submit();",
                           data_show_subtext = "true",
                           data_live_search = "true"
                       })
        </td>

        <td>
            @Html.EditorFor(model => model.QtyOrder, new { htmlAttributes = new { @class = "form-control Width", @Value = @Model.QtyOrder } })
        </td>

        <td>
            @Html.EditorFor(model => model.UnitPrice, new { htmlAttributes = new { @class = "form-control Width", @Value = @Model.UnitPrice } })
        </td>

        <td>
            @Html.EditorFor(model => model.NetAmount, new
            {
                htmlAttributes = new { @class = "form-control Width", @Value = @Model.NetAmount }
            })
        </td>

        <td>
            @Html.EditorFor(model => model.TaxAmount, new { htmlAttributes = new { @class = "form-control Width", @Value = @Model.TaxAmount } })
        </td>

        <td>
            @Html.EditorFor(model => model.FullNetAmount, new { htmlAttributes = new { @class = "form-control Width", @Value = @Model.FullNetAmount } })
        </td>

        <td>
            <a href="#" class="deleteRow btn blue">Remove</a>
        </td>
    }
</div>

Answer 1

你可以使用两个tr，我的意思是两个表行而不是一个，并在你的视图中按行构造。您只使用了1 tr，在该行内部添加了2个下拉列表或文本框。之后，您可以检查您的html是否是有效的html5。链接https://validator.w3.org

同样从主视图开始，只需启动表格标记..然后，foreach ...只会包含行..最后你关闭你的表格标记。问题是你有太多的表。我想说它可以合并到只有一张桌子。

主视图：表以标题开头 ... foreach项目 .........只有表格行的局部视图 ......结束了主要观点：关闭表

Answer 2

在我这里工作的解决方案是

<table class="inventory">
    <thead>
        <tr>
            <th width="180"><span>Code</span></th>
            <th width="265"><span>Description</span></th>
            <th><span>Price</span></th>
            <th><span>Quantity</span></th>
            <th><span>Discount %</span></th>
            <th><span>Discount Amt</span></th>
            <th><span>Net £</span></th>
            <th><span>Tax %</span></th>
            <th><span>VAT Amt</span></th>
        </tr>
    </thead>

    @{
        if (Model.OrderLines == null)
        {
            Model.OrderLines = new List<Accounts.Models.OrderLines>();
            Accounts.Models.OrderLines Line = new Accounts.Models.OrderLines();
            Line.CustomerID = Model.CustomerID;
            Model.OrderLines.Add(Line);
        }

        foreach (var item in Model.OrderLines)
        {
            Html.RenderPartial("orderline", item);
        }
    }

</table>

和部分

    @using HtmlHelpers.BeginCollectionItem
@{
    Layout = "";
}

@using (Html.BeginCollectionItem("OrderLines"))
{
    <tbody>
        <tr>
            <td>
                <a class="cut">-</a><span contenteditable>
                    @Html.DropDownList("StockCode", new SelectList(ViewBag.StockCodeList, "Value", "Text"),
                    new
                     {
                         @class = "form-control selectpicker",
                         @Value = @Model.Description,
                         onchange = "this.form.submit();",
                         data_show_subtext = "true",
                         data_live_search = "true"
                     })
                </span>
            </td>
            <td><span contenteditable>
                    @Html.DropDownList("StockCode", new SelectList(ViewBag.AllStockList, "Value", "Text"),
                                 new
                                    {
                                        @class = "form-control selectpicker ",
                                        onchange = "this.form.submit();",
                                        data_show_subtext = "true",
                                        data_live_search = "true"
                                    })
                </span></td>
            <td><span data-prefix>$</span><span contenteditable>150.00</span></td>
            <td><span contenteditable>4</span></td>
            <td><span contenteditable>0</span></td>
            <td><span contenteditable>0.00</span></td>
            <td><span contenteditable>0.00</span></td>
            <td><span contenteditable>0</span></td>
            <td><span data-prefix>$</span><span>0.00</span></td>
        </tr>
    </tbody>
}

视图和部分视图之间的对齐问题

2 个答案: