4 부: 관리 보기 추가Part 4: Adding an Admin View

Mike Wassonby Mike Wasson

완료 된 프로젝트 다운로드Download Completed Project

관리 보기 추가Add an Admin View

이제 클라이언트 쪽으로 전환 하 고 관리 컨트롤러의 데이터를 사용할 수 있는 페이지를 추가 합니다.Now we'll turn to the client side, and add a page that can consume data from the Admin controller. 페이지를 통해 사용자는 AJAX 요청을 컨트롤러에 전송 하 여 제품을 생성, 편집 또는 삭제할 수 있습니다.The page will allow users to create, edit, or delete products, by sending AJAX requests to the controller.

솔루션 탐색기에서 Controllers 폴더를 확장 하 고 이름이 HomeController.cs 인 파일을 엽니다.In Solution Explorer, expand the Controllers folder and open the file named HomeController.cs. 이 파일은 MVC 컨트롤러를 포함 합니다.This file contains an MVC controller. Admin라는 메서드를 추가 합니다.Add a method named 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를 만들고 나중에 사용할 수 있도록이를 보기 모음에 저장 합니다.The HttpRouteUrl method creates the URI to the web API, and we store this in the view bag for later.

그런 다음 Admin 작업 메서드 내에 텍스트 커서를 놓고 마우스 오른쪽 단추를 클릭 한 다음 뷰 추가를 선택 합니다.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.

보기 추가 대화 상자에서 뷰 이름을 "Admin"으로 표시 합니다.In the Add View dialog, name the view "Admin". 강력한 형식의 뷰 만들기라는 확인란을 선택 합니다.Select the check box labeled Create a strongly-typed view. 모델 클래스에서 "Product (제품명)"를 선택 합니다.Under Model Class, select "Product (ProductStore.Models)". 다른 모든 옵션은 기본값으로 둡니다.Leave all the other options as their default values.

추가 를 클릭 하면 Views/Home 아래에 Admin 이라는 파일이 추가 됩니다.Clicking Add adds a file named Admin.cshtml under Views/Home. 이 파일을 열고 다음 HTML을 추가 합니다.Open this file and add the following HTML. 이 HTML은 페이지의 구조를 정의 하지만 아직 연결 된 기능은 없습니다.This HTML defines the structure of the page, but no functionality is wired up yet.

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

솔루션 탐색기에서 Views 폴더를 확장 한 다음 공유 폴더를 확장 합니다.In Solution Explorer, expand the Views folder and then expand the Shared folder. _Layout. cshtml 라는 파일을 엽니다.Open the file named _Layout.cshtml. Id = "menu" 인 ul 요소와 관리 보기에 대 한 작업 링크를 찾습니다.Locate the ul element with id = "menu", and an action link for the Admin view:

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

Note

샘플 프로젝트에서는 "your your your your here" 문자열을 대체 하는 것과 같이 몇 가지 다른 외관상 변화를 만들었습니다.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.

응용 프로그램을 실행 하 고 홈 페이지의 맨 위에 표시 되는 "관리" 링크를 클릭 합니다.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:

지금은 페이지에서 어떤 작업도 수행 하지 않습니다.Right now, the page doesn't do anything. 다음 섹션에서는 node.js를 사용 하 여 동적 UI를 만듭니다.In the next section, we'll use Knockout.js to create a dynamic UI.

권한 부여 추가Add Authorization

현재이 사이트를 방문 하는 모든 사용자가 관리 페이지에 액세스할 수 있습니다.The Admin page is currently accessible to anyone visiting the site. 관리자에 대 한 권한을 제한 하려면이를 변경해 보겠습니다.Let's change this to restrict permission to administrators.

"관리자" 역할 및 관리자 사용자를 추가 하 여 시작 합니다.Start by adding an "Administrator" role and an administrator user. 솔루션 탐색기에서 Filters 폴더를 확장 하 고 이름이 InitializeSimpleMembershipAttribute.cs 인 파일을 엽니다.In Solution Explorer, expand the Filters folder and open the file named InitializeSimpleMembershipAttribute.cs. SimpleMembershipInitializer 생성자를 찾습니다.Locate the SimpleMembershipInitializer constructor. InitializeDatabaseConnection에 대 한 호출 후 다음 코드를 추가 합니다.After the call to WebSecurity.InitializeDatabaseConnection, add the following code:

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

이는 "Administrator" 역할을 추가 하 고 역할에 대 한 사용자를 만들기 위한 신속 하 고 변경 된 방법입니다.This is a quick-and-dirty way to add the "Administrator" role and create a user for the role.

솔루션 탐색기에서 Controllers 폴더를 확장 하 고 HomeController.cs 파일을 엽니다.In Solution Explorer, expand the Controllers folder and open the HomeController.cs file. 권한 부여 특성을 Admin 메서드에 추가 합니다.Add the Authorize attribute to the Admin method.

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

AdminController.cs 파일을 열고 권한 부여 특성을 전체 AdminController 클래스에 추가 합니다.Open the AdminController.cs file and add the Authorize attribute to the entire AdminController class.

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

Note

MVC 및 Web API는 서로 다른 네임 스페이스에 권한 부여 특성을 정의 합니다.MVC and Web API both define Authorize attributes, in different namespaces. MVC에서는 AuthorizeAttribute를 사용 하 고 web API는 AuthorizeAttribute를 사용 합니다.MVC uses System.Web.Mvc.AuthorizeAttribute, while Web API uses System.Web.Http.AuthorizeAttribute.

이제 관리자만이 관리 페이지를 볼 수 있습니다.Now only administrators can view the Admin page. 또한 관리 컨트롤러에 HTTP 요청을 보내는 경우 요청은 인증 쿠키를 포함 해야 합니다.Also, if you send an HTTP request to the Admin controller, the request must contain an authentication cookie. 그렇지 않으면 서버에서 HTTP 401 (권한 없음) 응답을 보냅니다.If not, the server sends an HTTP 401 (Unauthorized) response. http://localhost:*port*/api/admin에 GET 요청을 전송 하 여 Fiddler에서이를 확인할 수 있습니다.You can see this in Fiddler by sending a GET request to http://localhost:*port*/api/admin.