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>
Join the conversation! Your thoughts help the community grow.