0

ページの下部にあるすべてのフォームフィールドが垂直に並べられ、2つのボタンが水平に並べられるように、ビューファイルのレイアウトを並べ替えようとしています。

これは、フォーマットを試みる前のコードの外観です。

@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

Using table less design will be best option. If you still want to use table, then try this:

<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の使い方を知っていると思います。

If not there are plenty of tutorials out there that ou can follow, such as this one:Css Tutorial

于 2012-07-09T10:44:23.160 に答える
0

I placed the two different submit buttons on the same form so that they could easily be lined up. Then I submitted them to two separate controller action methods which were annotated with a custom attribute: [HandlesSubmitFrom(name ="XXXXX")] where the name corresponded to the name of the relevant submit button. To goe this to work I had to name the second action method slightly differently (due to them having the same signature) but placed the annotation [ActionName("Index")] above it.

于 2012-07-16T10:35:37.890 に答える