第 4 部分：添加管理员视图

作者：里克·安德森

下载已完成的项目

添加管理员视图

现在，我们将转到客户端，并添加一个可以使用Admin控制器中数据的页面。 该页面将允许用户通过向控制器发送 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 ，然后右键单击并选择“ 添加视图”。 此时会显示“ 添加视图 ”对话框。

在 “添加视图 ”对话框中，将视图命名为“Admin”。 选中标记为 “创建强类型视图”的复选框。 在 Model 类下，选择“Product（ProductStore.Models）”。 将所有其他选项保留为默认值。

单击 “添加” 将在 Views/Home 下添加名为 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文件。 将 Authorize 属性添加到 Admin 方法。

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

打开AdminController.cs文件，并将 Authorize 属性添加到整个 AdminController 类。

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

现在，只有管理员才能查看“管理”页。 此外，如果将 HTTP 请求发送到管理员控制器，则请求必须包含身份验证 Cookie。 否则，服务器会发送 HTTP 401（未授权）响应。 可以在 Fiddler 中通过发送 GET 请求到 http://localhost:*port*/api/admin 来查看。