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 tanır.

Çözüm Gezgini'nde 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 URI'yi web API'sine oluşturur ve bunu daha sonra kullanmak üzere görünüm çantasında 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 belirlenmiş 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 Admin.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 bağlı 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'nde 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>

Uyarı

Örnek projede " Logonuz burada" 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 üst kısmında görüntülenen "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. İzinleri yalnızca yöneticilere vermek için bunu değiştirelim.

Bir "Yönetici" rolü ve yönetici kullanıcı ekleyerek başlayın. Çözüm Gezgini'nde 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'nde Denetleyiciler 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 Authorize özniteliğini sınıfın tamamına AdminController ekleyin.

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

Uyarı

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

Artık Yalnızca yöneticiler Yönetici sayfasını 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. Fiddler'da bir GET isteği http://localhost:*port*/api/admin göndererek bunu görebilirsiniz.

ÖncekiSonraki