Html 在ASP.NET MVC3中布局不同表单上的数据

我试图对视图文件的布局进行排序，以便所有表单字段垂直排列，两个按钮在页面底部水平排列

这是我尝试格式化代码之前代码的外观：

@using (Html.BeginForm())
{

<p>
    @Html.LabelFor(m => m.UserName)
    @Html.EditorFor(n => n.UserName)
    @Html.ValidationMessageFor(m => m.UserName)
</p>

<p>
    @Html.LabelFor(m => m.Role)
    @Html.DropDownListFor( m => m.Role, Model.Roles, "-- Role --")
    @Html.ValidationMessageFor(m => m.Role)
</p>

 <p>
    @Html.LabelFor(m => m.InsertDate)
    @Html.EditorFor(n => n.InsertDate)
    @Html.ValidationMessageFor(m => m.InsertDate)
</p> 

 <p>
    @Html.LabelFor(m => m.ActiveInd)
    @Html.EditorFor(n => n.ActiveInd)
    @Html.ValidationMessageFor(m => m.ActiveInd)
</p> 


<p>
    <input type="submit" value="save"/>
   </p>
}

@using (Html.BeginForm("Index", "ZUserRole", "GET"))
{
    <input type="submit" value="cancel"/>
}

@使用（Html.BeginForm（））
{

@LabelFor（m=>m.UserName）
@EditorFor（n=>n.UserName）
@Html.ValidationMessageFor（m=>m.UserName）


@LabelFor（m=>m.Role）
@DropDownListFor（m=>m.Role，Model.Roles，“--Role--”）
@Html.ValidationMessageFor（m=>m.Role）


@LabelFor（m=>m.InsertDate）
@EditorFor（n=>n.InsertDate）
@Html.ValidationMessageFor（m=>m.InsertDate）


@LabelFor（m=>m.ActiveInd）
@EditorFor（n=>n.ActiveInd）
@Html.ValidationMessageFor（m=>m.ActiveInd）



}
@使用（Html.BeginForm（“Index”、“ZUserRole”、“GET”））
{
}

当这在页面上呈现时，所有字段都脱线，按钮位于不同的水平线上。我试着用一张桌子来解决这个问题。但是，由于Html.BeginForm函数的原因，这遇到了问题。这是我的尝试：

<table>

@using (Html.BeginForm())
{

<tr>
<td>
    @Html.LabelFor(m => m.UserName)
    </td>
    <td>
    @Html.EditorFor(n => n.UserName)
    @Html.ValidationMessageFor(m => m.UserName)
    </td>
</tr>

<tr>
<td>
    @Html.LabelFor(m => m.Role)
    </td>
    <td>
    @Html.DropDownListFor( m => m.Role, Model.Roles, "-- Role --")
    @Html.ValidationMessageFor(m => m.Role)
</td>
</tr>

 <tr>
<td>
    @Html.LabelFor(m => m.InsertDate)
    </td>
    <td>
    @Html.EditorFor(n => n.InsertDate)
    @Html.ValidationMessageFor(m => m.InsertDate)
</td>
</tr>

 <tr>
<td>
    @Html.LabelFor(m => m.ActiveInd)
    </td>
    <td>
    @Html.EditorFor(n => n.ActiveInd)
    @Html.ValidationMessageFor(m => m.ActiveInd)
</td>
</tr>


<tr>
<td>
    <input type="submit" value="save"/>
   </td>
}
<td>
 @using (Html.BeginForm("Index", "ZUserRole", "GET"))
{
<input type="submit" value="cancel"/>
    }
 </td>
 </tr>

 </table>

@使用（Html.BeginForm（））
{
@LabelFor（m=>m.UserName）
@EditorFor（n=>n.UserName）
@Html.ValidationMessageFor（m=>m.UserName）
@LabelFor（m=>m.Role）
@DropDownListFor（m=>m.Role，Model.Roles，“--Role--”）
@Html.ValidationMessageFor（m=>m.Role）
@LabelFor（m=>m.InsertDate）
@EditorFor（n=>n.InsertDate）
@Html.ValidationMessageFor（m=>m.InsertDate）
@LabelFor（m=>m.ActiveInd）
@EditorFor（n=>n.ActiveInd）
@Html.ValidationMessageFor（m=>m.ActiveInd）
}
@使用（Html.BeginForm（“Index”、“ZUserRole”、“GET”））
{
}

---

这将导致由解析错误引起的异常。我猜您不能在BeginForm函数的任何一侧打开html标记。解决此问题的最佳方法是什么？

最简单的方法是使用CSS

我想你知道如何使用CSS

---

如果没有的话，还有很多教程可以学习，比如这本：

最简单的方法是使用CSS

我想你知道如何使用CSS

---

如果没有足够的教程，您可以遵循，例如下面的一个：

在这种情况下，您需要为标签或第一个td单元指定一个固定的宽度。在上面的表示例中，如果给第一个TD子项一个固定的宽度，则所有标签都将对齐。话虽如此，也要给每一个表格自己的表格；如果第一个单元格的宽度是固定的，那么不管使用多少个表，它们都会排成一行

---

HTH.

在这种情况下，您需要为标签或第一个td单元指定一个固定的宽度。在上面的表示例中，如果给第一个TD子项一个固定的宽度，则所有标签都将对齐。话虽如此，也要给每一个表格自己的表格；如果第一个单元格的宽度是固定的，那么不管使用多少个表，它们都会排成一行

---

HTH.

使用无表设计将是最佳选择。如果仍要使用表，请尝试以下操作：

<table>
<tr>
<td>
@using (Html.BeginForm())
{
<table>
<tr>
<td>
    @Html.LabelFor(m => m.UserName)
    </td>
    <td>
    @Html.EditorFor(n => n.UserName)
    @Html.ValidationMessageFor(m => m.UserName)
    </td>
</tr>

<tr>
<td>
    @Html.LabelFor(m => m.Role)
    </td>
    <td>
    @Html.DropDownListFor( m => m.Role, Model.Roles, "-- Role --")
    @Html.ValidationMessageFor(m => m.Role)
</td>
</tr>

 <tr>
<td>
    @Html.LabelFor(m => m.InsertDate)
    </td>
    <td>
    @Html.EditorFor(n => n.InsertDate)
    @Html.ValidationMessageFor(m => m.InsertDate)
</td>
</tr>

 <tr>
<td>
    @Html.LabelFor(m => m.ActiveInd)
    </td>
    <td>
    @Html.EditorFor(n => n.ActiveInd)
    @Html.ValidationMessageFor(m => m.ActiveInd)
</td>
</tr>


<tr>
<td>
    <input type="submit" value="save"/>
       </td>
</tr></table>
    }
</td>
    <td valign="bottom">
     @using (Html.BeginForm("Index", "ZUserRole", "GET"))
    {
    <input type="submit" value="cancel"/>
        }
     </td>
     </tr>

     </table>

@使用（Html.BeginForm（））
{
@LabelFor（m=>m.UserName）
@EditorFor（n=>n.UserName）
@Html.ValidationMessageFor（m=>m.UserName）
@LabelFor（m=>m.Role）
@DropDownListFor（m=>m.Role，Model.Roles，“--Role--”）
@Html.ValidationMessageFor（m=>m.Role）
@LabelFor（m=>m.InsertDate）
@EditorFor（n=>n.InsertDate）
@Html.ValidationMessageFor（m=>m.InsertDate）
@LabelFor（m=>m.ActiveInd）
@EditorFor（n=>n.ActiveInd）
@Html.ValidationMessageFor（m=>m.ActiveInd）
}
@使用（Html.BeginForm（“Index”、“ZUserRole”、“GET”））
{
}

使用无表设计将是最佳选择。如果仍要使用表，请尝试以下操作：

<table>
<tr>
<td>
@using (Html.BeginForm())
{
<table>
<tr>
<td>
    @Html.LabelFor(m => m.UserName)
    </td>
    <td>
    @Html.EditorFor(n => n.UserName)
    @Html.ValidationMessageFor(m => m.UserName)
    </td>
</tr>

<tr>
<td>
    @Html.LabelFor(m => m.Role)
    </td>
    <td>
    @Html.DropDownListFor( m => m.Role, Model.Roles, "-- Role --")
    @Html.ValidationMessageFor(m => m.Role)
</td>
</tr>

 <tr>
<td>
    @Html.LabelFor(m => m.InsertDate)
    </td>
    <td>
    @Html.EditorFor(n => n.InsertDate)
    @Html.ValidationMessageFor(m => m.InsertDate)
</td>
</tr>

 <tr>
<td>
    @Html.LabelFor(m => m.ActiveInd)
    </td>
    <td>
    @Html.EditorFor(n => n.ActiveInd)
    @Html.ValidationMessageFor(m => m.ActiveInd)
</td>
</tr>


<tr>
<td>
    <input type="submit" value="save"/>
       </td>
</tr></table>
    }
</td>
    <td valign="bottom">
     @using (Html.BeginForm("Index", "ZUserRole", "GET"))
    {
    <input type="submit" value="cancel"/>
        }
     </td>
     </tr>

     </table>

@使用（Html.BeginForm（））
{
@LabelFor（m=>m.UserName）
@EditorFor（n=>n.UserName）
@Html.ValidationMessageFor（m=>m.UserName）
@LabelFor（m=>m.Role）
@DropDownListFor（m=>m.Role，Model.Roles，“--Role--”）
@Html.ValidationMessageFor（m=>m.Role）
@LabelFor（m=>m.InsertDate）
@EditorFor（n=>n.InsertDate）
@Html.ValidationMessageFor（m=>m.InsertDate）
@LabelFor（m=>m.ActiveInd）
@EditorFor（n=>n.ActiveInd）
@Html.ValidationMessageFor（m=>m.ActiveInd）
}
@使用（Html.BeginForm（“Index”、“ZUserRole”、“GET”））
{
}

我将两个不同的提交按钮放在同一个表单上，这样它们就可以很容易地排列起来。然后，我将它们提交给两个单独的控制器操作方法，它们用一个自定义属性[HandlesSubmitFrom（name=“XXXXX”）]注释，其中名称对应于相关提交按钮的名称。为了实现这一点，我必须对第二个操作方法的名称稍有不同（因为它们具有相同的签名），但将注释[ActionName（“Index”）]放在上面。

我将两个不同的提交按钮放在同一个表单上，这样它们就可以很容易地对齐。然后，我将它们提交给两个单独的控制器操作方法，它们用一个自定义属性[HandlesSubmitFrom（name=“XXXXX”）]注释，其中名称对应于相关提交按钮的名称。要使其发挥作用，我必须对第二个操作方法的名称稍有不同（因为它们具有相同的签名），但将注释[ActionName（“Index”）]放在上面。

使用divs对控件进行分组。然后使用css来设置div的样式。您不应该使用表来表示l