Bölüm 4: Yönetici Görünümü Ekleme

tarafından Rick Anderson

Tamamlanan Projeyi İndir

Yönetici Görünümü ekleme

Şimdi istemci tarafına dönüp Yönetici denetleyicisinden veri tüketebilecek bir sayfa ekleyeceğiz. Sayfa, kullanıcıların denetleyiciye AJAX istekleri göndererek ürün oluşturmasına, düzenlemesine veya silmesine olanak sağlar.

Çözüm Gezgini'da Denetleyiciler klasörünü genişletin ve HomeController.cs adlı dosyayı açın. Bu dosya bir MVC denetleyicisi içeriyor. adlı Adminbir yöntem ekleyin:

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'sinde URI'yi oluşturur ve bunu daha sonra kullanmak üzere görünüm paketinde depolarız.

Ardından, metin imlecini eylem yönteminin Admin içine getirin, sonra sağ tıklayıp Görünüm Ekle'yi seçin. Bu, Görünüm Ekle iletişim kutusunu açar.

Görünüm Ekle iletişim kutusunda görünümü "Yönetici" olarak adlandırın. Kesin olarak yazılan bir görünüm oluştur etiketli onay kutusunu seçin. Model Sınıfı'nın altında "Product (ProductStore.Models)" öğesini seçin. Diğer tüm seçenekleri varsayılan değerleri olarak bırakın.

Ekle'ye tıklanması, Görünümler/Giriş'in altına Yönetici.cshtml adlı bir dosya ekler. Bu dosyayı açın ve aşağıdaki HTML'yi ekleyin. Bu HTML sayfanın yapısını tanımlar, ancak henüz herhangi bir işlev kablolu değildir.

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

Yönetici Sayfasına Bağlantı Oluşturma

Çözüm Gezgini'da Görünümler klasörünü ve ardından Paylaşılan klasörünü genişletin. _Layout.cshtml adlı dosyayı açın. id = "menu" ile ul öğesini ve Yönetici görünümü için bir eylem bağlantısını bulun:

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

Not

Örnek projede " Burada logonuz" dizesini değiştirmek gibi birkaç kozmetik değişiklik daha yaptım. Bunlar uygulamanın işlevselliğini etkilemez. Projeyi indirebilir ve dosyaları karşılaştırabilirsiniz.

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. Yönetici sayfası aşağıdaki gibi görünmelidir:

Şu anda sayfa hiçbir şey yapmıyor. Sonraki bölümde dinamik kullanıcı arabirimi oluşturmak için Knockout.js kullanacağız.

Yetkilendirme Ekle

Yönetici sayfasına şu anda siteyi ziyaret eden herkes erişebilir. Şimdi bunu yöneticilerle olan izni kısıtlamak için değiştirelim.

Bir "Yönetici" rolü ve yönetici kullanıcı ekleyerek başlayın. Çözüm Gezgini'da Filtreler klasörünü genişletin ve InitializeSimpleMembershipAttribute.cs adlı dosyayı açın. Oluşturucuyu SimpleMembershipInitializer bulun. WebSecurity.InitializeDatabaseConnection çağrısından sonra aşağıdaki kodu ekleyin:

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.

Çözüm Gezgini'da Controllers klasörünü genişletin ve HomeController.cs dosyasını açın. Yöntemine Authorize özniteliğini Admin ekleyin.

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

AdminController.cs dosyasını açın ve Sınıfın tamamına AdminController Authorize özniteliğini ekleyin.

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

Not

MVC ve Web API'si farklı ad alanlarında Yetkilendirme özniteliklerini tanımlar. MVC System.Web.Mvc.AuthorizeAttribute kullanırken, Web API'si System.Web.Http.AuthorizeAttribute kullanır.

Artık Yönetici sayfasını yalnızca yöneticiler görüntüleyebilir. Ayrıca, Yönetici denetleyicisine bir HTTP isteği gönderirseniz, istek bir kimlik doğrulama tanımlama bilgisi içermelidir. Aksi takdirde, sunucu bir HTTP 401 (Yetkisiz) yanıtı gönderir. Bunu Fiddler'da adresine http://localhost:*port*/api/adminbir GET isteği göndererek görebilirsiniz.

ÖncekiSonraki