ASP NET MVC 4 render checkboxes side by side

Question

I have a simple question. I'm implementing a CRUD for a n:m relationship (users / roles namely) using the SimpleMembershipProvider (which is awkward by its own nature). I created a view class:

public class AssignedRoleData
{        
    public string RoleName { get; set; }
    public bool Assigned { get; set; }
}

I added this to my user class:

public List<AssignedRoleData> AssignedRoles { get; set; }

This is my AssignedRoleData.cshtml:

@model NfseEasyWeb.Models.AssignedRoleData

@Html.HiddenFor(model => model.RoleName)

@Html.LabelFor(model => model.Assigned, Model.RoleName)
@Html.EditorFor(model => model.Assigned)

I want them to appear on a horizontal line.

<table>
    <tr>
        @foreach (var item in Model.AssignedRoles) {    
        <td>
        <div class="editor-field">
            @Html.Editor What goes here? 
        </div>
        </td>
        }
    </tr>
</table>

I know I could just use

@Html.EditorFor(model => model.AssignedRoles)

And the framework would detect it's a collection and render as many AssignedRoleData.cshtml as necessary, but they appear in pure form in html, vertical, I want them to appear on a horizontal line.

This is what I wanted. Did it applying CSS to the editor template, now need to work on margin.

checkboxes

Thanks

There is no reason why it shouldn't appear as a horizontal line that I can see. Can you post the rendered html? — Nathan A, May 30 '14 at 16:20
I don't know what to insert inside the div, I wrote @Html.Editor What goes here. @Html.Editor(item) doesn't work, @Html.EditorFor(item => item) also doesn't. — LeshracEvil, May 30 '14 at 16:27
Try `@Html.EditorFor(x => item);` The lambda part isn't really used since you aren't referencing the base model. — Nathan A, May 30 '14 at 16:33
It runs, but the collection data is not posted to to controller (it gets null). It seems the way to go is use EditorFor the collection and let the framework work (http://stackoverflow.com/questions/16629763/mvc-cant-override-editortemplate-name-when-used-in-editorfor-for-child-object). But then again, it appears on top of one another (didn't want to say this but...) — LeshracEvil, May 30 '14 at 16:47
I applied a CSS class with display:inline-block; to my editor template and the checkboxes appeared side by side. Yay, tableless design ftw. — LeshracEvil, May 30 '14 at 17:03
Is there an actual question? What you did is what you should have done: used CSS. To fix the margins you should use more CSS. — Mike Cheel, May 30 '14 at 17:13
No more questions, so I figured it by myself. I'm gonna answer my own question — LeshracEvil, May 30 '14 at 17:31

score 0 · Accepted Answer · edited May 23 '17 at 10:32

The way to go in this case would be create the template for the single entity and use an EditorFor for the collection in the view, like this:

@Html.EditorFor(model => model.AssignedRoles)

The MVC framework figures it's a collection and renders as many templates as necessary (MVC can't override EditorTemplate name when used in EditorFor for child object). This should be the preferred way, instead of concocting for loops in the elements, or using Viewbag (I say this by experience and reading, it's better not to stray from the pattern).

As the rendering part, to make the checkboxes appear side by side, it's possible to use CSS:

<div class="checkbox-editor-field">
@Html.HiddenFor(model => model.RoleName)

@Html.LabelFor(model => model.Assigned, Model.RoleName)
@Html.EditorFor(model => model.Assigned)
</div>

And create a CSS class for this:

.checkbox-editor-field {
    display:inline-block;
}

So that the div elements will be accomodated in a single block in the same line.

ASP NET MVC 4 render checkboxes side by side

1 Answers1