Laying out data that lies on different forms in ASP.NET MVC3

Question

I'm trying to sort the layout of a view file so that all of the form fields are lined up vertically and the two buttons are lined up horizontally at the bottom of the page.

This is how the code looked before I attempted to format it:

@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"/>
}

When this was rendered on the page the fields were all out of line and the buttons were on different horizontal lines. I tried to sort this out by using a table. However This ran into problems due to the Html.BeginForm functions. This was my attempt:

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

This leads to an exception caused by a parsing error. I'm guessing that you can't have html tags open on either side of the BeginForm function. What is the best way to sort out this problem?

Answer 1

In this scenario, you need to give a fixed width either to the label, or to the first td cell. In the table example above, if you gave the first TD child a fixed width, all of the labels would line up. With that said, also give each form its own table; if you have a fixed width for the first cell, it won't matter how many tables you use, they will all line up.

Answer 2

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.

Answer 3

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>

Answer 4

The easiest way to do this is with CSS.

I assume you know how to use CSS.

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