0

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

这是我尝试格式化之前代码的样子：

@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 函数，这遇到了问题。这是我的尝试：

<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>

这会导致解析错误导致的异常。我猜你不能在 BeginForm 函数的任何一侧打开 html 标签。解决这个问题的最佳方法是什么？

4

4 回答 4

2

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

<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>
于 2012-07-09T10:52:55.987 回答
1

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

HTH。

于 2012-07-09T10:48:11.953 回答
0

最简单的方法是使用 CSS。

我假设你知道如何使用 CSS。

如果没有，您可以遵循很多教程，例如：Css Tutorial

于 2012-07-09T10:44:23.160 回答
0

我将两个不同的提交按钮放在同一个表单上，以便它们可以轻松排列。然后我将它们提交给两个单独的控制器操作方法，这些方法使用自定义属性进行注释： [HandlesSubmitFrom(name ="XXXXX")] 其中名称对应于相关提交按钮的名称。为了让它工作，我必须稍微不同地命名第二个动作方法（因为它们具有相同的签名），但将注释 [ActionName("Index")] 放在它上面。

于 2012-07-16T10:35:37.890 回答