Bind Password and Multi Line Textbox Using Knockout In MVC

Introduction

In my previous article How to Bind Textbox Using Knockout In MVC - Part 1 I told you how to bind a few different ways of Binding Textbox using Knockout in MVC Application.

This article is in continuation of that article since today's article is about some more HTML Controls that can be bound using Knockout in MVC.

Step 1

Since we are working on the same application I am directly jumping to the Model class where some slight changes need to be made.

Add this new variable to the previous code:

        public string PasswordValue { get; set; }

So now your Model has the following code:

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

}

Here I added a new variable named as "passwordValue".

Step 2

Now we will move towards the Controller Class of our application.

In the Controller Class you need to add this line of code:

      PasswordValue = "mypass"

I had passed a default value in the variable that was described in the previous step.

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

      };

             return View(model);

  }
}
}

Step 3

We we have now arrived at the final step of our application, in other words to the View of our application.

You need to update the View Code to the following:

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

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

            </table>

            </td>

        </tr>

        </table>

@ko.Apply(Model)

Here I added a Multiline Textbox and a Password Textbox in the first table, in the second table a new Label is added that will show the changes done in the Password Textbox.

Now your application is created and you can run it to see the output.

Output

First of all you will get output like this:

Now on making the changes in the multiline textbox all the other textboxes and the label that were bound to "StringValue" will be updated.

Until now you can see that the Password is showing as "mypass", now I am making changes in the Password textbox and you will see the changes regarding the Label that is also bound to the "PasswordValue".