Keanggotaan dan Administrasi

2023-07-13

Seri tutorial ini akan mengajari Anda dasar-dasar membangun aplikasi ASP.NET Web Forms menggunakan ASP.NET 4.5 dan Microsoft Visual Studio Express 2013 untuk Web. Proyek Visual Studio 2013 dengan kode sumber C# tersedia untuk menyertai seri tutorial ini.

Tutorial ini menunjukkan kepada Anda cara memperbarui aplikasi sampel Wingtip Toys untuk menambahkan peran kustom dan menggunakan ASP.NET Identity. Ini juga menunjukkan kepada Anda cara menerapkan halaman administrasi tempat pengguna dengan peran kustom dapat menambahkan dan menghapus produk dari situs web.

ASP.NET Identity adalah sistem keanggotaan yang digunakan untuk membangun aplikasi web ASP.NET dan tersedia di ASP.NET 4.5. ASP.NET Identity digunakan dalam templat proyek Visual Studio 2013 Web Forms, serta templat untuk ASP.NET MVC, ASP.NET Web API, dan aplikasi halaman tunggal ASP.NET. Anda juga dapat menginstal sistem identitas ASP.NET secara khusus menggunakan NuGet saat Anda mulai dengan aplikasi Web kosong. Namun, dalam seri tutorial ini Anda menggunakan projecttemplate Formulir Web, yang mencakup sistem identitas ASP.NET. ASP.NET Identity memudahkan integrasi data profil khusus pengguna dengan data aplikasi. Selain itu, ASP.NET Identity memungkinkan Anda memilih model persistensi untuk profil pengguna di aplikasi Anda. Anda dapat menyimpan data dalam database SQL Server atau penyimpanan data lain, termasuk penyimpanan data NoSQL seperti Tabel Windows Azure Storage.

Tutorial ini dibangun pada tutorial sebelumnya berjudul "Checkout and Payment with PayPal" dalam seri tutorial Wingtip Toys.

Yang akan Anda pelajari:

Cara menggunakan kode untuk menambahkan peran kustom dan pengguna ke aplikasi.
Cara membatasi akses ke folder dan halaman administrasi.
Cara menyediakan navigasi untuk pengguna yang termasuk dalam peran kustom.
Cara menggunakan pengikatan model untuk mengisi kontrol DropDownList dengan kategori produk.
Cara mengunggah file ke aplikasi web menggunakan kontrol FileUpload .
Cara menggunakan kontrol validasi untuk menerapkan validasi input.
Cara menambahkan dan menghapus produk dari aplikasi.

Fitur-fitur ini disertakan dalam tutorial:

Identitas ASP.NET
Konfigurasi dan Otorisasi
Pengikatan Model
Validasi Tidak Mengganggu

ASP.NET Web Forms menyediakan kemampuan keanggotaan. Dengan menggunakan templat default, Anda memiliki fungsionalitas keanggotaan bawaan yang dapat segera Anda gunakan saat aplikasi berjalan. Tutorial ini menunjukkan kepada Anda cara menggunakan ASP.NET Identity untuk menambahkan peran kustom dan menetapkan pengguna ke peran tersebut. Anda akan mempelajari cara membatasi akses ke folder administrasi. Anda akan menambahkan halaman ke folder administrasi yang memungkinkan pengguna dengan peran kustom untuk menambahkan dan menghapus produk, dan untuk mempratinjau produk setelah ditambahkan.

Menambahkan Peran Kustom

Dengan menggunakan ASP.NET Identity, Anda dapat menambahkan peran kustom dan menetapkan pengguna ke peran tersebut menggunakan kode.

Di Penjelajah Solusi, klik kanan pada folder Logika dan buat kelas baru.
Beri nama kelas baru RoleActions.cs.

Ubah kode sehingga muncul sebagai berikut:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace WingtipToys.Logic
{
    internal class RoleActions
    {
    }
}

Di Penjelajah Solusi, buka file Global.asax.cs .

Ubah file Global.asax.cs dengan menambahkan kode yang disorot dengan warna kuning sehingga muncul sebagai berikut:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Optimization;
using System.Web.Routing;
using System.Web.Security;
using System.Web.SessionState;
using System.Data.Entity;
using WingtipToys.Models;
using WingtipToys.Logic;

namespace WingtipToys
{
    public class Global : HttpApplication
    {
        void Application_Start(object sender, EventArgs e)
        {
          // Code that runs on application startup
          RouteConfig.RegisterRoutes(RouteTable.Routes);
          BundleConfig.RegisterBundles(BundleTable.Bundles);

          // Initialize the product database.
          Database.SetInitializer(new ProductDatabaseInitializer());

          // Create the custom role and user.
          RoleActions roleActions = new RoleActions();
          roleActions.AddUserAndRole();
        }
    }
}

Perhatikan bahwa AddUserAndRole digaris bawahi dengan warna merah. Klik dua kali kode AddUserAndRole.
Huruf "A" di awal metode yang disorot akan digarisbawarkan.
Arahkan mouse ke atas huruf "A" dan klik UI yang memungkinkan Anda membuat stub metode untuk metode tersebut AddUserAndRole .
Klik opsi berjudul:
Generate method stub for "AddUserAndRole" in "WingtipToys.Logic.RoleActions"
Buka file RoleActions.cs dari folder Logika .
Metode AddUserAndRole telah ditambahkan ke file kelas.

Ubah file RoleActions.cs dengan menghapus NotImplementedException dan menambahkan kode yang disorot dengan warna kuning, sehingga muncul sebagai berikut:

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Linq;
using System.Web;
using WingtipToys.Models;
using Microsoft.AspNet.Identity;
using Microsoft.AspNet.Identity.EntityFramework;

namespace WingtipToys.Logic
{
  internal class RoleActions
  {
    internal void AddUserAndRole()
    {
      // Access the application context and create result variables.
      Models.ApplicationDbContext context = new ApplicationDbContext();
      IdentityResult IdRoleResult;
      IdentityResult IdUserResult;

      // Create a RoleStore object by using the ApplicationDbContext object. 
      // The RoleStore is only allowed to contain IdentityRole objects.
      var roleStore = new RoleStore<IdentityRole>(context);

      // Create a RoleManager object that is only allowed to contain IdentityRole objects.
      // When creating the RoleManager object, you pass in (as a parameter) a new RoleStore object. 
      var roleMgr = new RoleManager<IdentityRole>(roleStore);

      // Then, you create the "canEdit" role if it doesn't already exist.
      if (!roleMgr.RoleExists("canEdit"))
      {
        IdRoleResult = roleMgr.Create(new IdentityRole { Name = "canEdit" });
      }

      // Create a UserManager object based on the UserStore object and the ApplicationDbContext  
      // object. Note that you can create new objects and use them as parameters in
      // a single line of code, rather than using multiple lines of code, as you did
      // for the RoleManager object.
      var userMgr = new UserManager<ApplicationUser>(new UserStore<ApplicationUser>(context));
      var appUser = new ApplicationUser
      {
        UserName = "canEditUser@wingtiptoys.com",
        Email = "canEditUser@wingtiptoys.com"
      };
      IdUserResult = userMgr.Create(appUser, ConfigurationManager.AppSettings["AppUserPasswordKey"]);

      // If the new "canEdit" user was successfully created, 
      // add the "canEdit" user to the "canEdit" role. 
      if (!userMgr.IsInRole(userMgr.FindByEmail("canEditUser@wingtiptoys.com").Id, "canEdit"))
      {
        IdUserResult = userMgr.AddToRole(userMgr.FindByEmail("canEditUser@wingtiptoys.com").Id, "canEdit");
      }
    }
  }
}

Kode di atas pertama-tama menetapkan konteks database untuk database keanggotaan. Database keanggotaan juga disimpan sebagai file .mdf di folder App_Data . Anda akan dapat melihat database ini setelah pengguna pertama masuk ke aplikasi web ini.

Catatan

Jika Anda ingin menyimpan data keanggotaan bersama dengan data produk, Anda dapat mempertimbangkan untuk menggunakan DbContext yang sama dengan yang Anda gunakan untuk menyimpan data produk dalam kode di atas.

Kata kunci internal adalah pengubah akses untuk jenis (seperti kelas) dan jenis anggota (seperti metode atau properti). Jenis internal atau anggota hanya dapat diakses dalam file yang terkandung dalam rakitan yang sama (.dll file). Saat Anda membuat aplikasi, file assembly (.dll) dibuat yang berisi kode yang dijalankan saat Anda menjalankan aplikasi Anda.

Objek RoleStore , yang menyediakan manajemen peran, dibuat berdasarkan konteks database.

Catatan

Perhatikan bahwa ketika RoleStore objek dibuat, objek menggunakan jenis Generik IdentityRole . Ini berarti bahwa hanya yang RoleStore diizinkan untuk memuat IdentityRole objek. Juga dengan menggunakan Generik, sumber daya dalam memori ditangani dengan lebih baik.

Selanjutnya, RoleManager objek , dibuat berdasarkan RoleStore objek yang baru saja Anda buat. RoleManager objek memaparkan API terkait peran yang dapat digunakan untuk menyimpan perubahan secara otomatis ke RoleStore. RoleManager hanya diizinkan untuk berisi IdentityRole objek karena kode menggunakan <IdentityRole> jenis Generik.

Anda memanggil RoleExists metode untuk menentukan apakah peran "canEdit" ada dalam database keanggotaan. Jika tidak, Anda membuat peran.

UserManager Membuat objek tampaknya lebih rumit daripada RoleManager kontrol, namun hampir sama. Ini hanya dikodekan pada satu baris daripada beberapa baris. Di sini, parameter yang Anda lewati adalah membuat instans sebagai objek baru yang terkandung dalam tanda kurung.

Selanjutnya Anda membuat pengguna "canEditUser" dengan membuat objek baru ApplicationUser . Kemudian, jika Anda berhasil membuat pengguna, Anda menambahkan pengguna ke peran baru.

Catatan

Penanganan kesalahan akan diperbarui selama tutorial "penanganan kesalahan ASP.NET" nanti dalam seri tutorial ini.

Lain kali aplikasi dimulai, pengguna bernama "canEditUser" akan ditambahkan sebagai peran bernama "canEdit" aplikasi. Nanti dalam tutorial ini, Anda akan masuk sebagai pengguna "canEditUser" untuk menampilkan kemampuan tambahan yang akan Anda tambahkan selama tutorial ini. Untuk detail API tentang ASP.NET Identity, lihat Namespace Microsoft.AspNet.Identity. Untuk detail tambahan tentang menginisialisasi sistem identitas ASP.NET, lihat AspnetIdentitySample.

Membatasi Akses ke Halaman Administrasi

Aplikasi sampel Wingtip Toys memungkinkan pengguna anonim dan pengguna yang masuk untuk melihat dan membeli produk. Namun, pengguna yang masuk yang memiliki peran "canEdit" kustom dapat mengakses halaman terbatas untuk menambahkan dan menghapus produk.

Tambahkan Folder dan Halaman Administrasi

Selanjutnya, Anda akan membuat folder bernama Admin untuk pengguna "canEditUser" milik peran kustom aplikasi sampel Wingtip Toys.

Klik kanan nama proyek (Mainan Wingtip) di Penjelajah Solusi dan pilih Tambahkan ->Folder Baru.
Beri nama folder baru Admin.
Klik kanan folder Admin lalu pilih Tambahkan ->Item Baru.
Kotak dialog Tambahkan Item Baru ditampilkan.
Pilih grup templat Visual C#->Web di sebelah kiri. Dari daftar tengah, pilih Formulir Web dengan Halaman Master, beri nama AdminPage.aspx, lalu pilih Tambahkan.
Pilih file Site.Master sebagai halaman master, lalu pilih OK.

Menambahkan File Web.config

Dengan menambahkan file Web.config ke folder Admin, Anda dapat membatasi akses ke halaman yang terkandung dalam folder.

Klik kanan folder Admin dan pilih Tambahkan ->Item Baru.
Kotak dialog Tambahkan Item Baru ditampilkan.
Dari daftar templat web Visual C#, pilih File Konfigurasi Webdari daftar tengah, terima nama default Web.config, lalu pilih Tambahkan.

Ganti konten XML yang sudah ada dalam file Web.config dengan yang berikut ini:

<?xml version="1.0"?>
<configuration>
  <system.web>
    <authorization>
      <allow roles="canEdit"/>
      <deny users="*"/>
    </authorization>
  </system.web>
</configuration>

Simpan file Web.config. File Web.config menentukan bahwa hanya pengguna yang termasuk dalam peran "canEdit" aplikasi yang dapat mengakses halaman yang terkandung dalam folder Admin.

Untuk mengaktifkan pengguna peran "canEdit" kustom untuk menavigasi ke bagian administrasi aplikasi, Anda harus menambahkan tautan ke halaman Site.Master . Hanya pengguna yang termasuk dalam peran "canEdit" yang dapat melihat tautan Admin dan mengakses bagian administrasi.

Di Penjelajah Solusi, temukan dan buka halaman Site.Master .

Untuk membuat tautan bagi pengguna peran "canEdit", tambahkan markup yang disorot dengan warna kuning ke elemen daftar <ul> yang tidak berurutan berikut ini sehingga daftar muncul sebagai berikut:

<ul class="nav navbar-nav">
    <li><a runat="server" id="adminLink" visible="false" 
      href="~/Admin/AdminPage">Admin</a></li>
    <li><a runat="server" href="~/">Home</a></li>
    <li><a runat="server" href="~/About">About</a></li>
    <li><a runat="server" href="~/Contact">Contact</a></li>
    <li><a runat="server" href="~/ProductList">Products</a></li>
    <li><a runat="server" href="~/ShoppingCart" 
      ID="cartCount">&nbsp;</a></li>
</ul>

Buka file Site.Master.cs . Buat tautan Admin hanya terlihat oleh pengguna "canEditUser" dengan menambahkan kode yang disorot dengan warna kuning ke Page_Load handler. Handler Page_Load akan muncul sebagai berikut:
```
protected void Page_Load(object sender, EventArgs e)
{
    if (HttpContext.Current.User.IsInRole("canEdit"))
    {
        adminLink.Visible = true;
    }
}
```

Ketika halaman dimuat, kode memeriksa apakah pengguna yang masuk memiliki peran "canEdit". Jika pengguna termasuk dalam peran "canEdit", elemen rentang yang berisi tautan ke halaman AdminPage.aspx (dan akibatnya tautan di dalam rentang) dibuat terlihat.

Mengaktifkan Administrasi Produk

Sejauh ini, Anda telah membuat peran "canEdit" dan menambahkan pengguna "canEditUser", folder administrasi, dan halaman administrasi. Anda telah mengatur hak akses untuk folder dan halaman administrasi, dan telah menambahkan tautan navigasi untuk pengguna peran "canEdit" ke aplikasi. Selanjutnya, Anda akan menambahkan markup ke halaman AdminPage.aspx dan kode ke file code-behind AdminPage.aspx.cs yang akan memungkinkan pengguna dengan peran "canEdit" untuk menambahkan dan menghapus produk.

Di Penjelajah Solusi, buka file AdminPage.aspx dari folder Admin.

Ganti markup yang sudah ada dengan yang berikut ini:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="AdminPage.aspx.cs" Inherits="WingtipToys.Admin.AdminPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <h1>Administration</h1>
    <hr />
    <h3>Add Product:</h3>
    <table>
        <tr>
            <td><asp:Label ID="LabelAddCategory" runat="server">Category:</asp:Label></td>
            <td>
                <asp:DropDownList ID="DropDownAddCategory" runat="server" 
                    ItemType="WingtipToys.Models.Category" 
                    SelectMethod="GetCategories" DataTextField="CategoryName" 
                    DataValueField="CategoryID" >
                </asp:DropDownList>
            </td>
        </tr>
        <tr>
            <td><asp:Label ID="LabelAddName" runat="server">Name:</asp:Label></td>
            <td>
                <asp:TextBox ID="AddProductName" runat="server"></asp:TextBox>
                <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" Text="* Product name required." ControlToValidate="AddProductName" SetFocusOnError="true" Display="Dynamic"></asp:RequiredFieldValidator>
            </td>
        </tr>
        <tr>
            <td><asp:Label ID="LabelAddDescription" runat="server">Description:</asp:Label></td>
            <td>
                <asp:TextBox ID="AddProductDescription" runat="server"></asp:TextBox>
                <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" Text="* Description required." ControlToValidate="AddProductDescription" SetFocusOnError="true" Display="Dynamic"></asp:RequiredFieldValidator>
            </td>
        </tr>
        <tr>
            <td><asp:Label ID="LabelAddPrice" runat="server">Price:</asp:Label></td>
            <td>
                <asp:TextBox ID="AddProductPrice" runat="server"></asp:TextBox>
                <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" Text="* Price required." ControlToValidate="AddProductPrice" SetFocusOnError="true" Display="Dynamic"></asp:RequiredFieldValidator>
                <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" Text="* Must be a valid price without $." ControlToValidate="AddProductPrice" SetFocusOnError="True" Display="Dynamic" ValidationExpression="^[0-9]*(\.)?[0-9]?[0-9]?$"></asp:RegularExpressionValidator>
            </td>
        </tr>
        <tr>
            <td><asp:Label ID="LabelAddImageFile" runat="server">Image File:</asp:Label></td>
            <td>
                <asp:FileUpload ID="ProductImage" runat="server" />
                <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" Text="* Image path required." ControlToValidate="ProductImage" SetFocusOnError="true" Display="Dynamic"></asp:RequiredFieldValidator>
            </td>
        </tr>
    </table>
    <p></p>
    <p></p>
    <asp:Button ID="AddProductButton" runat="server" Text="Add Product" OnClick="AddProductButton_Click"  CausesValidation="true"/>
    <asp:Label ID="LabelAddStatus" runat="server" Text=""></asp:Label>
    <p></p>
    <h3>Remove Product:</h3>
    <table>
        <tr>
            <td><asp:Label ID="LabelRemoveProduct" runat="server">Product:</asp:Label></td>
            <td><asp:DropDownList ID="DropDownRemoveProduct" runat="server" ItemType="WingtipToys.Models.Product" 
                    SelectMethod="GetProducts" AppendDataBoundItems="true" 
                    DataTextField="ProductName" DataValueField="ProductID" >
                </asp:DropDownList>
            </td>
        </tr>
    </table>
    <p></p>
    <asp:Button ID="RemoveProductButton" runat="server" Text="Remove Product" OnClick="RemoveProductButton_Click" CausesValidation="false"/>
    <asp:Label ID="LabelRemoveStatus" runat="server" Text=""></asp:Label>
</asp:Content>

Selanjutnya, buka file code-behind AdminPage.aspx.cs dengan mengklik kanan AdminPage.aspx dan mengklik Tampilkan Kode.

Ganti kode yang ada di file code-behind AdminPage.aspx.cs dengan kode berikut:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using WingtipToys.Models;
using WingtipToys.Logic;

namespace WingtipToys.Admin
{
  public partial class AdminPage : System.Web.UI.Page
  {
    protected void Page_Load(object sender, EventArgs e)
    {
      string productAction = Request.QueryString["ProductAction"];
      if (productAction == "add")
      {
        LabelAddStatus.Text = "Product added!";
      }

      if (productAction == "remove")
      {
        LabelRemoveStatus.Text = "Product removed!";
      }
    }

    protected void AddProductButton_Click(object sender, EventArgs e)
    {
      Boolean fileOK = false;
      String path = Server.MapPath("~/Catalog/Images/");
      if (ProductImage.HasFile)
      {
        String fileExtension = System.IO.Path.GetExtension(ProductImage.FileName).ToLower();
        String[] allowedExtensions = { ".gif", ".png", ".jpeg", ".jpg" };
        for (int i = 0; i < allowedExtensions.Length; i++)
        {
          if (fileExtension == allowedExtensions[i])
          {
            fileOK = true;
          }
        }
      }

      if (fileOK)
      {
        try
        {
          // Save to Images folder.
          ProductImage.PostedFile.SaveAs(path + ProductImage.FileName);
          // Save to Images/Thumbs folder.
          ProductImage.PostedFile.SaveAs(path + "Thumbs/" + ProductImage.FileName);
        }
        catch (Exception ex)
        {
          LabelAddStatus.Text = ex.Message;
        }

        // Add product data to DB.
        AddProducts products = new AddProducts();
        bool addSuccess = products.AddProduct(AddProductName.Text, AddProductDescription.Text,
            AddProductPrice.Text, DropDownAddCategory.SelectedValue, ProductImage.FileName);
        if (addSuccess)
        {
          // Reload the page.
          string pageUrl = Request.Url.AbsoluteUri.Substring(0, Request.Url.AbsoluteUri.Count() - Request.Url.Query.Count());
          Response.Redirect(pageUrl + "?ProductAction=add");
        }
        else
        {
          LabelAddStatus.Text = "Unable to add new product to database.";
        }
      }
      else
      {
        LabelAddStatus.Text = "Unable to accept file type.";
      }
    }

    public IQueryable GetCategories()
    {
      var _db = new WingtipToys.Models.ProductContext();
      IQueryable query = _db.Categories;
      return query;
    }

    public IQueryable GetProducts()
    {
      var _db = new WingtipToys.Models.ProductContext();
      IQueryable query = _db.Products;
      return query;
    }

    protected void RemoveProductButton_Click(object sender, EventArgs e)
    {
      using (var _db = new WingtipToys.Models.ProductContext())
      {
        int productId = Convert.ToInt16(DropDownRemoveProduct.SelectedValue);
        var myItem = (from c in _db.Products where c.ProductID == productId select c).FirstOrDefault();
        if (myItem != null)
        {
          _db.Products.Remove(myItem);
          _db.SaveChanges();

          // Reload the page.
          string pageUrl = Request.Url.AbsoluteUri.Substring(0, Request.Url.AbsoluteUri.Count() - Request.Url.Query.Count());
          Response.Redirect(pageUrl + "?ProductAction=remove");
        }
        else
        {
          LabelRemoveStatus.Text = "Unable to locate product.";
        }
      }
    }
  }
}

Dalam kode yang Anda masukkan untuk file code-behind AdminPage.aspx.cs , kelas yang disebut AddProducts melakukan pekerjaan aktual menambahkan produk ke database. Kelas ini belum ada, jadi Anda akan membuatnya sekarang.

Di Penjelajah Solusi, klik kanan folder Logika lalu pilih Tambahkan ->Item Baru.
Kotak dialog Tambahkan Item Baru ditampilkan.
Pilih grup templat Visual C# ->Code di sebelah kiri. Kemudian, pilih Kelasdari daftar tengah dan beri nama AddProducts.cs.
File kelas baru ditampilkan.

Ganti kode yang ada dengan yang berikut ini:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using WingtipToys.Models;

namespace WingtipToys.Logic
{
    public class AddProducts
    {
        public bool AddProduct(string ProductName, string ProductDesc, string ProductPrice, string ProductCategory, string ProductImagePath)
        {
            var myProduct = new Product();
            myProduct.ProductName = ProductName;
            myProduct.Description = ProductDesc;
            myProduct.UnitPrice = Convert.ToDouble(ProductPrice);
            myProduct.ImagePath = ProductImagePath;
            myProduct.CategoryID = Convert.ToInt32(ProductCategory);

            using (ProductContext _db = new ProductContext())
            {
                // Add product to DB.
                _db.Products.Add(myProduct);
                _db.SaveChanges();
            }
            // Success.
            return true;
        }
    }
}

Halaman AdminPage.aspx memungkinkan pengguna milik peran "canEdit" untuk menambahkan dan menghapus produk. Ketika produk baru ditambahkan, detail tentang produk divalidasi lalu dimasukkan ke dalam database. Produk baru segera tersedia untuk semua pengguna aplikasi web.

Validasi Tidak Mengganggu

Detail produk yang disediakan pengguna di halaman AdminPage.aspx divalidasi menggunakan kontrol validasi (RequiredFieldValidator dan RegularExpressionValidator). Kontrol ini secara otomatis menggunakan validasi yang tidak mengganggu. Validasi yang tidak mengganggu memungkinkan kontrol validasi menggunakan JavaScript untuk logika validasi sisi klien, yang berarti halaman tidak memerlukan perjalanan ke server untuk divalidasi. Secara default, validasi yang tidak mengganggu disertakan dalam file Web.config berdasarkan pengaturan konfigurasi berikut:

<add key="ValidationSettings:UnobtrusiveValidationMode" value="WebForms" />

Ekspresi Reguler

Harga produk pada halaman AdminPage.aspx divalidasi menggunakan kontrol RegularExpressionValidator . Kontrol ini memvalidasi apakah nilai kontrol input terkait (TextBox "AddProductPrice") cocok dengan pola yang ditentukan oleh ekspresi reguler. Ekspresi reguler adalah notasi pencocokan pola yang memungkinkan Anda menemukan dan mencocokkan pola karakter tertentu dengan cepat. Kontrol RegularExpressionValidator menyertakan properti bernama ValidationExpression yang berisi ekspresi reguler yang digunakan untuk memvalidasi input harga, seperti yang ditunjukkan di bawah ini:

<asp:RegularExpressionValidator 
    ID="RegularExpressionValidator1" runat="server"
    Text="* Must be a valid price without $." ControlToValidate="AddProductPrice" 
    SetFocusOnError="True" Display="Dynamic" 
    ValidationExpression="^[0-9]*(\.)?[0-9]?[0-9]?$">
</asp:RegularExpressionValidator>

Kontrol FileUpload

Selain kontrol input dan validasi, Anda menambahkan kontrol FileUpload ke halaman AdminPage.aspx . Kontrol ini menyediakan kemampuan untuk mengunggah file. Dalam hal ini, Anda hanya mengizinkan file gambar untuk diunggah. Dalam file code-behind (AdminPage.aspx.cs), ketika AddProductButton diklik, kode memeriksa HasFile properti kontrol FileUpload . Jika kontrol memiliki file dan jika jenis file (berdasarkan ekstensi file) diizinkan, gambar disimpan ke folder Gambar dan folder Gambar/Jempol aplikasi.

Pengikatan Model

Sebelumnya dalam seri tutorial ini Anda menggunakan pengikatan model untuk mengisi kontrol ListView , kontrol FormsView , kontrol GridView , dan kontrol DetailView . Dalam tutorial ini, Anda menggunakan pengikatan model untuk mengisi kontrol DropDownList dengan daftar kategori produk.

Markup yang Anda tambahkan ke file AdminPage.aspx berisi kontrol DropDownList yang disebut DropDownAddCategory:

<asp:DropDownList ID="DropDownAddCategory" runat="server" 
        ItemType="WingtipToys.Models.Category" 
        SelectMethod="GetCategories" DataTextField="CategoryName" 
        DataValueField="CategoryID" >
    </asp:DropDownList>

Anda menggunakan pengikatan model untuk mengisi DropDownList ini dengan mengatur ItemType atribut dan SelectMethod atribut . Atribut ItemType menentukan bahwa Anda menggunakan WingtipToys.Models.Category jenis saat mengisi kontrol. Anda mendefinisikan jenis ini di awal seri tutorial ini dengan membuat kelas (ditunjukkan Category di bawah). Kelas Category berada di folder Model di dalam file Category.cs .

public class Category
{
    [ScaffoldColumn(false)]
    public int CategoryID { get; set; }

    [Required, StringLength(100), Display(Name = "Name")]
    public string CategoryName { get; set; }

    [Display(Name = "Product Description")]
    public string Description { get; set; }

    public virtual ICollection<Product> Products { get; set; }
}

Atribut SelectMethod kontrol DropDownList menentukan bahwa Anda menggunakan GetCategories metode (ditunjukkan di bawah) yang disertakan dalam file code-behind (AdminPage.aspx.cs).

public IQueryable GetCategories()
{
  var _db = new WingtipToys.Models.ProductContext();
  IQueryable query = _db.Categories;
  return query;
}

Metode ini menentukan bahwa IQueryable antarmuka digunakan untuk mengevaluasi kueri terhadap jenis Category . Nilai yang dikembalikan digunakan untuk mengisi DropDownList di markup halaman (AdminPage.aspx).

Teks yang ditampilkan untuk setiap item dalam daftar ditentukan dengan mengatur DataTextField atribut . Atribut DataTextField menggunakan CategoryName kelas Category (ditunjukkan di atas) untuk menampilkan setiap kategori dalam kontrol DropDownList . Nilai aktual yang diteruskan saat item dipilih dalam kontrol DropDownList didasarkan pada DataValueField atribut . Atribut DataValueField diatur ke CategoryID sebagaimana didefinisikan dalam Category kelas (ditunjukkan di atas).

Cara Kerja Aplikasi

Ketika pengguna milik peran "canEdit" menavigasi ke halaman untuk pertama kalinya, DropDownAddCategory kontrol DropDownList diisi seperti yang dijelaskan di atas. Kontrol DropDownRemoveProductDropDownList juga diisi dengan produk menggunakan pendekatan yang sama. Pengguna milik peran "canEdit" memilih jenis kategori dan menambahkan detail produk (Nama, Deskripsi, Harga, dan File Gambar). Ketika pengguna milik peran "canEdit" mengklik tombol Tambahkan Produk , penanganan AddProductButton_Click aktivitas dipicu. Penanganan AddProductButton_Click aktivitas yang terletak di file code-behind (AdminPage.aspx.cs) memeriksa file gambar untuk memastikannya cocok dengan jenis file yang diizinkan (.gif, .png, .jpeg, atau .jpg). Kemudian, file gambar disimpan ke dalam folder aplikasi sampel Wingtip Toys. Selanjutnya, produk baru ditambahkan ke database. Untuk mencapai penambahan produk baru, instans AddProducts baru kelas dibuat dan diberi nama produk. Kelas AddProducts memiliki metode bernama AddProduct, dan objek produk memanggil metode ini untuk menambahkan produk ke database.

// Add product data to DB.
AddProducts products = new AddProducts();
bool addSuccess = products.AddProduct(AddProductName.Text, AddProductDescription.Text,
    AddProductPrice.Text, DropDownAddCategory.SelectedValue, ProductImage.FileName);

Jika kode berhasil menambahkan produk baru ke database, halaman dimuat ulang dengan nilai ProductAction=addstring kueri .

Response.Redirect(pageUrl + "?ProductAction=add");

Saat halaman dimuat ulang, string kueri disertakan dalam URL. Dengan memuat ulang halaman, pengguna milik peran "canEdit" dapat segera melihat pembaruan di kontrol DropDownList di halaman AdminPage.aspx . Selain itu, dengan menyertakan string kueri dengan URL, halaman dapat menampilkan pesan sukses kepada pengguna milik peran "canEdit".

Saat halaman AdminPage.aspx dimuat ulang, Page_Load peristiwa dipanggil.

protected void Page_Load(object sender, EventArgs e)
{
    string productAction = Request.QueryString["ProductAction"];
    if (productAction == "add")
    {
        LabelAddStatus.Text = "Product added!";
    }

    if (productAction == "remove")
    {
        LabelRemoveStatus.Text = "Product removed!";
    }
}

Penanganan Page_Load aktivitas memeriksa nilai string kueri dan menentukan apakah akan menampilkan pesan sukses.

Menjalankan Aplikasi

Anda dapat menjalankan aplikasi sekarang untuk melihat bagaimana Anda dapat menambahkan, menghapus, dan memperbarui item di kedai belanja. Total kedai belanja akan mencerminkan total biaya semua item di kedai belanja.

Di Penjelajah Solusi, tekan F5 untuk menjalankan aplikasi sampel Wingtip Toys.
Browser terbuka dan menampilkan halaman Default.aspx .
Klik tautan Masuk di bagian atas halaman.

Halaman Login.aspx ditampilkan.
Masukkan nama pengguna dan kata sandi.
Klik tombol Masuk di dekat bagian bawah halaman.
Di bagian atas halaman berikutnya, pilih tautan Admin untuk menavigasi ke halaman AdminPage.aspx.
Untuk menguji validasi input, klik tombol Tambahkan Produk tanpa menambahkan detail produk apa pun.

Perhatikan bahwa pesan bidang yang diperlukan ditampilkan.
Tambahkan detail untuk produk baru, lalu klik tombol Tambahkan Produk .
Pilih Produk dari menu navigasi atas untuk melihat produk baru yang Anda tambahkan.
Klik tautan Admin untuk kembali ke halaman administrasi.
Di bagian Hapus Produk dari halaman, pilih produk baru yang Anda tambahkan di DropDownListBox.
Klik tombol Hapus Produk untuk menghapus produk baru dari aplikasi.
Pilih Produk dari menu navigasi atas untuk mengonfirmasi bahwa produk telah dihapus.
Klik Keluar ke mode administrasi yang ada.
Perhatikan bahwa panel navigasi atas tidak lagi memperlihatkan item menu Admin.

Ringkasan

Dalam tutorial ini, Anda menambahkan peran kustom dan pengguna milik peran kustom, akses terbatas ke folder dan halaman administrasi, dan navigasi yang disediakan untuk pengguna milik peran kustom. Anda menggunakan pengikatan model untuk mengisi kontrol DropDownList dengan data. Anda menerapkan kontrol FileUpload dan kontrol validasi. Selain itu, Anda telah mempelajari cara menambahkan dan menghapus produk dari database. Dalam tutorial berikutnya, Anda akan mempelajari cara menerapkan perutean ASP.NET.

Sumber Daya Tambahan

Web.config - Elemen otorisasi
Identitas ASP.NET
Menyebarkan Aplikasi Formulir Web ASP.NET Aman dengan Keanggotaan, OAuth, dan SQL Database ke Situs Web Azure
Microsoft Azure - Uji Coba Gratis

Sebelumnya Berikutnya

Bagikan melalui

Keanggotaan dan Administrasi

Yang akan Anda pelajari:

Fitur-fitur ini disertakan dalam tutorial:

Menambahkan Peran Kustom

Membatasi Akses ke Halaman Administrasi

Tambahkan Folder dan Halaman Administrasi

Menambahkan File Web.config

Termasuk Navigasi Peran Kustom

Mengaktifkan Administrasi Produk

Validasi Tidak Mengganggu

Ekspresi Reguler

Kontrol FileUpload

Pengikatan Model

Cara Kerja Aplikasi

Menjalankan Aplikasi

Ringkasan

Sumber Daya Tambahan

Saran dan Komentar

Sumber Daya Tambahan: