CODEWITHSUNDEEP
jqueryasp.net-mvcasp.net-mvc-4razor
Willy
Willy

Reputation: 10650

Model is not being updated when checkbox is checked

First of all i have a doubt that maybe is related to my below problem or the cause. I do not know what is the difference between below two sentences in the view:

@model MyProject.SampleModel.CustomModels
@using MyProject.SampleModel;

My model:

Namespace MyProject.SampleModel
{
     public class ViewModelExample {
           public FirstModel BoolValues { get; set; }
           public SecondModel NamesValues { get; set; }
     }
}

Namespace MyProject.SampleModel
{
   public class FirstModel
   {
     public bool MyBoolean1 { get; set; }
     public bool MyBoolean2 { get; set; }
   }

   public class SecondModel
   {
     public string FirstName { get; set; }
     public string LastName { get; set; }
   }
}

Second, I have a problem when checking one of the checkboxes of the view: it seems like the model it's not being updated correctly or is updated and value overwritten in some point because i have a javascript function that checks the state of this checkbox once I press a button of the view and it does some stuff depending on whether it is checked or not. WHen I get this value from the javascript function it is always false even if i have checked it. I do not know what is happening, maybe I am not initializing my model in the correct way, etc.

Below my view code, and also a piece of the controller.

View:

@model MyProject.SampleModel.ViewModelExample

@using (Html.BeginForm("MyAction", "MyController", FormMethod.Post, htmlAttributes: new { id = "Myform" }))
{

   (...)

   @Html.CheckBoxFor(m => m.BoolValues.MyBoolean1) <-- i check this in the view

   (...)

    <input id="submitButton" type="button" value="Add" /> <-- button that I click on

   (...)
}

<script type="text/javascript" src="~/Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript">

      (...)

      $(function(){
          $('#submitButton').on('click', InitiateSequence);
      });

      function InitiateSequence()
      {
            // Do some stuff
            ScriptSample();
      }

      (...)

      function ScriptSample() {

            if(@(Model.BoolValues.MyBoolean1 ? "true" : "false") <-- This is always FALSE and should be TRUE because i have checked the checkbox in the view before click on the button
            {
                 // It's true, do some stuff
            }
            else
            {
                 // It's false, do some stuff
            }
      }

</script>

Controller:

public ActionResult MyAction(ViewModelExample model)
        {
           // Below initialization I am not sure if it is correct
           if (model.FirstModel == null)
           {
               model.FirstModel = new TestsModel(); // I do not instantiate SecondModel as in the view for this controller i do not use it
           }

            return View(model);
        }

Upvotes: 2

Views: 768

Answers (1)

Ant P
Ant P

Reputation: 25231

You are confusing client-side and server-side code. When you do the following:

if(@(Model.BoolValues.MyBoolean1 ? "true" : "false"))
{
    ...
}

The Razor statement @(Model.BoolValues.MyBoolean1 ? "true" : "false) is evaluated server-side and writes out either "true" or "false" depending on the value of MyBoolean1 when the view is rendered. So, if you look at the actual markup for the page when it loads, you'll see:

<script type="text/javascript">
    if(false)
    {
        ...
    }
</script>

So, of course, the conditional will never run and is totally unaffected by what happens to the checkbox after the page is loaded. Instead, you need to do something like this (no Razor here - we're just writing out Javascript as-is):

if($('#myCheckbox').is(':checked'))
{
    ...
}

And give your checkbox a corresponding ID:

@Html.CheckBoxFor(m => m.BoolValues.MyBoolean1, new { @id = "myCheckbox" })

The checkbox is now evaluated on the client side when the button is clicked, instead of on the server side when the page loads, so checking/unchecking it will have an effect.

As for your first question...

  • @model MyProject.SampleModel.CustomModels - means the model for the view is a CustomModels object.

  • @using MyProject.SampleModel; - gives you access to everything inside the SampleModel namespace within the view.

Upvotes: 1

Related Questions