Creating Click Counter Using Knockout in MVC4

Introduction

In today's article you will learn how to create a Click Counter using Knockout in MVC4.

In my previous articles I told you about:

1. How to use Knockout in MVC.
2. How to use Observable Property of Knockout in MVC.
3. How to use Computed Property of Knockout in MVC.

In today's article we will create a small application "Click Counter" that will update a counter on a button click but when the counter reaches a defined number of clicks the button will become disabled.

Let's see the procedure to create this application.

Step 1

First of all you need to add a few external files to your application. That is the main thing to do to create a Knockout Application. If you don't add these files then there is no way to run your application.

The files are as follows:

1. Knockout-2.3.0.js
2. jquery-1.3.2.min.js
3. knockout.mapping-latest.js
4. perpetuum.knockout.js

You can either download these files from the internet or can download the zip file provided at the top of this article and then fetch these files from there.

Step 2

After adding these files to our application now our work is to work on the model of our application. For working on the model you need to add a new class to your model, this can be done by right-clicking on the model and then choosing to add a new class.

I had named this Model class "Class1.cs".

Now you need to work on this class, here we will declare some variables that are to be used in our application as in the following:

using System.ComponentModel.DataAnnotations.Schema;

 

namespace MvcApplication20.Models

{

    public class Class1

    {

        public int NumberOfClicks { get; set; }

 

        [Computed]

        public bool HasClickedTooManyTimes

        {

            get { return NumberOfClicks >= 3; }

        }

 

        public void RegisterClick()

        {

            NumberOfClicks++;

        }

 

        public void ResetClicks()

        {

            NumberOfClicks = 0;

        }

    }

}

Here I have declared a variable named "NumberOfClicks" that will be used to maintain the number of times a user has clicked on the button.

Next I declared a variable under the "Computed" Class named "HasClickedTooManyTimes". This variable will work when the NumberOfClicks is more than 3.

After that "RegisterClick" is defined which will increase the NumberOfClicks by one per click.

At the end "ResetClicks" is defined that will reset the NumberOfClicks back to zero.

Step 3

Now we will work on the Controller of our application, but before working on the Controller you need to add a View class to your application. You need to add a View Class in the View Folder. First I added a folder to this View Folder named Home folder and then in this Home folder I added a View Class. This can be done by right-clicking on the folder and then choosing to "Add a New View".

I named this View Class "index.cshtml".

Now we can move to the Controller of our application. Here also you need to right-click on your Controller Folder and then choose "Add a Controller Class".

I named this controller class as "HomeController.cs".

Write this code in the HomeController class:

using PerpetuumSoft.Knockout;

 

namespace MvcApplication20.Controllers

{

    public class HomeController : Controller

    {

        public ActionResult Index()

        {

            return View(new Class1());

        }

        public ActionResult RegisterClick(Class1 model)

        {

            model.RegisterClick();

            return Json(model);

        }

        public ActionResult ResetClicks(Class1 model)

        {

            model.ResetClicks();

            return Json(model);

        }

    }

}

A Controller is used to handle Events. Here events will be handled on RegisterClick and ResetClick.

Step 4

Now we will move to the View of our application, in other words the Index file of our application.

Write this code in the View of your application.

<script src="~/Scripts/knockout-2.3.0.js"></script>

<script src="~/Scripts/jquery-1.7.2.min.js"></script>

<script src="~/Scripts/knockout.mapping-latest.js"></script>

<script src="~/Scripts/perpetuum.knockout.js"></script>

 

@using PerpetuumSoft.Knockout

@model MvcApplication20.Models.Class1

@{

    var ko = Html.CreateKnockoutContext();

    }

<div>You've clicked @ko.Html.Span(m => m.NumberOfClicks) times</div>

@ko.Html.Button("Click me", "RegisterClick", "Home").Disable(m => m.HasClickedTooManyTimes)

<div @ko.Bind.Visible(m => m.HasClickedTooManyTimes)>

  That's too many clicks! Please stop before you wear out your fingers.

  @ko.Html.Button("Reset","ResetClicks","Home")

</div>

 

@ko.Apply(Model)

Here you can see that I had added all the files that  I suggested to add at the start of this article.

After that I had added an assembly of "PerpetuumSoft.Knockout". This will help in the binding of this index.

After that I declared a variable "ko" that will be used to get Knockout in the HTML Controls of our application.

The following will help to get the value of NumberOfClicks from the Model of our application:

@ko.Html.Span(m => m.NumberOfClicks)

Here the magic is that we had not declared any variable "m", eventhough it is calling the variables that are defined in the model.

Then in the next line I created a button in which the first text is provided that will be written on the button "Click me". After that the Action name is provided that was declared in the Controller class and will work on this button, in other words "RegisterClick"; at the end Controller name is provided, in other words "Home". With this button one more thing is attached that is "Disable", this disable is used to disable something until its condition is not fulfilled.

After that a Div is provided whose binding is done with the "hasClickedTooManyTimes", this div contains a button that is bound with the "ResetClicks" action and will only be available when the user clicks on the first button three times.

Now our application is created and can be debugged.

Output

First you will get output like this:

But as you start clicking on the button then you will get output like this: