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

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:

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

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.

This article has been editorially reviewed by Suprotim Agarwal.

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

Author

Mahesh Sabnis is a DotNetCurry author and a Microsoft MVP having over two decades 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), and Front-end technologies like Angular and React. Follow him on twitter @maheshdotnet or connect with him on LinkedIn