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

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/

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/

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

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

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (14)

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

Similaire à MVC4 – knockout.js – bootstrap – step by step – part 1 (20)

Plus de David Nguyen

Plus de David Nguyen (11)

Dernier

Dernier (20)

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