快捷導(dǎo)航

ASP.NET Web API教程創(chuàng)建Admin視圖詳細(xì)介紹

更新時(shí)間：2012年11月14日 13:56:50 作者：

現(xiàn)在我們轉(zhuǎn)入客戶端，并添加一個(gè)能夠使用從Admin控制器而來的數(shù)據(jù)的頁面。通過給控制器發(fā)送AJAX請(qǐng)求的方式，該頁面將允許用戶創(chuàng)建、編輯，或刪除產(chǎn)品

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.
現(xiàn)在我們轉(zhuǎn)入客戶端，并添加一個(gè)能夠使用從Admin控制器而來的數(shù)據(jù)的頁面。通過給控制器發(fā)送AJAX請(qǐng)求的方式，該頁面將允許用戶創(chuàng)建、編輯，或刪除產(chǎn)品。
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:
在“解決方案資源管理器”中，展開Controllers文件夾，并打開名為HomeController.cs的文件。這個(gè)文件是一個(gè)MVC控制器。添加一個(gè)名稱為Admin的方法：

復(fù)制代碼代碼如下:

 
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.
HttpRouteUrl方法創(chuàng)建了發(fā)送給Web API的URI，我們隨后把它存儲(chǔ)在視圖包（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.
下一步，把文本光標(biāo)定位到Admin動(dòng)作方法的內(nèi)部，然后右擊，并選擇“添加視圖”。這會(huì)帶出“添加視圖”對(duì)話框（見圖2-20）。
WebAPI2-20

圖2-20. 添加視圖
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.
在“添加視圖”對(duì)話框中，將此視圖命名為“Admin”。選中標(biāo)簽為“創(chuàng)建強(qiáng)類型視圖”的復(fù)選框。在“模型類”下面，選擇“Product (ProductStore.Models)”。保留所有其它選項(xiàng)為其默認(rèn)值（如圖2-21）。
WebAPI2-21

圖2-21. “添加視圖”對(duì)話框的設(shè)置
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.
點(diǎn)擊“添加”，會(huì)把一個(gè)名稱為Admin.cshtml的文件添加到Views/Home下。打開這個(gè)文件，并添加以下HTML。這個(gè)HTML定義了頁面的結(jié)構(gòu)，但尚未連接功能。

復(fù)制代碼代碼如下:

 
<div class="content"> 
<div class="float-left"> 
<ul id="update-products"> 
<li> 
<div><div class="item">Product ID</div><span></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</h2> 
<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
創(chuàng)建到Admin頁面的鏈接
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:
在“解決方案資源管理器”中，展開Views文件夾，然后展開Shared文件夾。打開名稱為_Layout.cshtml的文件。定位到id = "menu"的ul元素，和一個(gè)用于Admin視圖的動(dòng)作鏈接：

復(fù)制代碼代碼如下:

<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.
在這個(gè)例子項(xiàng)目中，我做了幾個(gè)其它裝飾性的修改，如替換了字符串“Your logo here（這是你的logo）”。這些不會(huì)影響此應(yīng)用程序的功能。你可以下載這個(gè)項(xiàng)目并比較此文件。
Run the application and click the “Admin” link that appears at the top of the home page. The Admin page should look like the following:
運(yùn)行該應(yīng)用程序，并點(diǎn)擊出現(xiàn)在首頁頂部的這個(gè)“Admin”鏈接。Admin頁面看上去應(yīng)當(dāng)像這樣（見圖2-22）：
WebAPI2-22

圖2-22. Admin頁面
Right now, the page doesn't do anything. In the next section, we'll use Knockout.js to create a dynamic UI.
此刻，這個(gè)頁面不做任何事情。在下一小節(jié)中，我們將使用Knockout.js來創(chuàng)建一個(gè)動(dòng)態(tài)UI。
Add Authorization
添加授權(quán)
The Admin page is currently accessible to anyone visiting the site. Let's change this to restrict permission to administrators.
Admin此刻可以被任何訪問網(wǎng)站的人所訪問。讓我們做點(diǎn)修改，把許可限制到管理員。
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:
先從添加“Administrator（管理員）”角色和administrator用戶開始。在“解決方案資源管理器”中，展開Filters文件夾，并打開名稱為InitializeSimpleMembershipAttribute.cs的文件，定位到SimpleMembershipInitializer構(gòu)造器。在對(duì)WebSecurity.InitializeDatabaseConnection的調(diào)用之后，添加以下代碼：

復(fù)制代碼代碼如下:

 
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.
這是添加“Administrator”角色并為該角色創(chuàng)建用戶的一種快速而直接的方式。
In Solution Explorer, expand the Controllers folder and open the HomeController.cs file. Add the Authorize attribute to the Admin method.
在“解決方案資源管理器”中，展開Controllers文件夾，并打開HomeController.cs文件。把Authorize（授權(quán)）注解屬性添加到Admin方法上：

復(fù)制代碼代碼如下:

 
[Authorize(Roles="Administrator")] 
public ActionResult Admin() 
{ 
return View(); 
}Open the AdminController.cs file and add the Authorize attribute to the entire AdminController class. 
打開AdminController.cs文件，并把Authorize注解屬性添加到整個(gè)AdminController類上： 
[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.
MVC和Web API都定義了Authorize注解屬性，但位于不同的命名空間。MVC使用的是System.Web.Mvc.AuthorizeAttribute，而Web API使用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.
現(xiàn)在，只有管理員才可以查看Admin頁面。而且，如果對(duì)Admin控制器發(fā)送一個(gè)HTTP請(qǐng)求，該請(qǐng)求必須包含一個(gè)認(rèn)證cookie。否則，服務(wù)器會(huì)發(fā)送一個(gè)HTTP 401（未授權(quán)）響應(yīng)。在Fiddler中，通過發(fā)送一個(gè)http://localhost:port/api/admin的GET請(qǐng)求，便會(huì)看到這種情況。

您可能感興趣的文章: