How to configure Checkboxes Materialize Css in Web application Asp.Net MVC

Question

How do I configure Checkboxes in Asp.Net MVC Razor.

Since in the documentation we have the following configuration Materialize for checkboxes :

<p>
   <label>
     <input type = "checkbox" />
     <span> Network </span>
   </label>
</p>

And in Razor I could not perform this configuration.

<div class = "input-field col s12">
        @Html.EditorFor (model => model.AnnualDestaque)
        @Html.LabelFor (model => model.AnnualDestaque)
        @Html.ValidationMessageFor (model => model.AnnualDestaque, "", new {@class = "text-danger"})
</div>

You need to modify the css to use a general sibling combinator (~) - refer [Styling @Html.CheckBoxFor as a slider](https://stackoverflow.com/questions/46217712/styling-html-checkboxfor-as-a-slider/46218643#46218643) for a similar issue (materialize.css uses an adjacent sibling combinator but that will not work because your `EditorFor()` is generating hidden input — , Sep 25 '18 at 07:57

score 1 · Accepted Answer · answered Sep 25 '18 at 14:36

1

Please include model Name in your cshtml page

@model WebApplication3.Models.Test
@{
 ViewBag.Title = "Home Page";
 }


@using (Html.BeginForm("Save", "Home", FormMethod.Post))
 {
  <div class="row">
  <div class="col-md-4">
    @Html.TextBoxFor(m => m.EmployeeName)
    @Html.CheckBoxFor(m=>m.IsSelected)

  </div>

   <input type="submit" value="Save" />

  </div>
}

Model

public class Test
{
    public string EmployeeName { get; set; }
    public bool IsSelected { get; set; }
}

answered Sep 25 '18 at 14:36

user1756922

209
2
5

Even though this way not described above, the checkbox does not appear on the screen, noting that I'm using MaterializeCss, the checkbox does not appear on the screen – Cyberlacs Sep 25 '18 at 17:13

score 0 · Answer 2 · answered Sep 25 '18 at 07:08

0

If you just want to have a checkbox binded with your model like that :

public class Network
{
    public bool Selected { get; set; }
    public string Name { get; set; }
}

Just use :

@Html.CheckBoxFor(m=>m.Selected)
@Html.LabelFor(m=>m.Name)

answered Sep 25 '18 at 07:08

Manta

490
5
18

Even though this way not described above, the checkbox does not appear on the screen, noting that I'm using MaterializeCss, the checkbox does not appear on the screen – Cyberlacs Sep 25 '18 at 17:13
Unfortunately you didn't mentioned the fact that you are using a custom plugin for checkboxes. In this cases the proper way is to implement a custom helper. – Manta Sep 25 '18 at 19:41

score 0 · Answer 3 · answered Sep 25 '18 at 18:39

I was able to solve it, and I am passing the answer.

I used Html Helper Documentation Html Helper MVC

It worked perfectly without mistakes the way it's meant to be.

<div class="input-field col s12">
    <label>
        <input data-val="true"
                data-val-required="The Advertisement field is required."
                id="Advertisement"/**** m => m.Advertisement ****/
                name="Advertisement"/**** m => m.Advertisement ****/
                type="checkbox"
                value="true" />

        <span>Anuncio Destaque</span>

        <input name="Advertisement" type="hidden" value="false" />
    </label>
</div>

score 0 · Answer 4 · answered Oct 30 '18 at 12:31

You can make it work doing this:

<label>
<input type="checkbox" name="FIELDNAME" id="FIELDNAME" value="true" class="filled-in" @(Model.FIELDNAME? "checked" : "") />
<span>@Html.DisplayNameFor(model => model.FIELDNAME)</span>
</label>
<input name="FIELDNAME" type="hidden" value="false" />

How to configure Checkboxes Materialize Css in Web application Asp.Net MVC

4 Answers4

Linked