如何使用局部视图向主视图中定义的表添加行答案

【问题标题】：How to use a partial view to add rows to a table defined in the main view如何使用局部视图向主视图中定义的表添加行
【发布时间】：2016-04-04 13:48:15
【问题描述】：

我的 MVC 3 主视图中有下表定义。

 <table id="myDynamicTable" class="myClass" >
            <thead>
                <tr id="uploadrow_0">
                    <th style="white-space: nowrap;display: inline;width: 5px; text-align: left " >
                        Number
                    </th>
                    <th style="white-space: nowrap;display: inline;width: 120px; text-align: left ">
                        Unit
                    </th>
                    <th style="white-space: nowrap;display: inline;text-align: left ">
                        Type
                    </th>
                    <th  style="white-space: nowrap;display: inline;width: 90px; text-align: left ">
                        Date
                    </th>
                    <th style="white-space: nowrap;display: inline;width: 351px; text-align: left ">
                        Action
                    </th>
                    <th style="white-space: nowrap;display: inline;width: 300px; text-align: left ">
                        Comment
                    </th>
                </tr>
            </thead>
            <tbody>
                          @if (Model.ProductDetails.Count > 0)
                          {
                              foreach (var item in Model.ProductDetails)
                              {
                                  @Html.Partial("ProductDetailsPartial", item);
                              }
                          }
                          else
                          {
                              ProductDetailsViewModel item = new ProductDetailsViewModel();
                              item.Types = ViewBag.TypeList;
                              item.Unit = ViewBag.UnitList;
                              item.Number = 1;
                              @Html.Partial("ProductDetailsPartial", item);
                          }

            </tbody>
        </table>

我正在向上表动态添加行，但我添加的每一行都是从局部视图生成的。

下面是我的局部视图定义

    @model ProductDetailsViewModel
        <tr>
        @using (Html.BeginCollectionItem("item"))
        {
            <td class="autoGenNumber" style="width: 5px" >
                @if (Model == null)
                {
                    ProductDetailsViewModel item = new ProductDetailsViewModel();
                    item.Types = ViewBag.TypeList;
                    item.Unit = ViewBag.UnitList;
                    item.Number = 1;
                   @Html.LabelFor(x => Model.Number, Model.Number.ToString(), new { style = "width: 10px;", @class = "autoGenNumber" })
                }  
            </td>
            <td class="tdUnit">
                @Html.TextBox("Unit", Model.Unit, new { id = "Unit", style = "width:120px; padding: 0px;", @class = "txtUnit" })    
            </td>
            <td class="tdBorder">
                @Html.DropDownListFor(model => model.TypeId, new SelectList(Model.Types, "Value", "Text", Model.TypeId), "[--Select--]", new { @id = "ddlType", style = "width:20px; padding: 0px;", @class = "ddlType" })
            </td>
            <td class="tdBorder">
                @if (Model.Date.ToShortDateString().Contains("1/1/0001"))
                {
                    <input type="text" name="Model.Date" value="@DateTime.Today.ToShortDateString()"  class="txtDate" readonly = "readonly" style = "width: 90px; padding: 0px;" />
                }
                else
                {
                    <input type="text" name="Model.Date" value="@Model.Date.ToShortDateString()"  class="txtDate" readonly = "readonly" style = "width: 90px; padding: 0px;" />
                }
            </td>
            <td class="tdBorder">
              @Html.DropDownListFor(model => model.UnitId, new SelectList(Model.Unit, "Value", "Text", Model.UnitId), "[--Select--]", new { @id = "ddlUnit", style = "width:351px;", @class = "ddlUnit" })
            </td>
            <td class="tdBorder">
                @Html.TextBoxFor(x => Model.comment, new { id = "Comment", @class = "Comment RestrictCharacters", style = "width:300px;" })
            </td>
        } 
 </tr>

表格布局在 IE 8 及更高版本中正确显示，但在 chrome 和 Firefox 中，行列未与表格列标题正确对齐。

如何在主视图的 </tbody> </tbody> 元素中将部分视图呈现为有效的表格行

下面是我的表格在 IE 中的显示截图（正确布局）

下面是 chrome 中不正确的布局

【问题讨论】：

尝试将第一个文本框中的样式更改为style = "width:120px; padding: 0px; box-sizing:border-box;"，看看是否有区别（或减小宽度为width: 100px）
提供css。你有 td 的课程。
@StephenMuecke 仍然没有区别。

标签： html css asp.net-mvc asp.net-mvc-partialview

【解决方案1】：

可能是标题上的display: inline; 导致了这种效果。

通常表格单元格有display:table-cell;。

您的表格标题应如下所示：

<th style="white-space: nowrap;width: 120px; text-align: left ">
   Unit
</th>

【讨论】：

你拯救了我的一天。按照您的建议将 inline 替换为 table-cell 解决了它。