can not place @Html.TextBox inside table cell

Question

I am working on an asp.net mvc web application, and i have the following inside my view (mainly a table that contain 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>
        }

the result on applying this was not very user-friendly, as the text boxes will be placed outsite the table cells as follow:-

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>

但是你在<td>内部没有TextBox的问题是一个css问题..你可能有正确的边距。您应该使用F12检查器来查看哪些css属性导致所有内容都向右移动。或者为它们添加负右边距。如果我使用bootstrap

，我通常会将form-control类添加到输入中

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