4. Bölüm: yönetici görünümü ekleme

, Mike te son

Tamamlanmış projeyi indir

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

Şimdi istemci tarafına ve yönetici denetleyicisinden veri kullanabilen bir sayfa ekleyecek. Bu sayfa, kullanıcıların denetleyiciye AJAX istekleri göndererek ürün oluşturmalarına, düzenlemesine veya silmesine izin verir.

Çözüm Gezgini, denetleyiciler klasörünü genişletin ve HomeController.cs adlı dosyayı açın. Bu dosya bir MVC denetleyicisi içeriyor. Adminadlı bir 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 'sine URI 'yi oluşturur ve bunu daha sonra Görünüm çantasında depoluyoruz.

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. Bu işlem, Görünüm Ekle iletişim kutusunu getirir.

Görünüm Ekle iletişim kutusunda "Yönetici" görünümünü adlandırın. Kesin olarak belirlenmiş görünüm oluşturetiketli onay kutusunu seçin. Model sınıfıaltında "Product (productstore. modeller)" öğesini seçin. Diğer tüm seçenekleri varsayılan değerler olarak bırakın.

Ekle ' ye tıklamak, görünümler/giriş bölümünde 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 hiç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>

Çözüm Gezgini, görünümler klasörünü genişletin ve ardından paylaşılan klasörü genişletin. _Layout. cshtml adlı dosyayı açın. ID = "Menu" olan 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>

Note

Örnek projede, "logonuzu buraya" yazmanız gibi birkaç başka yüzeysel değişikliği yaptık. 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 yapmaz. Bir sonraki bölümde, dinamik bir kullanıcı arabirimi oluşturmak için altını gizleme. js ' yi kullanacağız.

Yetkilendirme Ekle

Yönetici sayfasına şu anda siteyi ziyaret eden herkes erişebilir. Bunu, yöneticilere izinleri kısıtlamak için değiştirelim.

Bir "Yönetici" rolü ve bir yönetici kullanıcı ekleyerek başlayın. Çözüm Gezgini, filtreler klasörünü genişletin ve InitializeSimpleMembershipAttribute.cs adlı dosyayı açın. SimpleMembershipInitializer oluşturucusunu 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, denetleyiciler klasörünü genişletin ve HomeController.cs dosyasını açın. Admin metoduna Yetkilendir özniteliğini ekleyin.

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

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

Note

MVC ve Web API 'SI, farklı ad alanlarında Yetkilendirme özniteliklerini tanımlar. MVC, System. Web. Mvc. AuthorizeAttributekullanır, Web API 'si System. Web. http. AuthorizeAttributekullanı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, http://localhost:*port*/api/adminiçin bir GET isteği göndererek Fiddler 'da görebilirsiniz.