Creating Clickable Menu List Using Knockoutjs in ASP.Net Application

Introduction

In this article you will learn how to create a Clickable Menu List using Knockoutjs in an ASP.NET Application.

Step 1

First of all you need to add Knockout with the ASP.NET application. For that you can either download it from it's Home Site or you can download my Zip File that is provided above and then can fetch it and use it in your application.

After downloading this file go to your application and right-click then select "Add Existing Items", then browse to the file where you stored it and add it.

Now this file will be added to the Solution Explorer of your application, now drag it to the Head Section of your application.

</head>

Step 2

Now we will work on the ViewModel of our application.

function menuList() {

var self = this;

self.menu = ['Articles', 'Blogs', 'Tutorials', 'Books', 'Videos', 'NEWS'];

self.chosenMenu = ko.observable();

self.goToMenu = function (list) { self.chosenMenu(list); };

};

ko.applyBindings(new menuList());

</script>

Here first of all I had created a function named "menuList()". This is the main function in which all the work is to be done. After that in this function I had provided the List of Items in the "menu" property.

After that I had created a property named "chosenMenu" that is "Observable", in other words it can be Read or Written at run time.

I had also created a function named "goToMenu" in which chosenMenu is called.

In the end since I had already said that applyBindings is to be called so that Binding to the View can be done.

Until now our work on the ViewModel is completed. Now we will move towards the View of our Application.

Step 3

<div>

<li data-bind="text: $data,

css: { selected: $data == $root.chosenMenu() },

click: $root.goToMenu"></li>

</ul>

</div>

Here first I had used a <ul> tag in which foreach is used, foreach can be used to display the items as a list. Also a CSS Class Name is provided that will help the list to look like a Menu List otherwise it will just look like a Bulleted List, you can find this CSS attached in my Zip Code provided at the start of this article.

After that a <li> tag is used that will display the list of Items and whenever the user clicks on any of the Menu Items then "goToMenu" will be invoked. Here CSS is used to apply the "selected" class to the matching menu.

The complete code for this application is as follows:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication28.WebForm1" %>

<!DOCTYPE html>

</head>

<body>

<div>

<li data-bind="text: $data,

css: { selected: $data == $root.chosenMenu() },

click: $root.goToMenu"></li>

</ul>

</div>

function menuList() {

var self = this;

self.menu = ['Articles', 'Blogs', 'Tutorials', 'Books', 'Videos', 'NEWS'];

self.chosenMenu = ko.observable();

self.goToMenu = function (list) { self.chosenMenu(list); };

};

ko.applyBindings(new menuList());

</script>

</form>

</body>

</html>

Output

Now you can run your application, on debugging you will get an output window that will look like this:

If you Hover Over the Menu then you will see some changes in the list due to the CSS applied.

Now if you click on the Menu List then you will see they are clickable and their color + appearance are changed when clicked.