Bind Checkbox and Dropdown Menu Using Knockout in MVC

Introduction

In my previous articles I told you about:

1. How to Bind TextBox in various Ways Through Knockout in MVC
2. How to Bind Password and Multi Line TextBox Through Knockout in MVC

In this article I will tell you how to can bind a Checkbox and a Dropdown Menu using Knockout in MVC.

Step 1

We are working from the previous application so you don't need to make changes in the previous settings of the application.

First of all we will work on the Model Class of our application. So, add this code in the Model Class:

        public bool Bool { get; set; }

        public List<string> Options { get; set; }

        public string DefaultSelected { get; set; }

Here I had created a Boolean Variable "Bool", after that I created a list of strings "Options", then finally I created another variable named "DefaultSelected". So after adding this code to the existing code your complete code will be like this:

using System.Web;

using PerpetuumSoft.Knockout;

using PerpetuumSoft;

using DelegateDecompiler;

using System.ComponentModel;

using System.ComponentModel.DataAnnotations;

using System.ComponentModel.DataAnnotations.Schema;

 

namespace MvcApplication20.Models

{

    public class Class1

    {

        public string StringValue { get; set; }

        public string PasswordValue { get; set; }

        public bool Bool { get; set; }

        public List<string> Options { get; set; }

        public string DefaultSelected { get; set; }
    }

}

Step 2

Now we will move on to the Controller class of our application and will add some code in this class also. Write this code in the Controller Class:

      Bool = true,

      Options = new List<string> { "Car", "Bike", "Cycle" },

      DefaultSelected = "Bike"

Since in the Model I used a Boolean Variable here in this class I had declared a value of "Bool=True", so it will remain True by default.

Next I had passed a list of options in the variable "options". After that I passed an option as the default option under the variable DefaultSelected.

Now your complete code will be like this:

using PerpetuumSoft.Knockout;

 

namespace MvcApplication20.Controllers

{

    public class HomeController : Controller

    {

    

        public ActionResult Index()

        {

             var model = new Class1

    {

      StringValue = "Hello",

      PasswordValue = "mypass",

      Bool = true,

      Options = new List<string> { "Car", "Bike", "Cycle" },

      DefaultSelected = "Bike"

      };

             return View(model);

        }
    }

}

Step 3

Now we will move to the View Class of our application. Here in this class Controls and their Bindind will be created.

You can update your previous code with this code:

<script src="~/Scripts/knockout-2.3.0.js"></script>

<script src="~/Scripts/knockout.mapping-latest.js"></script>

<script src="~/Scripts/perpetuum.knockout.js"></script>

@using PerpetuumSoft.Knockout

@model MvcApplication20.Models.Class1

 

@{

  var ko = Html.CreateKnockoutContext();

}

<table id="maintable">

  <tr>

    <td>

      <h3>HTML controls</h3>

      <table>

        <tr>

          <td>Text value (updates on change):</td>

          <td>@ko.Html.TextBox(m => m.StringValue)</td>

        </tr>

        <tr>

          <td>Text value (updates on keystroke):</td>

          <td>@ko.Html.TextBox(m => m.StringValue).ValueUpdate(KnockoutValueUpdateKind.AfterKeyDown)</td>

        </tr>

        <tr>

          <td>Text value (multi-line):</td>

          <td>@ko.Html.TextArea(m => m.StringValue)</td>

        </tr>

        <tr>

          <td>Password:</td>

          <td>@ko.Html.Password(m => m.PasswordValue)</td>

        </tr>

            <tr>

          <td>Check or Uncheck:</td>

          <td>@ko.Html.CheckBox(m => m.Bool)</td>

        </tr>

          <tr>

          <td>Select From Drop-down:</td>

          <td><select @ko.Bind.Options(m => m.Options).Value(m => m.DefaultSelected)></select></td>

        </tr>

        </table>

        </td>

      </tr>

    <tr>

        <td>

        <table>

        <tr>

          <td>Text value:</td>

          <td @ko.Bind.Text(m => m.StringValue)></td>

        </tr>

        <tr>

          <td>Password:</td>

          <td @ko.Bind.Text(m => m.PasswordValue)></td>

        </tr>

            <tr>

          <td>Boolean value:</td>

          <td @ko.Bind.Text(m => m.Bool ? "True" : "False")></td>

        </tr>

            <tr>

          <td>You Select:</td>

          <td @ko.Bind.Text(m => m.DefaultSelected)></td>

        </tr>

 

            </table>

            </td>

        </tr>

        </table>

@ko.Apply(Model)

Here in the first table the fourth and fifth row is added, in the first row a Checkbox is created and bound to the "Bool", so every time a user checks or unchecks this Checkbox then the Bool value will change correspondingly to True or False.

In the fifth row a Dropdown Menu is created in which options are passed through the variable "Options" and a default option is provided by "DefaultSelected."

Now you can run your application to see the output.

Output

On running the application you will get output like this:

Here you can see that by default the Checkbox is checked so it's showing this value as True. Now I will uncheck the Checkbox and will see what will happen after unchecking.

Now you can see that the upon unchecking the value is changed to False, you can also see in the drop down that by default "Bike" is selected, this is because I had passed this value in the "DefaultSelected" variable. Now I will click on the Dropdown and you will see all the options that were provided through the options list.

From this Dropdown I had selected some other value and this is shown by the Label that is also bound to "DefaultSelected".