MVC4 – knockout.js – bootstrap – step by step – part 1

Nguyễn Ngọc Dũng

P a g e 1 | 28

https://nndung179.wordpress.com/

Contents O/ Things I do in this tutorial ........................................................................................................................ 2

I/ Database .................................................................................................................................................... 2

II/ Create New Project .................................................................................................................................. 3

2.1/ Create New Project MVC4 ................................................................................................................ 3

2.2/ Add Controller + Add View .............................................................................................................. 4

2.3/ Add Folder DTO + DAO ................................................................................................................... 6

2.3.1/ Add Database via LINQ TO SQL ............................................................................................... 6

2.3.2/ Add class handle data to DAO folder ....................................................................................... 10

2.3.3/ Create Stored Procedure for SELECT DATA .......................................................................... 11

2.3.4/ Add Stored Procedure to StudentDB.dbml ............................................................................... 11

2.3.5/ Code handle Get List Student of DAO class ............................................................................. 12

2.3.6/ Add handle function to Controller ............................................................................................ 13

III/ Ajax + Knockout.js + Jquery ................................................................................................................ 13

3.1/ Change something in your layout .................................................................................................... 14

3.2/ Create Folder contain Javascript file ................................................................................................ 14

3.3/ Go to view Index + doing something ............................................................................................... 16

3.4/ Put some code to StudentJS.js ......................................................................................................... 17

3.4.1/ Create Object with Contructor .................................................................................................. 17

3.4.2/ Function to Get data .................................................................................................................. 18

3.4.3/ Create View Model with Knockout.js ...................................................................................... 18

3.4.4/ Update your View Index ........................................................................................................... 19

3.4.5/ Run ............................................................................................................................................ 20

IV/ Bootstrap ............................................................................................................................................... 20

4.1/ Download and Install ....................................................................................................................... 20

4.2/ How to use ....................................................................................................................................... 24

4.3/ Run and feel cool ............................................................................................................................. 26

V/ Source Code ........................................................................................................................................... 28



P a g e 2 | 28


MVC4 – knockout.js – Bootstrap –

Step by Step – Part 1

Hello you guys.

In this article. I’m going to show you how to use MVC4 and Ajax

via KNOCKOUT.js. You guys just follow step by step of this article.

In the Part 1 => Just Interface and Select student

O/ Things I do in this tutorial

+ MVC 4 – Microsoft

+ knockout.js

+ Jquery

+ Bootstrap

+ Microsoft SQL

+ Stored Procedure

=> Enjoy your meal :)

I/ Database


https://nndung179.wordpress.com/2014/04/22/mvc4-knockout-js-bootstrap-step-by-step-part-1/

https://nndung179.wordpress.com/2014/04/22/mvc4-knockout-js-bootstrap-step-by-step-part-1/

http://knockoutjs.com/


P a g e 3 | 28


II/ Create New Project 2.1/ Create New Project MVC4

click OK to create new Project



P a g e 4 | 28


2.2/ Add Controller + Add View

I name this controller “Home”

And then I add view for this HomeController



P a g e 5 | 28


I use the default layout of this template



P a g e 6 | 28


2.3/ Add Folder DTO + DAO

DTO: Contain Database and object

DAO: Handle database (select, insert, update)

In folder Models => I create DTO and DAO folder

2.3.1/ Add Database via LINQ TO SQL

Right click on folder DTO => Add => New Item

Choose Data => LINQ to SQL Classes => Name it “StudentDB.dbml”



P a g e 7 | 28


The result we get from image above is a blank screen. Next thing, we’re going to do

is:

+ add connection from Server Explorer to the database

+ Drag database from Server Explorer to StudentDB.dbml



P a g e 8 | 28




P a g e 9 | 28


Just Drag this table to left pane of StudenDB.dbml



P a g e 10 | 28


2.3.2/ Add class handle data to DAO folder

Do following things like me



P a g e 11 | 28


2.3.3/ Create Stored Procedure for SELECT DATA

2.3.4/ Add Stored Procedure to StudentDB.dbml

+ Go to Server explorer => Expand folder Stored Procedure Folder. You’ll see the

stored you’ve just created



P a g e 12 | 28


+ Just Drag this stored to your Right Pane of StudentDB.dbml + Save it via (Ctrl +

S)

2.3.5/ Code handle Get List Student of DAO class

Go to StudentDAO.cs and take this code to select the list of student. Of course, you

can create your own function



P a g e 13 | 28


2.3.6/ Add handle function to Controller

III/ Ajax + Knockout.js + Jquery



P a g e 14 | 28


3.1/ Change something in your layout

Go to Shared => _Layout.cshtml => Change something as follow

I added 2 section to this layout.

+ David_Custom_CSS: to insert your custom link css

+ David_Custom_Scripts: to Insert your custom js link

3.2/ Create Folder contain Javascript file

+ Add folder and name it “My Script”



P a g e 15 | 28


+ Add javascript file to Folder “My Script” and name this javascript file

“StudentJS.js“



P a g e 16 | 28


3.3/ Go to view Index + doing something

In this section, you must add the link to reference to related .js file and .css file



P a g e 17 | 28


3.4/ Put some code to StudentJS.js

3.4.1/ Create Object with Contructor

If you don’t understand this code. You just go to GOOGLE => Search “Object In

Javascript“. I’m not going to explain this to you. Because it’s out of this article.



P a g e 18 | 28


3.4.2/ Function to Get data

I used ajax of Jquery to call the method in controller to recieve the data and store it in

array that I’m going to create in the model in next step.

3.4.3/ Create View Model with Knockout.js

You can figure how knockout.js work in this link: http://knockoutjs.com/


http://knockoutjs.com/


P a g e 19 | 28


3.4.4/ Update your View Index



P a g e 20 | 28


3.4.5/ Run

+ It worked, but it is so ugly.

IV/ Bootstrap If you’re really want to get a good interface. I recommend bootstrap.

4.1/ Download and Install

+ First, You need to access the link: http://getbootstrap.com/


http://getbootstrap.com/


P a g e 21 | 28


+ Download this. And you’ll get this



P a g e 22 | 28


+ Extract it, and go to this folder, and copy all files

+ Create Folder of Project, and name it “Bootstrap“



P a g e 23 | 28


+ Parse all file you’ve just copied from bootstrap folder

+ Expand all folder contain in “Bootstrap“. Place the link like below



P a g e 24 | 28


4.2/ How to use

Access like image below:

+ Go to table



P a g e 25 | 28


+ You now see much more example for using class of bootstrap. I’m going to choose

one

+ I choose “table table hover“. I must update my View Index like this.



P a g e 26 | 28


4.3/ Run and feel cool

+ The problem is the button is so ugly. I want it to be nice and cool. Like prior index.

We choose button instead table

+ It’s going to show you like below



P a g e 27 | 28


+ See examples and do like this

+ Ok let’s update the View Index again



P a g e 28 | 28


+ Run again and enjoy the tutorial :)

V/ Source Code

http://www.mediafire.com/download/jbua22nv4ekljk6/Knockout_1.rar


http://www.mediafire.com/download/jbua22nv4ekljk6/Knockout_1.rar

Technology

MVC4 – knockout.js – bootstrap – step by step – part 1