Sending the value of the toggle checkbox to controls in ASP.NET MVC

Question

I have the onoffswitch-checkbox style, if I do not write "class=form-control", the controller returns a null value.

Class=form-control was used in all the examples and video explanations I reviewed, but I could not find the reason for this and the different usage methods.

@using (Html.BeginForm("actionname", "controllername", FormMethod.Post))
{
    <input type="checkbox" class="onoffswitch-checkbox" name="kisikayit" />
}

Thanks in advance.

bu benim checkbox stilim

<style type="text/css">
.onoffswitch {
    position: relative;
    width: 82px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.onoffswitch-checkbox {
    display: none;
}

.onoffswitch-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid #FFFFFF;
    border-radius: 20px;
}

.onoffswitch-inner {
    display: block;
    width: 200%;
    margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}

.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block;
    float: left;
    width: 50%;
    height: 28px;
    padding: 0;
    line-height: 28px;
    font-size: 12px;
    color: white;
    font-family: Trebuchet, Arial, sans-serif;
    font-weight: bold;
    box-sizing: border-box;
}

.onoffswitch-inner:before {
    content: "EVET";
    padding-left: 12px;
    background-color: #51C234;
    color: #FFFFFF;
}

.onoffswitch-inner:after {
    content: " HAYIR";
    padding-right: 12px;
    background-color: #DDDDDD;
    color: #FFFFFF;
    text-align: right;
}

.onoffswitch-switch {
    display: block;
    width: 16px;
    margin: 6px;
    background: #FFFFFF;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 43px;
    border: 2px solid #FFFFFF;
    border-radius: 20px;
    transition: all 0.3s ease-in 0s;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px;
}
</style>
}

Answer 1

Class=form-control has nothing to do with your business logic. This particular class is related to the design of your form. If you do not use it, your form design might look weird in terms of alignment within form.

As for not getting values in the controller. It seems that you have not attached any ViewModel with your UI. When you use RAZOR html helpers, you are bound to attach a ViewModel unless you are manually posting form values using JavaScript. Here is example i.e.

Your MyViewModel.cs class file

public class MyViewModel
{
   ...

   public bool IsToggle {get; set;} 

   ...
}

Update in your HTML i.e.

@model MyViewModel

@using (Html.BeginForm("actionname", "controllername", FormMethod.Post))
{
   <label>
     @Html.CheckBoxFor(m => m.IsToggle, new {class = "onoffswitch-checkbox", name = "kisikayit"}) &nbsp
     <label>Switch</label> &nbsp;
   </label>
}