4. Bölüm: yönetici görünümü eklemePart 4: Adding an Admin View

, Mike te sonby Mike Wasson

Tamamlanmış projeyi indirDownload Completed Project

Yönetici görünümü eklemeAdd an Admin View

Şimdi istemci tarafına ve yönetici denetleyicisinden veri kullanabilen bir sayfa ekleyecek.Now we'll turn to the client side, and add a page that can consume data from the Admin controller. Bu sayfa, kullanıcıların denetleyiciye AJAX istekleri göndererek ürün oluşturmalarına, düzenlemesine veya silmesine izin verir.The page will allow users to create, edit, or delete products, by sending AJAX requests to the controller.

Çözüm Gezgini, denetleyiciler klasörünü genişletin ve HomeController.cs adlı dosyayı açın.In Solution Explorer, expand the Controllers folder and open the file named HomeController.cs. Bu dosya bir MVC denetleyicisi içeriyor.This file contains an MVC controller. Adminadlı bir yöntem ekleyin: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 yöntemi, Web API 'sine URI 'yi oluşturur ve bunu daha sonra Görünüm çantasında depoluyoruz.The HttpRouteUrl method creates the URI to the web API, and we store this in the view bag for later.

Sonra, metin imlecini Admin Action yönteminin içinde konumlandırın, sonra sağ tıklayıp Görünüm Ekle' yi seçin.Next, position the text cursor within the Admin action method, then right-click and select Add View. Bu işlem, Görünüm Ekle iletişim kutusunu getirir.This will bring up the Add View dialog.

Görünüm Ekle iletişim kutusunda "Yönetici" görünümünü adlandırın.In the Add View dialog, name the view "Admin". Kesin olarak belirlenmiş görünüm oluşturetiketli onay kutusunu seçin.Select the check box labeled Create a strongly-typed view. Model sınıfıaltında "Product (productstore. modeller)" öğesini seçin.Under Model Class, select "Product (ProductStore.Models)". Diğer tüm seçenekleri varsayılan değerler olarak bırakın.Leave all the other options as their default values.

Ekle ' ye tıklamak, görünümler/giriş bölümünde admin. cshtml adlı bir dosya ekler.Clicking Add adds a file named Admin.cshtml under Views/Home. Bu dosyayı açın ve aşağıdaki HTML 'yi ekleyin.Open this file and add the following HTML. Bu HTML sayfanın yapısını tanımlar, ancak henüz hiçbir işlev kablolu değildir.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>

Çözüm Gezgini, görünümler klasörünü genişletin ve ardından paylaşılan klasörü genişletin.In Solution Explorer, expand the Views folder and then expand the Shared folder. _Layout. cshtml adlı dosyayı açın.Open the file named _Layout.cshtml. ID = "Menu" olan ul öğesini ve yönetici görünümü için bir eylem bağlantısını bulun:Locate the ul element with id = "menu", and an action link for the Admin view:

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

Note

Örnek projede, "logonuzu buraya" yazmanız gibi birkaç başka yüzeysel değişikliği yaptık.In the sample project, I made a few other cosmetic changes, such as replacing the string "Your logo here". Bunlar, uygulamanın işlevselliğini etkilemez.These don't affect the functionality of the application. Projeyi indirebilir ve dosyaları karşılaştırabilirsiniz.You can download the project and compare the files.

Uygulamayı çalıştırın ve giriş sayfasının en üstünde görünen "Yönetici" bağlantısına tıklayın.Run the application and click the "Admin" link that appears at the top of the home page. Yönetici sayfası aşağıdaki gibi görünmelidir:The Admin page should look like the following:

Şu anda sayfa hiçbir şey yapmaz.Right now, the page doesn't do anything. Bir sonraki bölümde, dinamik bir kullanıcı arabirimi oluşturmak için altını gizleme. js ' yi kullanacağız.In the next section, we'll use Knockout.js to create a dynamic UI.

Yetkilendirme EkleAdd Authorization

Yönetici sayfasına şu anda siteyi ziyaret eden herkes erişebilir.The Admin page is currently accessible to anyone visiting the site. Bunu, yöneticilere izinleri kısıtlamak için değiştirelim.Let's change this to restrict permission to administrators.

Bir "Yönetici" rolü ve bir yönetici kullanıcı ekleyerek başlayın.Start by adding an "Administrator" role and an administrator user. Çözüm Gezgini, filtreler klasörünü genişletin ve InitializeSimpleMembershipAttribute.cs adlı dosyayı açın.In Solution Explorer, expand the Filters folder and open the file named InitializeSimpleMembershipAttribute.cs. SimpleMembershipInitializer oluşturucusunu bulun.Locate the SimpleMembershipInitializer constructor. WebSecurity. InitializeDatabaseConnectionçağrısından sonra aşağıdaki kodu ekleyin: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);
}

Bu, "Yönetici" rolünü eklemenin ve rol için bir kullanıcı oluşturmanın hızlı ve kirli bir yoludur.This is a quick-and-dirty way to add the "Administrator" role and create a user for the role.

Çözüm Gezgini, denetleyiciler klasörünü genişletin ve HomeController.cs dosyasını açın.In Solution Explorer, expand the Controllers folder and open the HomeController.cs file. Admin metoduna Yetkilendir özniteliğini ekleyin.Add the Authorize attribute to the Admin method.

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

AdminController.cs dosyasını açın ve tüm AdminController sınıfına Yetkilendir özniteliğini ekleyin.Open the AdminController.cs file and add the Authorize attribute to the entire AdminController class.

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

Note

MVC ve Web API 'SI, farklı ad alanlarında Yetkilendirme özniteliklerini tanımlar.MVC and Web API both define Authorize attributes, in different namespaces. MVC, System. Web. Mvc. AuthorizeAttributekullanır, Web API 'si System. Web. http. AuthorizeAttributekullanır.MVC uses System.Web.Mvc.AuthorizeAttribute, while Web API uses System.Web.Http.AuthorizeAttribute.

Artık yönetici sayfasını yalnızca yöneticiler görüntüleyebilir.Now only administrators can view the Admin page. Ayrıca, yönetici denetleyicisine bir HTTP isteği gönderirseniz, istek bir kimlik doğrulama tanımlama bilgisi içermelidir.Also, if you send an HTTP request to the Admin controller, the request must contain an authentication cookie. Aksi takdirde, sunucu bir HTTP 401 (yetkisiz) yanıtı gönderir.If not, the server sends an HTTP 401 (Unauthorized) response. Bunu, http://localhost:*port*/api/adminiçin bir GET isteği göndererek Fiddler 'da görebilirsiniz.You can see this in Fiddler by sending a GET request to http://localhost:*port*/api/admin.