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
– Nathan A, Commented May 30, 2014 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
– LeshracEvil, Commented May 30, 2014 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
– Nathan A, Commented May 30, 2014 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 (stackoverflow.com/questions/16629763/…). But then again, it appears on top of one another (didn't want to say this but...) — LeshracEvil
– LeshracEvil, Commented May 30, 2014 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
– LeshracEvil, Commented May 30, 2014 at 17:03

Community · Accepted Answer · 2017-05-23 10:32:37Z

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.

Collectives™ on Stack Overflow

ASP NET MVC 4 render checkboxes side by side

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related