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 for a similar issue (materialize.css uses an adjacent sibling combinator but that will not work because your EditorFor() is generating hidden input — user3559349
– user3559349, Commented Sep 25, 2018 at 7:57

user1756922 · Accepted Answer · 2018-09-25 14:36:14Z

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, 2018 at 14:36

user1756922

2092 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Cyberlacs Over a year ago

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

chongo2002 · Accepted Answer · 2018-10-30 12:31:38Z

1

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" />

answered Oct 30, 2018 at 12:31

chongo2002

1411 gold badge5 silver badges13 bronze badges

Comments

Manta · Accepted Answer · 2018-09-25 07:08:00Z

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, 2018 at 7:08

Manta

5171 gold badge7 silver badges23 bronze badges

2 Comments

Cyberlacs Over a year ago

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

Manta Over a year ago

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.

Cyberlacs · Accepted Answer · 2018-09-25 18:39:35Z

0

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>

answered Sep 25, 2018 at 18:39

Cyberlacs

2011 silver badge10 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related