The first article was introductory: Customer KnockoutJS and MVC demo using JSON
Now I am going to focus on KnockoutJS and validation. I am going to use a KnockoutJS Plugin for model and property validation that is named Knockout Validation. You can download it from here.
The Asp.Net MVC Controller have the actions to Get and Add a customer. This example has a new customer property: the country.
This property allows to add an input type select to KnockoutJS and validation.
namespace KnockoutDemo.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
ViewBag.Message = "";
return View();
}
[AcceptVerbs(HttpVerbs.Post)]
public JsonResult Get(int customerID)
{
// Get the customer ...
Customer customer = new Customer {CustomerID = customerID,
FirstName = "John",
LastName = "Doe",
IsMale = true,
CountryID = 1 };
return Json(customer);
}
[HttpPost]
public JsonResult Add(Customer customer)
{
// Save the customer ...
// return status message
var message = string.Format("Customer: {0} {1} Added. IsMale: {2} Age:{3} CountryID: {4} ",
customer.FirstName, customer.LastName, customer.IsMale.ToString(),
customer.Age.ToString(), customer.CountryID.ToString());
return Json(message);
}
}
}
The Asp.Net MVC model is the customer with the new property:
namespace KnockoutDemo.Models
{
public class Customer
{
public int CustomerID { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public bool IsMale { get; set; }
public int Age { get; set; }
public int CountryID { get; set; }
}
}
The Asp.Net MVC Layout includes the new knockout validation plugin:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/knockout.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/json2.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/knockout.validation.js")" type="text/javascript"></script>
</head>
<body>
<div class="page">
<header>
<div id="title">
<h1>Knockout Demo</h1>
</div>
<div> </div>
</header>
<div> </div>
<div> </div>
<section id="main">
@RenderBody()
</section>
<footer>
</footer>
</div>
</body>
</html>
And the Asp.Net MVC view has the KnockoutJS and validation specifics:
@{
ViewBag.Title = "Add Customer";
}
@ViewBag.Message
The KnockoutJS now has a observableArray of countries in the VewModel, that is bind to the country select.Note the data-bind oprtions of the select:
- options: controls what options should appear in a drop-down lis
- optionsValue: The name of the ViewModel property to bind to the option value
- optionsText: The name of the ViewModel property to bind to the option text
- value: The name of the ViewModel property to bind to the selected value
- optionsCaption: The option that is used to make the user select a value on the select list
There is also the validation plugin specifics in the VewModel declaration:
- The extend is used to extend the observables with the validation rules. (you can read about all of them here)
In the example I am using the required (required: true) and number (number: true) validation rules.
- validatedObservable in the view model declaration
- isValid() - Before saving the data validate that the model is valid
- validation.init - Used to configure the validation engine
In the example the invalid inputs are painted in red, that is where the css class is used by the validation.
