Create Admin view in ASP. NET Web API tutorial

Now we'll turn to the client side, and add a page that can consume data from the Admin controller. the page will allow users to create, edit, or delete products, by sending AJAX requests to the controller.
Now we are transferring to the client and adding a page that can use data from the Admin controller. By sending an AJAX request to the Controller, this page allows users to create, edit, or delete products.
In Solution Explorer, expand the Controllers folder and open the file named HomeController. cs. This file contains an MVC controller. Add a method named Admin:
In Solution Explorer, expand the Controllers folder and open the file HomeController. cs. This file is an MVC controller. Add a method named Admin:
Copy codeThe Code is as follows:
Public ActionResult Admin ()
{
String apiUri = Url. HttpRouteUrl ("DefaultApi", new {controller = "admin ",});
ViewBag. ApiUrl = new Uri (Request. Url, apiUri). AbsoluteUri. ToString ();
Return View ();
}

The HttpRouteUrl method creates the URI to the web API, and we store this in the view bag for later.
The HttpRouteUrl method creates the URI sent to the Web API. We then store it in the view bag.
Next, position the text cursor within the Admin action method, then right-click and select Add View. This will bring up the Add View dialog.
Next, place the text cursor inside the Admin action method, right-click it, and select "add view ". This will bring out the "add view" dialog box (see Figure 2-20 ).
 
Figure 2-20. Add a view
In the Add View dialog, name the view "Admin ". select the check box labeled Create a strongly-typed view. under Model Class, select "Product (ProductStore. models )". leave all the other options as their default values.
In the "add view" dialog box, name this view "Admin ". Select the check box where the label is "Create strong view. Under "model class", select "Product (ProductStore. Models )". Retain all other options as their default values (2-21 ).
 
Figure 2-21. settings in the "add view" dialog box
Clicking Add adds a file named Admin. cshtml under Views/Home. Open this file and add the following HTML. This HTML defines the structure of the page, but no functionality is wired up yet.
Click Add to add a file named Admin. cshtml to Views/Home. Open the file and add the following HTML. This HTML defines the structure of the page, but it is not connected.
Copy codeThe Code is as follows:
<Div class = "content">
<Div class = "float-left">
<Ul id = "update-products">
<Li>
<Div> <div class = "item"> Product ID </div> <span> </div>
<Div> <div class = "item"> Name </div> <input type = "text"/> </div>
<Div> <div class = "item"> Price ($) </div> <input type = "text"/> </div>
<Div> <div class = "item"> Actual Cost ($) </div> <input type = "text"/> </div>
<Div>
<Input type = "button" value = "Update"/>
<Input type = "button" value = "Delete Item"/>
</Div>
</Li>
</Ul>
</Div>
<Div class = "float-right">
<H2> Add New Product <Form id = "product">
@ Html. ValidationSummary (true)
<Fieldset>
<Legend> Contact </legend>
@ Html. EditorForModel ()
<P>
<Input type = "submit" value = "Save"/>
</P>
</Fieldset>
</Form>
</Div>
</Div>

Create a Link to the Admin Page
Create a link to the Admin page
In Solution Explorer, expand the Views folder and then expand the Shared folder. open the file named _ Layout. cshtml. locate the ul element with id = "menu", and an action link for the Admin view:
In Solution Explorer, expand the Views folder and then expand the Shared folder. Open the file named _ Layout. cshtml. Locate the ul element of id = "menu" and link to an action for the Admin View:
Copy codeThe Code is as follows:
<Li> @ Html. ActionLink ("Admin", "Admin", "Home") </li>

In the sample project, I made a few other cosmetic changes, such as replacing the string "Your logo here ". these don't affect the functionality of the application. you can download the project and compare the files.
In this example project, I made several other decorative changes, such as replacing the string "Your logo here (this is Your logo )". These will not affect the functionality of this application. You can download the project and compare the file.
Run the application and click the "Admin" link that appears at the top of the home page. The Admin page shoshould look like the following:
Run the application and click the "Admin" link at the top of the homepage. The Admin page looks like this (see Figure 2-22 ):

Figure 2-22. Admin page
Right now, the page doesn't do anything. In the next section, we'll use Knockout. js to create a dynamic UI.
At this moment, this page does not do anything. In the next section, we will use Knockout. js to create a dynamic UI.
Add Authorization
Add authorization
The Admin page is currently accessible to anyone visiting the site. Let's change this to restrict permission to administrators.
At this moment, Admin can be accessed by anyone who accesses the website. Let's make some modifications to limit the license to the Administrator.
Start by adding an "Administrator" role and an administrator user. in Solution Explorer, expand the Filters folder and open the file named InitializeSimpleMembershipAttribute. cs. locate the SimpleMembershipInitializer constructor. after the call to WebSecurity. initializeDatabaseConnection, add the following code:
Start by adding the "Administrator" role and the administrator user. In Solution Explorer, expand the Filters folder, open the file named InitializeSimpleMembershipAttribute. cs, and locate the SimpleMembershipInitializer constructor. After calling WebSecurity. InitializeDatabaseConnection, add the following code:
Copy codeThe Code is as follows:
Const string adminRole = "Administrator ";
Const string adminName = "Administrator ";
If (! Roles. RoleExists (adminRole ))
{
Roles. CreateRole (adminRole );
}
If (! WebSecurity. UserExists (adminName ))
{
WebSecurity. CreateUserAndAccount (adminName, "password ");
Roles. AddUserToRole (adminName, adminRole );
}

This is a quick-and-dirty way to add the "Administrator" role and create a user for the role.
This is a fast and direct way to add the "Administrator" role and create users for this role.
In Solution Explorer, expand the Controllers folder and open the HomeController. cs file. Add the Authorize attribute to the Admin method.
In Solution Explorer, expand the Controllers folder and open the HomeController. cs file. Add the Authorize (authorization) annotation attribute to the Admin method:
Copy codeThe Code is as follows:
[Authorize (Roles = "Administrator")]
Public ActionResult Admin ()
{
Return View ();
} Open the AdminController. cs file and add the Authorize attribute to the entire AdminController class.
Open the AdminController. cs file and add the Authorize annotation attribute to the entire AdminController class:
[Authorize (Roles = "Administrator")]
Public class AdminController: ApiController
{
//...

MVC and Web API both define Authorize attributes, in different namespaces. MVC uses System. Web. Mvc. AuthorizeAttribute, while Web API uses System. Web. Http. AuthorizeAttribute.
Both MVC and Web APIs define the Authorize annotation attribute, but they are located in different namespaces. MVC uses System. Web. Mvc. AuthorizeAttribute, while Web API uses System. Web. Http. AuthorizeAttribute.
Now only administrators can view the Admin page. also, if you send an HTTP request to the Admin controller, the request must contain an authentication cookie. if not, the server sends an HTTP 401 (Unauthorized) response. you can see this in Fiddler by sending a GET request to http: // localhost: port/api/admin.
Only Administrators can view the Admin page. In addition, if an HTTP request is sent to the Admin controller, the request must contain an authentication cookie. Otherwise, the server sends an HTTP 401 (unauthorized) response. In Fiddler, you can see this situation by sending an http: // localhost: port/api/admin GET request.