CODEWITHSUNDEEP
asp.net-mvcasp.net-mvc-4
Moe Bataineh
Moe Bataineh

Reputation: 1080

Design a Editor Template

Currently I have a editor template page which has the code:

@model Comics.Models.LocalComicCategoriesModel

@Html.LabelFor(x => x.Title, Model.Title)
@Html.CheckBoxFor(x => x.isChecked)
@Html.HiddenFor(x => x.Id)

Which I call from different pages with:

@Html.EditorFor(x => x.Categories)

When the template gets outputted, i just get a clunky html with no design to it like: enter image description here

What I want is something like: enter image description here

I can achieve this by doing:

@model IEnumerable<Comics.Models.LocalComicCategoriesModel>

<div id="checkbox-list">
    @for (int iterator = 0; iterator < Model.Count(); iterator++)
    {
        if ((iterator % 6) == 0 || iterator == 0)
        {
            @Html.Raw("<div class='checkboxes_cont' style='float: left;'>");
        }


        string catTitle = Model.ElementAt(iterator).Title;
        bool catChecked = Model.ElementAt(iterator).isChecked;
        string catId = Model.ElementAt(iterator).Id.ToString();

        <div class="itemtest" style="width: 100px;">
            <input id="[email protected]()__isChecked" name="Categories[@iterator.ToString()].isChecked" type="checkbox" value="@catChecked.ToString()" data-title="@catTitle" @if (catChecked) { Write("checked=checked"); }>
            <label for="[email protected]()__Title">@catTitle</label>
            <input name="Categories[@iterator.ToString()].isChecked" type="hidden" value="false">
            <input data-val="true" data-val-number="The field Id must be a number." id="[email protected]()__Id" name="Categories[@iterator.ToString()].Id" type="hidden" value="@catId">
        </div>

        if ((iterator % 6) == 5 || iterator == Model.Count() - 1)
        {
            @Html.Raw("</div>")
        }
    }
</div>

However when I send data back to the controller, the value for the new checkbox dosent get sent back. I was wondering if it were possible to do it through the editor template.

Upvotes: 0

Views: 69

Answers (1)

Chris Pratt
Chris Pratt

Reputation: 239290

The problem is that you're trying to solve the display with HTML, which is emphatically not the purpose of HTML; that's the domain of CSS. Apply style to the checkboxes in your stylesheet and let your HTML just be.

Upvotes: 2

Related Questions