Bagian 4: Menambahkan Tampilan Admin

oleh Rick Anderson

Unduh Proyek yang Selesai

Menambahkan Tampilan Admin

Sekarang kita akan beralih ke sisi klien, dan menambahkan halaman yang dapat menggunakan data dari pengontrol Admin. Halaman ini akan memungkinkan pengguna untuk membuat, mengedit, atau menghapus produk, dengan mengirim permintaan AJAX ke pengontrol.

Di Penjelajah Solusi, perluas folder Pengontrol dan buka file bernama HomeController.cs. File ini berisi pengontrol MVC. Tambahkan metode bernama Admin:

public ActionResult Admin()
{
    string apiUri= Url.HttpRouteUrl("DefaultApi", new { controller = "admin", });
    ViewBag.ApiUrl = new Uri(Request.Url, apiUri).AbsoluteUri.ToString();

    return View();
}

Metode HttpRouteUrl membuat URI ke API web, dan kami menyimpannya di tas tampilan untuk nanti.

Selanjutnya, posisikan kursor teks dalam Admin metode tindakan, lalu klik kanan dan pilih Tambahkan Tampilan. Ini akan memunculkan dialog Tambahkan Tampilan .

Dalam dialog Tambahkan Tampilan, beri nama tampilan "Admin". Pilih kotak centang berlabel Buat tampilan yang sangat ditik. Di bawah Kelas Model, pilih "Produk (ProductStore.Models)". Biarkan semua opsi lain sebagai nilai defaultnya.

Mengklik Tambahkan menambahkan file bernama Admin.cshtml di bawah Tampilan/Beranda. Buka file ini dan tambahkan HTML berikut. HTML ini mendefinisikan struktur halaman, tetapi belum ada fungsionalitas yang dikabel.

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

Membuat Tautan ke Halaman Admin

Di Penjelajah Solusi, perluas folder Tampilan lalu perluas folder Bersama. Buka file bernama _Layout.cshtml. Temukan elemen ul dengan id = "menu", dan tautan tindakan untuk tampilan Admin:

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

Catatan

Dalam proyek sampel, saya membuat beberapa perubahan kosmetik lainnya, seperti mengganti string "Logo Anda di sini". Ini tidak memengaruhi fungsionalitas aplikasi. Anda dapat mengunduh proyek dan membandingkan file.

Jalankan aplikasi dan klik tautan "Admin" yang muncul di bagian atas halaman beranda. Halaman Admin akan terlihat seperti berikut ini:

Saat ini, halaman tidak melakukan apa-apa. Di bagian berikutnya, kita akan menggunakan Knockout.js untuk membuat UI dinamis.

Tambahkan Otorisasi

Halaman Admin saat ini dapat diakses oleh siapa pun yang mengunjungi situs tersebut. Mari kita ubah ini untuk membatasi izin kepada administrator.

Mulailah dengan menambahkan peran "Administrator" dan pengguna administrator. Di Penjelajah Solusi, perluas folder Filter dan buka file bernama InitializeSimpleMembershipAttribute.cs. SimpleMembershipInitializer Temukan konstruktor. Setelah panggilan ke WebSecurity.InitializeDatabaseConnection, tambahkan kode berikut:

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);
}

Ini adalah cara cepat dan kotor untuk menambahkan peran "Administrator" dan membuat pengguna untuk peran tersebut.

Di Penjelajah Solusi, perluas folder Pengontrol dan buka file HomeController.cs. Tambahkan atribut Otorisasi ke Admin metode .

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

Buka file AdminController.cs dan tambahkan atribut Otorisasi ke seluruh AdminController kelas.

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

Catatan

MVC dan Web API keduanya menentukan atribut Otorisasi , di namespace layanan yang berbeda. MVC menggunakan System.Web.Mvc.AuthorizeAttribute, sementara API Web menggunakan System.Web.Http.AuthorizeAttribute.

Sekarang hanya administrator yang dapat melihat halaman Admin. Selain itu, jika Anda mengirim permintaan HTTP ke pengontrol Admin, permintaan harus berisi cookie autentikasi. Jika tidak, server mengirimkan respons HTTP 401 (Tidak Sah). Anda dapat melihat ini di Fiddler dengan mengirim permintaan GET ke http://localhost:*port*/api/admin.

SebelumnyaBerikutnya