CODEWITHSUNDEEP
c#asp.netasp.net-mvcasp.net-mvc-4checkbox
Nancy
Nancy

Reputation: 407

Pass values of checkBox to controller action in asp.net mvc4

I want to test if the checkbox is checked or not from my action method. What I need is to pass checkbox value from view to controller.

This is my view:

@using (Html.BeginForm("Index", "Graphe"))
{
    <table style="width: 100%;" border="1">
        <tbody>
            <tr>
                <td>Responsable:</td>
                <td>
                    <select id="Responsables" name="responsables">
                        <option>Selectionnez --</option>
                    </select>
                </td>
                <td><input id="responsable" name="checkResp" type="checkbox" /></td>
            </tr>
            <tr> 
                <td><input type="submit" value="Afficher" id="ButtonSubmit"/></td>
                <td><input class="button" id="ButtonReset" type="button" value="Annuler"  /></td>
            </tr>
        </tbody>
    </table>
}

and I try this:

public ActionResult Index(string responsables, bool checkResp)
{
    Highcharts chart = new Highcharts("chart");

    if (responsables != null)
    {          
        if (checkResp)
            chart = Global();
        else
            chart = Resp(responsables);
    }
    else
        chart = Global();
    return View(chart);
}

But I receive this error:

Le dictionnaire de paramètres contient une entrée Null pour le paramètre « checkAct » de type non Nullable « System.Boolean » pour la méthode « System.Web.Mvc.ActionResult Index(System.String, System.String, Boolean) » dans « Project.Controllers.GrapheController ». Un paramètre facultatif doit être un type référence, un type Nullable ou être déclaré en tant que paramètre facultatif. Nom du paramètre : parameters

Translated:

The parameter dictionary contains a null entry for the "checkAct" parameter of non-nullable type "System.Boolean" for the method "System.Web.Mvc.ActionResult Index (System.String, System.String, Boolean) ”in“ Project.Controllers.GrapheController ". An optional parameter must be a reference type, a type Nullable or be declared as an optional parameter. Name of parameter: parameters

Upvotes: 35

Views: 175019

Answers (12)

Andrew Shepherd
Andrew Shepherd

Reputation: 45222

If a checkbox is checked, then the postback values will contain a key-value pair of the form [InputName]=[InputValue]

If a checkbox is not checked, then the posted form contains no reference to the checkbox at all.

Knowing this, the following will work:

In the markup code:

<input id="responsable" name="checkResp" value="true" type="checkbox" />

And your action method signature:

public ActionResult Index(string responsables, bool checkResp = false)
{
    //Do Something
}

This will work because when the checkbox is checked, the postback will contain checkResp=true, and if the checkbox is not checked the parameter will default to false.

Upvotes: 77

Pieter Smith
Pieter Smith

Reputation: 1

I hope this somewhat helps.

Create a viewmodel for your view. This will represent the true or false (checked or unchecked) values of your checkboxes.

public class UsersViewModel
{
    public bool IsAdmin { get; set; }
    public bool ManageFiles { get; set; }
    public bool ManageNews { get; set; }
}

Next, create your controller and have it pass the view model to your view.

public IActionResult Users()
{
     var viewModel = new UsersViewModel();
     return View(viewModel);
}

Lastly, create your view and reference your view model. Use @Html.CheckBoxFor(x => x) to display checkboxes and hold their values.

@model Website.Models.UsersViewModel
<div class="form-check">
    @Html.CheckBoxFor(x => x.IsAdmin)
    <label class="form-check-label" for="defaultCheck1">
           Admin
    </label>
</div>

When you post/save data from your view, the view model will contain the values of the checkboxes. Be sure to include the viewmodel as a parameter in the method/controller that is called to save your data.

I hope this makes sense and helps. This is my first answer, so apologies if lacking.

Upvotes: 0

N&#233;stor S&#225;nchez A.
N&#233;stor S&#225;nchez A.

Reputation: 3978

None of the previous solutions worked for me. Finally I found that the action should be coded as:

public ActionResult Index(string MyCheck = null)

and then, when checked the passed value was "on", not "true". Else, it is always null.

Hope it helps somebody!

Upvotes: 5

Nelson Martins
Nelson Martins

Reputation: 57

I did had a problem with the most of solutions, since I was trying to use a checkbox with a specific style. I was in need of the values of the checkbox to send them to post from a list, once the values were collected, needed to save it. I did manage to work it around after a while.

Hope it helps someone. Here's the code below:

Controller:

    [HttpGet]
    public ActionResult Index(List<Model> ItemsModelList)
    {

        ItemsModelList = new List<Model>()
        {                
            //example two values
            //checkbox 1
            new Model{ CheckBoxValue = true},
            //checkbox 2
            new Model{ CheckBoxValue = false}

        };

        return View(new ModelLists
        {
            List = ItemsModelList

        });


    }

    [HttpPost]
    public ActionResult Index(ModelLists ModelLists)
    {
        //Use a break point here to watch values
        //Code... (save for example)
        return RedirectToAction("Index", "Home");

    }

Model 1:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;

    namespace waCheckBoxWithModel.Models
    {
        public class Model
{

    public bool CheckBoxValue { get; set; }

}
    }

Model 2:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;

    namespace waCheckBoxWithModel.Models
    {
        public class ModelLists
{

    public List<Model> List { get; set; }

}
    }

View (Index):

    @{
ViewBag.Title = "Index";

@model waCheckBoxWithModel.Models.ModelLists
    }
    <style>

.checkBox {
    display: block;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    /* hide default checkbox*/
    .checkBox input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

/* checkmark */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background: #fff;
    border-radius: 4px;
    border-width: 1px;
    box-shadow: inset 0px 0px 10px #ccc;
}

/* On mouse-over change backgroundcolor */
.checkBox:hover input ~ .checkmark {
    /*background-color: #ccc;*/
}

/* background effect */
.checkBox input:checked ~ .checkmark {
    background-color: #fff;
}

/* checkmark (hide when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* show checkmark (checked) */
.checkBox input:checked ~ .checkmark:after {
    display: block;
}

/* Style checkmark */
.checkBox .checkmark:after {
    left: 9px;
    top: 7px;
    width: 5px;
    height: 10px;
    border: solid #1F4788;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
   </style>

    @using (Html.BeginForm())
    {

    <div>

@{
    int cnt = Model.List.Count;
    int i = 0;

}

@foreach (var item in Model.List)
{

    {
        if (cnt >= 1)
        { cnt--; }
    }

    @Html.Label("Example" + " " + (i + 1))

    <br />

    <label class="checkBox">
        @Html.CheckBoxFor(m => Model.List[i].CheckBoxValue)
        <span class="checkmark"></span>
    </label>

    { i++;}

    <br />

}

<br />
<input type="submit" value="Go to Post Index" />    

    </div>

    }

Upvotes: 0

Omid Soleiman
Omid Soleiman

Reputation: 256

set value in check box like this : 

<input id="responsable" name="checkResp" value="true" type="checkbox" />

change checkResp to nullable property in Your model like this :

public Nullable<bool> checkResp{ get; set; }

use ? before checkResp like :

public ActionResult Index( string responsables, bool ? checkResp)
{
 ......
}

Upvotes: 2

kalpesh patel
kalpesh patel

Reputation: 21

<form action="Save" method="post">
 IsActive <input type="checkbox" id="IsActive" checked="checked" value="true" name="IsActive"  />

 </form>

 public ActionResult Save(Director director)
        {
                   // IsValid is my Director prop same name give    
            if(ModelState.IsValid)
            {
                DirectorVM ODirectorVM = new DirectorVM();
                ODirectorVM.SaveData(director);
                return RedirectToAction("Display");
            }
            return RedirectToAction("Add");
        }

Upvotes: 0

kalpesh patel
kalpesh patel

Reputation: 21

 public ActionResult Save(Director director)
        {
          // IsActive my model property same name give in cshtml
//IsActive <input type="checkbox" id="IsActive" checked="checked" value="true" name="IsActive" 
            if(ModelState.IsValid)
            {
                DirectorVM ODirectorVM = new DirectorVM();
                ODirectorVM.SaveData(director);
                return RedirectToAction("Display");
            }
            return RedirectToAction("Add");
        }

Upvotes: 0

Daniel King
Daniel King

Reputation: 142

For the MVC Controller method, use a nullable boolean type:

public ActionResult Index( string responsables, bool? checkResp) { etc. }

Then if the check box is checked, checkResp will be true. If not, it will be null.

Upvotes: 0

Matas Vaitkevicius
Matas Vaitkevicius

Reputation: 61371

If you want your value to be read by MVT controller when you submit the form and you don't what to deal with hidden inputs. What you can do is add value attribute to your checkbox and set it to true or false.

MVT will not recognize viewModel property myCheckbox as true here

<input type="checkbox" name="myCheckbox" checked="checked" />

but will if you add

<input type="checkbox" name="myCheckbox" checked="checked" value="true" />

Script that does it:

$(document).on("click", "[type='checkbox']", function(e) {
        if (this.checked) {
            $(this).attr("value", "true");
        } else {
            $(this).attr("value","false");}
    });

Upvotes: 4

Philip Pittle
Philip Pittle

Reputation: 12295

For some reason Andrew method of creating the checkbox by hand didn't work for me using Mvc 5. Instead I used this 

@Html.CheckBox("checkResp")

to create a checkbox that would play nice with the controller.

Upvotes: 19

COLD TOLD
COLD TOLD

Reputation: 13569

try using form collection 

<input id="responsable" value="True" name="checkResp" type="checkbox" /> 

[HttpPost]
public ActionResult Index(FormCollection collection)
{
     if(!string.IsNullOrEmpty(collection["checkResp"])
     {
        string checkResp=collection["checkResp"];
        bool checkRespB=Convert.ToBoolean(checkResp);
     }

}

Upvotes: 12

Simon Whitehead
Simon Whitehead

Reputation: 65049

You should be strongly typing your views. Then you can do this:

public class YourViewModel {
    public bool ConditionaValue { get; set; }
}

In your view, you can create a checkbox that will bind to this boolean value:

@Html.CheckBoxFor(x => x.ConditionalValue)

If it is checked, the model property will be true.

For your immediate problem though.. you need to name your checkbox to be the same name as your action method parameters.. and they should be bool..

Upvotes: 1

Related Questions