不能将@Html.TextBox 放在表格单元格内

Question

我正在开发一个 asp.net mvc web 应用程序，我的视图中有以下内容（主要是一个包含 Html.TextBox 的表）：-

@{


          int i = 0;
     <div>
         <table class="table table-striped table-bordered bootstrap-datatable ">
             <thead>
                <tr>
                    <th>IP Address  @Html.EditorFor(model=>model.IsIPUnique) | @Html.DisplayNameFor(model=>model.IsIPUnique)</th><th>MAC Address @Html.EditorFor(model=>model.IsMACUnique) | @Html.DisplayNameFor(model=>model.IsMACUnique)</th>
                    <th>NIC</th><th>Gateway</th>
                    <th>Network</th><th>SubNetMask</th>
                    <th>DHCP Enabled</th><th>DHCP Server</th>


                </tr> 
             </thead>
             <tbody>
                  @if(Model.NetworkInfo2 == null || Model.NetworkInfo2.Count() == 0)
            {

                Model.NetworkInfo2.Add(new NetworkInfo() { ISDHCP = "false" });
            } 
    @foreach(var s in Model.NetworkInfo2)
{
                 <tr>
                     <td> @Html.TextBox("NetworkInfo2[" + i.ToString() + "].IPADDRESS",  s.IPADDRESS ) 
    @Html.ValidationMessage("NetworkInfo2[" + i.ToString() + "].IPADDRESS")</td>
                     <td> @Html.TextBox("NetworkInfo2[" + i.ToString() + "].MACADDRESS",  s.MACADDRESS) 
    @Html.ValidationMessage("NetworkInfo2[" + i.ToString() + "].MACADDRESS")</td>
                     <td> @Html.TextBox("NetworkInfo2[" + i.ToString() + "].NICNAME",  s.NICNAME) 
    @Html.ValidationMessage("NetworkInfo2[" + i.ToString() + "].NICNAME")</td>
                     <td> @Html.TextBox("NetworkInfo2[" + i.ToString() + "].GATEWAY",  s.GATEWAY) 
    @Html.ValidationMessage("NetworkInfo2[" + i.ToString() + "].GATEWAY")</td>
                     <td>
                            @Html.TextBox("NetworkInfo2[" + i.ToString() + "].NETWORK",  s.NETWORK) 
    @Html.ValidationMessage("NetworkInfo2[" + i.ToString() + "].NETWORK")
                     </td>
                     <td>    @Html.TextBox("NetworkInfo2[" + i.ToString() + "].IPNETMASK",  s.IPNETMASK) 
    @Html.ValidationMessage("NetworkInfo2[" + i.ToString() + "].IPNETMASK")   </td>

                 <td> @Html.TextBox("NetworkInfo2[" + i.ToString() + "].DHCPSERVER",  s.DHCPSERVER) 
    @Html.ValidationMessage("NetworkInfo2[" + i.ToString() + "].DHCPSERVER")</td>
                      <td> @Html.CheckBox("NetworkInfo2[" + i.ToString() + "].ISDHCP", bool.Parse(s.ISDHCP))
    @Html.ValidationMessage("NetworkInfo2[" + i.ToString() + "].ISDHCP")</td>
                 </tr>

        i++;
    }
             </tbody>
         </table>




     </div>
        }

应用它的结果不是很用户友好，因为文本框将被放置在表格单元格之外，如下所示：-

Answer 1

您可以通过使用 for 循环而不是 foreach 来为初学者构建表格，让您的生活更轻松。

<div>
    <table class="table table-striped table-bordered bootstrap-datatable ">
        <thead>
            <tr>
                <th>IP Address  @Html.EditorFor(model => model.IsIPUnique) | @Html.DisplayNameFor(model => model.IsIPUnique)</th>
                <th>...</th>
            </tr>
        </thead>
        <tbody>
            @if (Model.NetworkInfo2 == null || Model.NetworkInfo2.Count() == 0)
            {
                Model.NetworkInfo2.Add(new NetworkInfo() { ISDHCP = "false" });
            }
            @for (int i = 0; i < Model.NetworkInfo2.Count(); i++)
            {
                <tr>
                    <td>
                        @Html.TextBoxFor(a => a.NetworkInfo2[i].IPADDRESS)
                        @Html.ValidationMessageFor(a => a.NetworkInfo2[i].IPADDRESS)
                    </td>
                </tr>
                <tr>
                    ...
                </tr>
            }
        </tbody>
    </table>
</div>

但是您的 TextBox 不在 <td> 内的问题是 CSS 问题。您可能有右边距。您应该使用 F12 检查器查看导致所有内容向右移动的 css 属性。或为它们添加一个负的右边距。如果我使用引导程序，我通常会将 form-control 类添加到输入中

@Html.TextBoxFor(a => a.NetworkInfo2[i].IPADDRESS, new { @class="form-control" })