DotNetCurry Logo

Using Knockout.js Model Validation for ASP.NET MVC Models

Posted by: Mahesh Sabnis , on 6/4/2015, in Category ASP.NET MVC
Views: 27075
Abstract: Knockout.js provides UI independent Model validation features to help us out with client-side validation in ASP.NET MVC

Client-side validation improves performance and gives the users of our application, a better experience. Knockout.js is a lightweight JavaScript library for implementing MVVM based application development. In this article we will use Knockout.js for client-side data binding. We will also define the Knockout model for managing and validating employee information. The data will be posted to the server only if the required fields are filled by the end-user.

Note: Make sure to validate data on the server-side before it enters the database. If users turn off JavaScript in their browsers, client-side validations will not execute. Check my articles ASP.NET MVC: Self Validating Model objects and Custom Validation in ASP.NET MVC 3 using DataAnnonationsModelValidator on server-side validation. Also check Unobtrusive jQuery Validation for Knockout in ASP.NET MVC.

Step 1: Open Visual Studio 2013 and create an ASP.NET MVC application. In this application add a new SQL Server Database Application.mdf with the following table:

CREATE TABLE [dbo].[EmployeeInfo] (
    [EmpNo]       INT          IDENTITY (1, 1) NOT NULL,
    [EmpName]     VARCHAR (50) NOT NULL,
    [DeptName]    VARCHAR (50) NOT NULL,
    [Designation] VARCHAR (50) NOT NULL,
    [Salary]      DECIMAL (18) NOT NULL,
    PRIMARY KEY CLUSTERED ([EmpNo] ASC)
);

Step 2: In the Models folder, add a new ADO.NET Entity Framework of the name ApplicationEDMX. In the wizard, select Generate From Database. In the next step, select Application.mdf and EmployeeInfo table. After the completion of the wizard, the EmployeeInfo table mapping will be generated.

Step 3: In this project, add the jQuery, Bootstrap, Knockout.js and Knockout.validation JavaScript library references using NuGet package manager.

Step 4: In the Controllers folder, add a new ASP.NET WEB API 2 Controller with EntityFramework. Name it as EmployeeInfoAPIController. This will generate HTTP Action methods for GET, POST, PUT and DELETE.

Step 5: In the Controllers folder, add a new empty MVC EmployeeController. Generate an Empty Index View from Index action method.

Step 6: In the Index.cshtml, add the following JavaScript code:

<script type="text/javascript">

    var EmployeeInformationSystem = {};
    //The Model with the validation Rules
    EmployeeInformationSystem.EmployeeViewModel = function (emp) {
        var EmployeeInfoModel = ko.validatedObservable({
            EmpNo: ko.observable(emp.EmpNo),
            EmpName: ko.observable(emp.EmpName).extend({ required: true }),
            Salary: ko.observable(emp.Salary).extend({ required: true }),
            DeptName: ko.observable(emp.DeptName).extend({ required: true }),
            Designation: ko.observable(emp.Designation).extend({ required: true })
        });
         
        return EmployeeInfoModel;
    };


    // Bind the EmployeeInfo
    EmployeeInformationSystem.bindModel = function (emp) {
         
        // Create the view model
        EmployeeInformationSystem.EmpViewModel =
          EmployeeInformationSystem.EmployeeViewModel(emp);

        //The Validation initialization
        ko.validation.init({ messagesOnModified: false, errorClass: 'errorStyle', insertMessages: true });
        ko.applyBindings(this.EmpViewModel);
    };

    //Save the Information
    EmployeeInformationSystem.saveEmployee = function () {
        if (EmployeeInformationSystem.EmpViewModel.isValid()) {
            $.ajax({
                url: "/api/EmployeeInfoAPI",
                type: "POST",
                data: ko.toJSON(this),
                datatype: "json",
                contentType: 'application/json'
            }).done(function (res) {
                alert("Record Added Successfully" + res.EmpNo);
            }).error(function (err) {
                alert("Error " + err.status);
            });
        } else {
            alert("Please enter the valid data");
        }
    };
   
     

    $(document).ready(function () {
        EmployeeInformationSystem.bindModel({ EmpNo: 0, EmpName: "", Salary: 0, DeptName: "", Designation: "" });
    });
</script>

The above code has the following specifications:

  • The EmployeeViewModel is defined using ko.validateObservable(). This model defines Employee model properties using extend() function. This accepts the validation rules.
  • The bindModel function defines the EmpViwModel.  The bindModel function accepts the emp object. We will pass this object in the ready() function of jQuery. The bindModel() function also initializes the validation using ko.validation.init() function. This accepts the JSON object having validation styles information. The bindModel() function also applies the ViewModel using ko.applyBindngs.
  • The saveEmployee() function checks if the model is valid using isValid() function, if it is valid, then data will be posted to the server.

Step 7: On the Index.cshtml, add the following style and HTML markup on the top of the <script>

<style type="text/css">
    .errorStyle {
        border: 2px solid red;
        background-color: #fdd;
    }
</style>

<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-2.1.4.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/knockout-3.3.0.js"></script>
<script src="~/Scripts/knockout.validation.min.js"></script>


<h1>Employee Information System</h1>
<form method="post" action="">
    <table class="table table-bordered table-condensed table-striped" id="tblemp">
         
        <tr>
            <td>EmpName</td>
            <td>
                <input type="text" id="EmpName" data-bind="value:EmpName" />
            </td>
        </tr>
        <tr>
            <td>Salary</td>
            <td>
                <input type="text" id="Salary" data-bind="value:Salary" />
            </td>
        </tr>
        <tr>
            <td>DeptName</td>
            <td>
                <input type="text" id="DeptName" data-bind="value:DeptName" />
            </td>
        </tr>
        <tr>
            <td>Designation</td>
            <td>
                <input type="text" id="Designation" data-bind="value:Designation" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" value="Save" id="save"
                       data-bind="click: EmployeeInformationSystem.saveEmployee" class="btn btn-success" />
            </td>
            <td></td>
        </tr>
    </table>
     
</form>

Note that the CSS of name errorStyle is defined to apply for validations. The HTML elements are applied with data binding using data-bind.

Run the application, the Validation will be displayed as following:

knockoutjs-validations

Click on the save button, the following alert message will be displayed:

knockoutjs-mvc-validations

Start entering data in TextBoxes and the validation message goes away when the tab is pressed.

Conclusion: Validation in Web application development plays a very important role in making sure that valid data is stored by the application. Client-side validation helps to provide responsive interaction to the end-user for invalid data entered. Knockout.js provides UI independent Model validation features to help us out with client-side validation.

Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+
Further Reading - Articles You May Like!
Author
Mahesh Sabnis is a DotNetCurry author and Microsoft MVP having over 17 years of experience in IT education and development. He is a Microsoft Certified Trainer (MCT) since 2005 and has conducted various Corporate Training programs for .NET Technologies (all versions). Follow him on twitter @maheshdotnet


Page copy protected against web site content infringement 	by Copyscape




Feedback - Leave us some adulation, criticism and everything in between!