第 4 部分：新增管理員檢視

作者：Rick Anderson

下載已完成的專案

新增管理員檢視

現在，我們將轉向用戶端，並新增一個頁面，以取用來自管理員控制器的資料。 該頁面可讓使用者將 AJAX 要求傳送至控制器，以建立、編輯或刪除產品。

在 [方案總管] 中，展開 [控制器] 資料夾，然後開啟名為 HomeController.cs 的檔案。 此檔案包含 MVC 控制器。 新增名為 Admin 的方法：

public ActionResult Admin()
{
    string apiUri= Url.HttpRouteUrl("DefaultApi", new { controller = "admin", });
    ViewBag.ApiUrl = new Uri(Request.Url, apiUri).AbsoluteUri.ToString();

    return View();
}

HttpRouteUrl 方法會建立 Web API 的 URI，我們稍後會將此 URI 儲存在檢視包中。

接下來，將文字游標放在 Admin 動作方法內，然後按一下滑鼠右鍵，並選取 [新增檢視]。 這會顯示 [新增檢視] 對話方塊。

在 [新增檢視] 對話方塊中，將檢視命名為 [管理員]。 選取標示為 [建立強型別檢視] 的核取方塊。 在 [模型類別] 下，選取 [產品 (ProductStore.Models)]。 保留所有其他選項的預設值。

按一下 [新增] 會在 [檢視/首頁] 底下新增名為 Admin.cshtml 的檔案。 開啟此檔案並新增下列 HTML。 此 HTML 會定義頁面的結構，但尚未連接任何功能。

<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>

建立管理員頁面的連結

在 [方案總管] 中，展開 [檢視] 資料夾，然後展開 [共用] 資料夾。 開啟名為 _Layout.cshtml 的檔案。 找出 id = “menu” 的 ul 元素，以及管理員檢視的動作連結：

<li>@Html.ActionLink("Admin", "Admin", "Home")</li>

注意

在範例專案中，我做了一些其他外觀變更，例如取代字串「您的標誌在這裡」。 這些不會影響應用程式的功能。 您可以下載專案並比較檔案。

執行應用程式，然後按一下顯示在首頁頂端的 [管理員] 連結。 管理員頁面應該看起來類似下列：

現在，頁面不會執行任何動作。 在下一節中，我們將使用 Knockout.js 來建立動態 UI。

新增授權

造訪網站的任何人目前都可以存取 [管理員] 頁面。 讓我們變更此選項，以限制管理員的權限。

首先，新增「管理員」角色和管理員使用者。 在 [方案總管] 中，展開 [篩選條件] 資料夾，然後開啟名為 InitializeSimpleMembershipAttribute.cs 的檔案。 找出 SimpleMembershipInitializer 建構函式。 呼叫 WebSecurity.InitializeDatabaseConnection 之後，新增下列程式碼：

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);
}

這是新增「管理員」角色並為該角色建立使用者的臨時應急方式。

在 [方案總管] 中，展開 [控制器] 資料夾，然後開啟名為 HomeController.cs 的檔案。 將授權屬性新增至 Admin 方法。

[Authorize(Roles="Administrator")]
public ActionResult Admin()
{
    return View();
}

開啟 AdminController.cs 檔案，並將授權屬性新增至整個 AdminController 類別。

[Authorize(Roles="Administrator")]
public class AdminController : ApiController
{
    // ...

注意

MVC 和 Web API 都會在不同的命名空間中定義授權屬性。 MVC 使用 System.Web.Mvc.AuthorizeAttribute，而 Web API 則使用 System.Web.Http.AuthorizeAttribute。

現在只有管理員可以檢視 [管理] 頁面。 此外，如果您將 HTTP 要求傳送至管理員控制器，要求中必須包含驗證 Cookie。 如果沒有，伺服器會傳送 HTTP 401 (未經授權) 回應。 您可以在將 GET 要求傳送至 http://localhost:*port*/api/admin 時，在 Fiddler 中看到此。

上一個下一個