Bind Textbox Using Knockout In MVC

Anubhav Chaudhary

2y21.2k6100Article

6 Comments

Join the conversation! Your thoughts help the community grow.

Anubhav Chaudhary13y ago
You may also go to the Download Section of the C-Sharpcorner.com
Anubhav Chaudhary13y ago
For Downloading the Perpetuum click on this link:- http://www.c-sharpcorner.com/downloads/747/knockoutjs-and-perpetuum.aspx
Premanjali Gupta13y ago
sir I am not able to install "Perpetuumsoft" from net.can u provide the link from where i can install it.
- Anubhav Chaudhary13y ago
  Hey Premanjali, I will provide you the link to the Download where I'll provide all the versions of Knockout Scripts with Perpetuum and other required Jquery files but for that you need to wait for today.
- Anubhav Chaudhary13y ago
  Hey Premanji, click on this link for downloading the Perpetuum:- http://www.c-sharpcorner.com/downloads/747/knockoutjs-and-perpetuum.aspx
Mahesh Chand13y ago
Good Job Anubhav. I will change title from "Binding Various Controls" to "Binding TextBox".. various controls do not make sense. And each Part should say different control in the title.

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.

Knockout-2.3.0.js
Pepetuum.js
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.

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.

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

Controller class

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.

Output

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

TextBox

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

Changes made