WebAPI/KO App (2)

Adding an Admin View
(1) Now that set up CRUD function in WEBAPI, we will turn to client side and add pages that can consume the data.

Go to HomeController, add an [Admin] method. 
image
Create a new View for this new Controller
image
(2) Update Admin.cshtml view per the instructions.
image
Open /Views/Shared/_Layout.cshtml, update the shared “master page” to add a link to the /Home/Admin
image
Clicking on [Admin] you get this:

However, Admin page is only meant for Admin, so add authorization.
To Add the Administrator (role) and Administrator (user name), open this file:
image

And Add these lines to check/create the roles/user. (quick and dirty to add user/role; not good practice)
image
In /Home/Admin (action), allow only Administration Role
image
In the /Admin (controller), allow only Administrator
image

Difference between WebAPI and MVC’s [Authorize]
MVC: System.Web.Mvc.AuthorizeAttribute
Web API: System.Web.Http.AuthorizeAttribute

Creating a Dynamic UI with Knockout.js
KO makes it easy to bind HTML to data.
image
First we define [ViewModel]. Add this to Admin.cshtml to include the KO library.
image
Inside the empty <script> tag, we will define the ViewModel:
image
Outside of ProductViewModel(), do this:
image
So the binding can occur as soon as all HTML/script loaded.


Create a ProductDTO to hide the properties that you want to hide from the public – such as ActualPrice. 
image
Then create a ProductController,
image
ProductController:
image
The MapProducts() returns a IQuerable, so we can use it in other queries.
Create another DTO: OrderDTO. (nested classes?)
image
Add a new OrdersController
image
Creating Main Page
Open /Home/index.cshtml, replace all HTML as indicated.
A typical jquery AJAX POST POST – success and error
image
07:26pm, 01/25/2013

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s