lundi 5 avril 2021

How do I replicate a material checkbox using MVC4 or MVC5 razor syntax?

I am using material css to build a form and I want to use a material checkbox in my asp.net mvc application. Here is what the HTML for this would look like normally:

<label class="form-check-label">
    <input class="form-check-input" type="checkbox" value=""> Example checkbox
    <span class="form-check-sign">
        <span class="check"></span>
    </span>
</label>

The issue I am running into is when I try to duplicate this using razor syntax is that I am having trouble figuring out how to nest the @Html.EditorFor inside the @Html.LabelFor. Instead of trying to nest the textbox, I tried leaving the label unchanged, and adding the @Html.EditorFor. However, as you can see below, this went horribly awry.

<div class="form-check form-check-inline">
    <label class="form-check-label">
        @Html.EditorFor(model => model.Example, new { @class="form-check-input", @type="checkbox"}) Example Checkbox
        <span class="form-check-sign">
            <span class="check"></span>
        </span>
    </label>
</div>

enter image description here

How do I go about fixing this?




Aucun commentaire:

Enregistrer un commentaire