Bind Multi Select List Box and Radio Buttons 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
3. How to Bind Checkbox and Dropdown Menu Using Knockout in MVC.

In this article I will tell you how to bind a Multi-Select Drop Down and Radio Buttons Using Knockout in MVC.

Step 1

We are working on 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 List<string> SelectMultipleOptions { get; set; }

        public string RadioButtons { get; set; }

Here I created a list of strings named "SelectMultipleOptions".

After that I created another variable named "RadioButtons".

Since we had added this code in the previous application your final code should be like this:

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; }

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

        public string RadioButtons { get; set; }
    }

}

Step 2

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

      SelectMultipleOptions = new List<string> { "Bike" },

      RadioButtons = "Car"

Here I declared the default value for both SelectMultipleOptions as well as for RadioButtons.

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",

      SelectMultipleOptions = new List<string> { "Bike" },

      RadioButtons = "Car"

      };

             return View(model);

        }
    }

}

Step 3

Now we will proceed towards the View Class of our application. Here in this class the 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>

                  <tr>

          <td>Select Multiple Options:</td>

          <td>@ko.Html.ListBox(m => m.Options).SelectedOptions(m => m.SelectMultipleOptions)</td>

        </tr>

                  <tr>

          <td>Click on One Radio Button:</td>

          <td>

            @ko.Html.RadioButton(m => m.RadioButtons, new { value = "Car" }) Car

            @ko.Html.RadioButton(m => m.RadioButtons, new { value = "Bike" }) Bike

            @ko.Html.RadioButton(m => m.RadioButtons, new { value = "Cycle" }) Cycle

          </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>

                    <tr>

          <td>From Multiple Options You Select:</td>

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

        </tr>

                    <tr>

          <td>From Radio button you select:</td>

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

        </tr>

            </table>

            </td>

        </tr>

        </table>

@ko.Apply(Model)

As you can see in the first Table, two new rows are added, in the first row a Multi-Select List box is bound with the options and in the second row Radio Buttons are bound with the RadioButtons.

Now you can run your application and can see the output.

Output

On running the application you will get an output like this one:

In the preceding Image you can see that by default bike is selected in the Multi Select List Box and car is selected in the Radio Button. Now I will select all the options available and you will see the changes in the Labels that are also bound with the respective varibales.

You can see in the selected Text that they are changed based on the changes of the values selected in Multi-Select List Box. Now I will select a different option in the Radio Button and you will see the change in the Label that is also bound to the same variable.

You can see on selecting "Cycle" in the radio button, Label is also changed to show the Cycle.