Create Animated Transition Using Knockoutjs in ASP.Net Application

Introduction

This article explains how to create an Animated Transition using Knockoutjs in an ASP.NET Application.

In previous articles you saw things going in a simple way and there was not much to think about but this article will help you to create new things using Knockoutjs.

In this article I will show you a list of Cars and Bikes in different way.

Step 1

First of all you need to add two external files to your application.

1. Knockout-2.3.0.js
2. jquery-1.3.2.min.js

Without these files your application will not run, so first add them. You can either download them from the internet or you can download the Zip file provided at the top of this article.

Step 2

Now we will work at the ViewModel of this application, write this code in the ViewModel of your application.

        <script>

            function carsbikesModel() {

    this.carsbikes = ko.observableArray([

        { name: "Alto", type: "car"},

        { name: "Santro", type: "car" },

        { name: "i20", type: "car" },

        { name: "Jazz", type: "car" },

        { name: "Verna", type: "car" },

        { name: "Civic", type: "car"},

        { name: "Pulsar 220", type: "bike"},

        { name: "Pulsar 150", type: "bike" },

        { name: "Karizma", type: "bike"},

        { name: "Apache 160RTR", type: "bike" },

        { name: "Apache 180RTR", type: "bike" },

        { name: "Discover", type: "bike" },

        { name: "Splendor", type: "bike" }

    ]);

 

    this.typeToShow = ko.observable("all");

    this.displayAdvancedOptions = ko.observable(false);

 

    this.addcarsbikes = function(type) {

        this.carsbikes.push({

            name: "New Car/Bike",

            type: type

        });

    };

 

    this.carsbikesToShow = ko.computed(function() {

        var desiredType = this.typeToShow();

        if (desiredType == "all") return this.carsbikes();

        return ko.utils.arrayFilter(this.carsbikes(), function(CarsBikes) {

            return CarsBikes.type == desiredType;

        });

    }, this);

    this.showcarsbikesElement = function(elem) { if (elem.nodeType === 1) $(elem).hide().slideDown() }

    this.hidecarsbikesElement = function(elem) { if (elem.nodeType === 1) $(elem).slideUp(function() { $(elem).remove(); }) }

};

ko.bindingHandlers.fadeVisible = {

    init: function(element, valueAccessor) {

        var value = valueAccessor();

        $(element).toggle(ko.utils.unwrapObservable(value));

    },

    update: function(element, valueAccessor) {

        var value = valueAccessor();

        ko.utils.unwrapObservable(value) ? $(element).fadeIn() : $(element).fadeOut();

    }

};

 

ko.applyBindings(new carsbikesModel());

        </script>

Here first I created a function named "carsbikesModel", in this function I created an Observable Array named "carsbikes". In this Array I passed some names of Cars and Bikes and also provided the type as car or bike.

Then I created an Observable named "typeToShow", initially it's value is given as "All". I had created one more Observable named "displayAdvancedOption" that will remain false until you change it at run time.

Then a function is created named "addcarbikes", this function will be used to add a new entry in the Array at run time.

After that I created a computed function named "carsbikesToShow", this computed function will show the data according to the selection made by the user.

Towards the end, Custom Binding is done through the "bindingHandlers", as you know whenever we want to use any external jQuery or any other client-side file then we need to cerate a Custom binding, in this Custom Binding "init" and "update" functions are used.

Then binding is applied to the "carsbikesModel" function. Now our work on the ViewModel is completed so now we will move to the view part of our application.

Step 3

In the view part you need to add the following code:

<div class='CarsBikesDiv'>   

    <h2>Cars and Bikes</h2>

    <p>

        <label>

            <input type='checkbox' data-bind='checked: displayAdvancedOptions' />

            Display advanced options

        </label>

    </p>

    

    <p data-bind='fadeVisible: displayAdvancedOptions'>

        Show:

        <label><input type='radio' name="type" value='all' data-bind='checked: typeToShow' />All</label>

        <label><input type='radio' name="type" value='car' data-bind='checked: typeToShow' />Cars</label>

        <label><input type='radio' name="type" value='bike' data-bind='checked: typeToShow' />Bikes</label>

    </p>

    

    <div data-bind='template: { foreach: carsbikesToShow,

                                beforeRemove: hidecarsbikesElement,

                                afterAdd: showcarsbikesElement }'>

        <div data-bind='attr: { "class": "CarsBikes " + type }, text: name'> </div>

    </div>

    

    <p data-bind='fadeVisible: displayAdvancedOptions'>

        <button data-bind='click: addcarsbikes.bind($data, "car")'>Add Car</button>

        <button data-bind='click: addcarsbikes.bind($data, "bike")'>Add Bike</button>

    </p>  

</div>

In the view part I had used a "checkBox" bound to the "displayAdvancedOptions". By default this check box will be unchecked but the user can check it if he wants to see the Advanced Options.

After that I used three Radio Buttons using the Custom Binding with the "displayAdvancedOptions", so these Radio buttons can only be seen if the user clicks on the Checkbox provided earlier.

After that two Div's are used that will show all the Cars and Bikes initially but will change to a specific group if the user clicks on one of the Radio Buttons provided above.

Toward the end I provided two Buttons that will be used to add a new Bike or Car to the Array.

Now your application is completed and you can run it.

Output

On running the application you will get output like this:

In the preceding image you can see that all the data is available in the Grid Format and no Radio Button. The buttons are visible, but as you click on the Checkbox button then this will happen:

Now you can see that all the Radio Buttons, Buttons are visible on the screen with the Data. Now if you click on one of the Radio Buttons, for example "Cars" then only Cars will be shown to you.

Now I am clicking on the Bikes and you can see that all the Cars are hidden and all the Bikes are shown.

You can click on the Add bike or Add Car button and they will make a new entry in the Array.