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"; }The KnockoutJS now has a observableArray of countries in the VewModel, that is bind to the country select.@ViewBag.Message
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.
No comments:
Post a Comment