CODEWITHSUNDEEP
asp.net-mvcrazorcheckboxviewmodelform-submit
JoshYates1980
JoshYates1980

Reputation: 3626

Input type checkbox with MVC razor

Why is the value of my checkbox not passed to my ViewModel?

My View (I omitted input tags not relevant for this post):

@model Pro.WebUI.ViewModels.UserViewModel

@using (Html.BeginForm("ManageUsers", "Administration", FormMethod.Post, 
new { id = "request-form", @class = "form-horizontal" }))
{
 <div class="form-group">
  <label for="inputAuthorize" class="col-lg-2 control-label">Authorize</label>
   <div class="col-lg-8">
     <input type="checkbox" id="Authorized" name="Authorized" value="@Model.Authorized" />
   </div>
 </div>
 <div class="form-group">
  <div class="col-lg-10 col-lg-offset-2">
   <br /><br />
   <button type="submit" class="btn btn-primary">Submit Request</button>
   </div>
 </div>
 }

My ViewModel:

public class UserViewModel
{
    [Key]
    public string UserID { get; private set; }

    public string UserName { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public bool Authorized { get; set; }
    public string Email { get; set; }
    public string Phone { get; set; }
    public string Notes { get; set; }
}

My Controller:

 [HttpPost]
    public ActionResult ManageUsers(UserViewModel model)
    {
        if (ModelState.IsValid)
        {
            ProcurementUser obj = new ProcurementUser();
            obj.UserName = model.Email;
            obj.FirstName = model.FirstName;
            obj.LastName = model.LastName;
            obj.Email = model.Email;
            obj.Phone = model.Phone;
            obj.Authorized = model.Authorized;
            UserRepository.SaveUser(obj);
            //success message
        }
        return View(model);
    }

I did not include all input tags but when I step through the code without the checkbox, all values are passed. I looked at other checkbox questions on SOF but they mostly use the @Html.Checkbox or @Html.CheckboxFor. I would like to just use input type="checkbox"

Upvotes: 4

Views: 45293

Answers (2)

Dush
Dush

Reputation: 1365

If we need to use <input> filed instead of @Html.CheckboxFor, we can use "checked=\"checked\"" syntax as in this code:

<input type="checkbox" id="Authorized" name="Authorized" value="true" @(Model.Authorized ? "checked=\"checked\"" : "") />

Upvotes: 11

Zhaph - Ben Duguid
Zhaph - Ben Duguid

Reputation: 26956

As has been hinted at in the comments the issue you're having is that you're not really creating your checkbox correctly:

Assuming your model has Authorized = true your mark-up would be:

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

Similarly the false state would result in:

<input type="checkbox" id="Authorized" name="Authorized" value="false" />

But these aren't "checked" checkboxes - they're still "unchecked", and need the checked attribute setting:

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

As Stephen points out - an unchecked checkbox will not send any data back to the server so that you don't get confused about which options where selected.

Finally, as has also been noted, your <label> element is for an non-existent field looking for inputAuthorize instead of Authorized.

All of these issues would be taken care of for you if you were to use the @Html.CheckboxFor and @Html.LabelFor helper classes.

Upvotes: 10

Related Questions