Bind Textbox Using Knockout In MVC

Introduction

In today's article, you will learn how to bind various HTML Controls using Knockout in MVC.

There are many types of HTML Controls, and each can be bound using Knockout. If you are using Knockout with MVC, then this article will help you to understand how to bind them.

Step 1. First of all, you need to add a few external files to your application, which are as follows.

1. Knockout-2.3.0.js
2. Pepetuum.js
3. Knockout.mapping-Latest.js

These files can be downloaded from the internet.

Step 2. After adding these files to your application, you need to call these files so that they can be used by the application. To do so, you need to add a View Class.

This can be added by right-clicking on the View Folder and then choosing to add a new View Class.

Step 3. Now, these files can be used in our application, so let's work on it. First, we will add a Model Class to our Model Folder. This can be done by right-clicking on the Model Class and then choosing to add a new class.

Now, in this class, write the following code.

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

This code will add a new variable named "StringValue".

Step 4. Now we will work on the Controller class of our application, for that you need to add a Controller class to your application, this can be done by right-clicking on the Controller Folder and then choosing to add a new Controller.

After adding the Controller file, add this code to your class.

using MvcApplication20.Models;
using PerpetuumSoft.Knockout;

namespace MvcApplication20.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            var model = new Class1
            {
                StringValue = "Hello",
            };

            return View(model);
        }
    }
}

Here I have passed some default value in the "StringValue", this value will be available at the run time of the application.

Step 5. Now, it's time to work on the view of our application. Since we already added a View class in the first step of this article, we can work on that class directly.

Write this code on the View class of your application.

<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>
            </table>
        </td>
    </tr>
    <tr>
        <td>
            <table>
                <tr>
                    <td>Text value:</td>
                    <td @ko.Bind.Text(m => m.StringValue)></td>
                </tr>
            </table>
        </td>
    </tr>
</table>

@ko.Apply(Model)

Here first I called the three external files that we had added earlier at the start of this article, after that, I created a table in which two other tables were created.

In the first table, two TextBoxes are used. The first TextBox will update the ViewModel when the user clicks outside this TextBox after making the changes, but the second TextBox will show the updates as the user makes changes in it.

For showing the changes a Label is also used in the second table. So when the user makes changes in any of the TextBoxes, then all the remaining TextBoxes with a label on the second table will be updated at run time.

Output

When running the application, you will get output like this one.

Now, if I make changes in the first TextBox and click outside, then all the remaining TextBoxes, along with the Label, will be updated.

But if I make changes in the second TextBox, then the updates will be shown with the changes made.