4부: 관리 보기 추가

작성자: Rick Anderson

완료된 프로젝트 다운로드

관리 보기 추가

이제 클라이언트 쪽으로 전환하고 관리 컨트롤러의 데이터를 사용할 수 있는 페이지를 추가합니다. 페이지에서는 사용자가 AJAX 요청을 컨트롤러에 전송하여 제품을 만들거나 편집하거나 삭제할 수 있습니다.

솔루션 탐색기 Controllers 폴더를 확장하고 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 메서드는 웹 API에 대한 URI를 만들고 나중에 보기 모음에 저장합니다.

그런 다음 작업 메서드 내에 텍스트 커서를 Admin 놓고 마우스 오른쪽 단추를 클릭하고 보기 추가를 선택합니다. 그러면 보기 추가 대화 상자가 표시됩니다.

보기 추가 대화 상자에서 보기 이름을 "관리"로 지정합니다. 강력한 형식의 보기 만들기라는 레이블이 지정된 검사 상자를 선택합니다. 모델 클래스에서 "Product(ProductStore.Models)"를 선택합니다. 다른 모든 옵션을 기본값으로 둡니다.

추가를 클릭하면 뷰/홈 아래에 관리.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>

참고

샘플 프로젝트에서는 "Your logo here"라는 문자열을 바꾸는 등 몇 가지 다른 화장품을 변경했습니다. 애플리케이션의 기능에는 영향을 주지 않습니다. 프로젝트를 다운로드하고 파일을 비교할 수 있습니다.

애플리케이션을 실행하고 홈페이지 맨 위에 표시되는 "관리" 링크를 클릭합니다. 관리 페이지는 다음과 같습니다.

현재 페이지는 아무 것도 하지 않습니다. 다음 섹션에서는 Knockout.js 사용하여 동적 UI를 만듭니다.

권한 부여 추가

관리 페이지는 현재 사이트를 방문하는 모든 사용자가 액세스할 수 있습니다. 관리자 권한을 제한하도록 변경해 보겠습니다.

먼저 "관리자" 역할과 관리자 사용자를 추가합니다. 솔루션 탐색기 Filters 폴더를 확장하고 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);
}

이는 "관리자" 역할을 추가하고 역할에 대한 사용자를 만드는 빠르고 더티 방법입니다.

솔루션 탐색기 Controllers 폴더를 확장하고 HomeController.cs 파일을 엽니다. Authorize 특성을 메서드에 추가합니다Admin.

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

AdminController.cs 파일을 열고 Authorize 특성을 전체 AdminController 클래스에 추가합니다.

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

참고

MVC와 Web API는 모두 서로 다른 네임스페이스에서 권한 부여 특성을 정의합니다. MVC는 System.Web.Mvc.AuthorizeAttribute를 사용하고 Web API는 System.Web.Http.AuthorizeAttribute를 사용합니다.

이제 관리자만 관리 페이지를 볼 수 있습니다. 또한 관리 컨트롤러에 HTTP 요청을 보내는 경우 요청에 인증 쿠키가 포함되어야 합니다. 그렇지 않은 경우 서버는 HTTP 401(권한 없음) 응답을 보냅니다. GET 요청을 http://localhost:*port*/api/admin에 전송하여 Fiddler에서 이를 볼 수 있습니다.

이전다음