Iterace č. 1 – vytvoření aplikace (VB)
od Microsoftu
V první iteraci vytvoříme Správce kontaktů nejjednodušším možným způsobem. Přidáváme podporu základních databázových operací: vytvoření, čtení, aktualizace a odstranění (CRUD).
Vytvoření aplikace Správy kontaktů ASP.NET MVC (VB)
V této sérii kurzů sestavíme od začátku do konce celou aplikaci Pro správu kontaktů. Aplikace Contact Manager umožňuje ukládat kontaktní informace – jména, telefonní čísla a e-mailové adresy – pro seznam osob.
Aplikaci sestavíme pomocí několika iterací. S každou iterací aplikaci postupně vylepšujeme. Cílem tohoto přístupu s více iteracemi je pochopit důvod každé změny.
Iterace č. 1 – vytvořte aplikaci. V první iteraci vytvoříme Správce kontaktů nejjednodušším možným způsobem. Přidáváme podporu základních databázových operací: vytvoření, čtení, aktualizace a odstranění (CRUD).
Iterace č. 2 – vzhled aplikace V této iteraci vylepšujeme vzhled aplikace úpravou výchozí ASP.NET stránky předlohy zobrazení MVC a šablony stylů CSS.
Iterace č. 3 – přidání ověření formuláře Ve třetí iteraci přidáme základní ověření formuláře. Bráníme uživatelům v odeslání formuláře bez vyplnění požadovaných polí formuláře. Ověřujeme také e-mailové adresy a telefonní čísla.
Iterace č. 4 – Nastavte aplikaci volně na párování. V této čtvrté iteraci využijeme několik vzorů návrhu softwaru, které usnadňují údržbu a úpravy aplikace Contact Manager. Například refaktorujeme aplikaci tak, aby používala vzor úložiště a model injektáže závislostí.
Iterace č. 5 – vytvoření testů jednotek V páté iteraci usnadňujeme údržbu a úpravy naší aplikace přidáním testů jednotek. Vysmíváme si třídy datového modelu a sestavujeme testy jednotek pro naše kontrolery a logiku ověřování.
Iterace č. 6 – použijte vývoj řízený testy. V této šesté iteraci přidáme do naší aplikace nové funkce tím, že nejprve napíšeme testy jednotek a proti testům jednotek napíšeme kód. V této iteraci přidáme skupiny kontaktů.
Iterace č. 7 – přidání funkcí Ajax V sedmé iteraci vylepšujeme rychlost odezvy a výkon naší aplikace přidáním podpory pro Ajax.
Tato iterace
V této první iteraci sestavíme základní aplikaci. Cílem je vytvořit Správce kontaktů nejrychlejším a nejjednodušším způsobem. V pozdějších iteracích vylepšujeme návrh aplikace.
Aplikace Contact Manager je základní databázová aplikace. Aplikaci můžete použít k vytváření nových kontaktů, úpravám existujících kontaktů a odstraňování kontaktů.
V této iteraci provedeme následující kroky:
- aplikace ASP.NET MVC
- Vytvoření databáze pro ukládání kontaktů
- Vygenerování třídy modelu pro naši databázi pomocí rozhraní Microsoft Entity Framework
- Vytvoření akce a zobrazení kontroleru, které nám umožní vypsat všechny kontakty v databázi
- Vytvoření akcí kontroleru a zobrazení, které nám umožní vytvořit nový kontakt v databázi
- Vytvoření akcí kontroleru a zobrazení, které nám umožní upravit existující kontakt v databázi
- Vytvoření akcí kontroleru a zobrazení, které nám umožní odstranit existující kontakt v databázi
Požadavky na software
V aplikacích ASP.NET MVC musíte mít v počítači nainstalovanou sadu Visual Studio 2008 nebo Visual Web Developer 2008 (Visual Web Developer je bezplatná verze sady Visual Studio, která neobsahuje všechny pokročilé funkce sady Visual Studio). Zkušební verzi sady Visual Studio 2008 nebo Visual Web Developer si můžete stáhnout z následující adresy:
https://www.asp.net/downloads/essential/
Poznámka
Pro ASP.NET aplikací MVC se službou Visual Web Developer musíte mít nainstalovanou aktualizaci Visual Web Developer Service Pack 1. Bez aktualizace Service Pack 1 nelze vytvořit projekty webových aplikací.
ASP.NET rozhraní MVC. Rozhraní ASP.NET MVC si můžete stáhnout z následující adresy:
V tomto kurzu pro přístup k databázi používáme Microsoft Entity Framework. Entity Framework je součástí .NET Framework 3.5 Service Pack 1. Tuto aktualizaci Service Pack si můžete stáhnout z následujícího umístění:
https://www.microsoft.com/download/details.aspx?id=22& desc=dotnet35
Jako alternativu ke každému z těchto stahování po jednom můžete využít instalační program webové platformy (Web PI). Webový platební nástroj si můžete stáhnout z následující adresy:
https://www.asp.net/downloads/essential/
projekt ASP.NET MVC
ASP.NET projekt webové aplikace MVC. Spusťte Visual Studio a vyberte možnost nabídky Soubor, Nový projekt. Zobrazí se dialogové okno Nový projekt (viz obrázek 1). Vyberte typ webového projektu a šablonu ASP.NET webová aplikace MVC . Pojmenujte nový projekt ContactManager a klikněte na tlačítko OK.
Ujistěte se, že je v rozevíracím seznamu v pravém horním rohu dialogového okna Nový projekt vybráno rozhraní .NET Framework 3.5. Jinak se šablona webové aplikace ASP.NET MVC nezobrazí.
Obrázek 01: Dialogové okno Nový projekt (kliknutím zobrazíte obrázek v plné velikosti)
ASP.NET aplikaci MVC se zobrazí dialogové okno Vytvořit projekt testování jednotek . Pomocí tohoto dialogového okna můžete označit, že chcete při vytváření aplikace ASP.NET MVC vytvořit projekt testu jednotek a přidat ho do řešení. I když v této iteraci nebudeme vytvářet testy jednotek, měli byste vybrat možnost Ano, vytvořit projekt testování jednotek, protože testy jednotek plánujeme přidat v pozdější iteraci. Přidání testovacího projektu při prvním vytvoření nového projektu ASP.NET MVC je mnohem jednodušší než přidání testovacího projektu po vytvoření projektu ASP.NET MVC.
Poznámka
Vzhledem k tomu, že Visual Web Developer nepodporuje projekty testů, nezobrazí se dialogové okno Vytvořit projekt testování jednotek při použití Visual Web Developer.
Obrázek 02: Dialogové okno Vytvořit projekt testování jednotek (kliknutím zobrazíte obrázek v plné velikosti)
ASP.NET aplikace MVC se zobrazí v okně Průzkumník řešení sady Visual Studio (viz obrázek 3). Pokud Průzkumník řešení okno nevidíte, můžete toto okno otevřít výběrem možnosti nabídky Zobrazit Průzkumník řešení. Všimněte si, že řešení obsahuje dva projekty: projekt ASP.NET MVC a projekt Test. Projekt ASP.NET MVC má název ContactManager a projekt Test má název ContactManager.Tests.
Obrázek 03: Okno Průzkumník řešení (kliknutím zobrazíte obrázek v plné velikosti)
Odstranění ukázkových souborů projektu
Šablona projektu ASP.NET MVC obsahuje ukázkové soubory pro kontrolery a zobrazení. Před vytvořením nové aplikace ASP.NET MVC byste měli tyto soubory odstranit. Soubory a složky v okně Průzkumník řešení můžete odstranit tak, že kliknete pravým tlačítkem na soubor nebo složku a vyberete možnost nabídky Odstranit.
Z projektu ASP.NET MVC musíte odstranit následující soubory:
\Controllers\HomeController.vb
\Views\Home\About.aspx
\Views\Home\Index.aspx
A z projektu testování musíte odstranit následující soubor:
\Controllers\HomeControllerTest.vb
Vytvoření databáze
Aplikace Contact Manager je webová aplikace řízená databází. K uložení kontaktních informací používáme databázi.
ASP.NET architekturu MVC se všemi moderními databázemi, včetně databází Microsoft SQL Server, Oracle, MySQL a IBM DB2. V tomto kurzu používáme databázi Microsoft SQL Server. Při instalaci sady Visual Studio máte k dispozici možnost instalace Microsoft SQL Server Express, což je bezplatná verze databáze Microsoft SQL Server.
Vytvořte novou databázi kliknutím pravým tlačítkem na složku App_Data v okně Průzkumník řešení a výběrem možnosti nabídky Přidat, Nová položka. V dialogovém okně Přidat novou položku vyberte kategorii Data a šablonu SQL Server Database (viz Obrázek 4). Pojmenujte novou databázi ContactManagerDB.mdf a klikněte na tlačítko OK.
Obrázek 04: Vytvoření nové databáze Microsoft SQL Server Express (kliknutím zobrazíte obrázek v plné velikosti)
Po vytvoření nové databáze se databáze zobrazí ve složce App_Data v okně Průzkumník řešení. Poklikáním na soubor ContactManager.mdf otevřete okno Průzkumník serveru a připojte se k databázi.
Poznámka
Okno Průzkumníka serveru se v případě Microsoft Visual Web Developer nazývá okno Průzkumník databáze.
Okno Průzkumníka serveru můžete použít k vytvoření nových databázových objektů, jako jsou databázové tabulky, zobrazení, triggery a uložené procedury. Klikněte pravým tlačítkem na složku Tabulky a vyberte možnost nabídky Přidat novou tabulku. Zobrazí se Designer tabulka databáze (viz obrázek 5).
Obrázek 05: Tabulka databáze Designer (kliknutím zobrazíte obrázek v plné velikosti)
Potřebujeme vytvořit tabulku, která obsahuje následující sloupce:
| Název sloupce | Datový typ | Povolit hodnoty Null |
|---|---|---|
| Id | int | false (nepravda) |
| FirstName | nvarchar(50) | false (nepravda) |
| LastName | nvarchar(50) | false (nepravda) |
| Rozložení | nvarchar(50) | false (nepravda) |
| nvarchar(255) | false (nepravda) |
První sloupec, sloupec Id, je zvláštní. Sloupec Id musíte označit jako sloupec Identita a Primární klíč. Tím, že sloupec je sloupec Identita, označíte rozbalením Vlastnosti sloupce (podívejte se na dolní část obrázku 6) a posuňte se dolů k vlastnosti Specifikace identity. Nastavte vlastnost (Is Identity) na hodnotu Ano.
Sloupec označíte jako sloupec Primární klíč tak, že ho vyberete a kliknete na tlačítko s ikonou klíče. Jakmile je sloupec označený jako sloupec Primární klíč, zobrazí se vedle sloupce ikona klíče (viz Obrázek 6).
Po dokončení vytváření tabulky uložte novou tabulku kliknutím na tlačítko Uložit (tlačítko s ikonou diskety). Pojmenujte novou tabulku Kontakty.
Po vytvoření databázové tabulky Kontakty byste do tabulky měli přidat nějaké záznamy. Klikněte pravým tlačítkem myši na tabulku Kontakty v okně Průzkumník serveru a vyberte možnost nabídky Zobrazit data tabulky. Do mřížky, která se zobrazí, zadejte jeden nebo více kontaktů.
Vytvoření datového modelu
Aplikace ASP.NET MVC se skládá z modelů, zobrazení a kontrolerů. Začneme vytvořením třídy Model, která představuje tabulku Kontakty, kterou jsme vytvořili v předchozí části.
V tomto kurzu použijeme Microsoft Entity Framework k automatickému vygenerování třídy modelu z databáze.
Poznámka
Architektura ASP.NET MVC není nijak svázaná s rozhraním Microsoft Entity Framework. ASP.NET MVC můžete použít s alternativními technologiemi přístupu k databázím, jako jsou NHibernate, LINQ to SQL nebo ADO.NET.
Podle těchto kroků vytvořte třídy datového modelu:
- V okně Průzkumník řešení klikněte pravým tlačítkem na složku Modely a vyberte Přidat, Nová položka. Zobrazí se dialogové okno Přidat novou položku (viz obrázek 6).
- Vyberte kategorii Data a šablonu ADO.NET Entity Data Model. Pojmenujte datový model ContactManagerModel.edmx a klikněte na tlačítko Přidat . Zobrazí se průvodce Modelem dat entit (viz obrázek 7).
- V kroku Zvolit obsah modelu vyberte Vygenerovat z databáze (viz Obrázek 7).
- V kroku Zvolte datové připojení vyberte databázi ContactManagerDB.mdf a zadejte název ContactManagerDBEntities pro nastavení připojení entity (viz Obrázek 8).
- V kroku Zvolte databázové objekty zaškrtněte políčko Tabulky (viz obrázek 9). Datový model bude obsahovat všechny tabulky obsažené ve vaší databázi (existuje jen jedna, tabulka Kontakty). Zadejte obor názvů Models. Kliknutím na tlačítko Dokončit dokončete průvodce.
Obrázek 06: Dialogové okno Přidat novou položku (kliknutím zobrazíte obrázek v plné velikosti)
Obrázek 07: Volba obsahu modelu (kliknutím zobrazíte obrázek v plné velikosti)
Obrázek 08: Volba datového připojení (kliknutím zobrazíte obrázek v plné velikosti)
Obrázek 09: Volba databázových objektů (kliknutím zobrazíte obrázek v plné velikosti)
Po dokončení Průvodce modelem dat entity se zobrazí Designer Modelu dat entity. Návrhář zobrazí třídu, která odpovídá každé modelované tabulce. Měla by se zobrazit jedna třída s názvem Kontakty.
Průvodce Modelem dat entit generuje názvy tříd na základě názvů databázových tabulek. Téměř vždy je potřeba změnit název třídy vygenerované průvodcem. V návrháři klikněte pravým tlačítkem na třídu Kontakty a vyberte možnost nabídky Přejmenovat. Změňte název třídy z Kontakty (množné číslo) na Kontakt (jednotné číslo). Po změně názvu třídy by se třída měla zobrazit jako Obrázek 10.
Obrázek 10: Třída kontaktu (kliknutím zobrazíte obrázek v plné velikosti)
V tomto okamžiku jsme vytvořili náš model databáze. Ke znázornění konkrétního záznamu kontaktu v naší databázi můžeme použít třídu Contact.
Vytvoření domácího kontroleru
Dalším krokem je vytvoření kontroleru Home. Kontroler Home je výchozí kontroler vyvolaný v aplikaci ASP.NET MVC.
Vytvořte třídu Home controller tak, že v okně Průzkumník řešení kliknete pravým tlačítkem na složku Kontrolery a vyberete možnost nabídky Přidat, Kontroler (viz Obrázek 11). Všimněte si zaškrtávacího políčka Přidat metody akcí pro scénáře Vytvoření, Aktualizace a Podrobnosti. Před kliknutím na tlačítko Přidat se ujistěte, že je toto políčko zaškrtnuté.
Obrázek 11: Přidání domácího ovladače (kliknutím zobrazíte obrázek v plné velikosti)
Když vytvoříte kontroler Home, získáte třídu ve výpisu 1.
Výpis 1 – Kontrolery\HomeController.vb
Public Class HomeController
Inherits System.Web.Mvc.Controller
'
' GET: /Home/
Function Index() As ActionResult
Return View()
End Function
'
' GET: /Home/Details/5
Function Details(ByVal id As Integer) As ActionResult
Return View()
End Function
'
' GET: /Home/Create
Function Create() As ActionResult
Return View()
End Function
'
' POST: /Home/Create
<AcceptVerbs(HttpVerbs.Post)> _
Function Create(ByVal collection As FormCollection) As ActionResult
Try
' TODO: Add insert logic here
Return RedirectToAction("Index")
Catch
Return View()
End Try
End Function
'
' GET: /Home/Edit/5
Function Edit(ByVal id As Integer) As ActionResult
Return View()
End Function
'
' POST: /Home/Edit/5
<AcceptVerbs(HttpVerbs.Post)> _
Function Edit(ByVal id As Integer, ByVal collection As FormCollection) As ActionResult
Try
' TODO: Add update logic here
Return RedirectToAction("Index")
Catch
Return View()
End Try
End Function
End Class
Výpis kontaktů
Abychom mohli zobrazit záznamy v tabulce databáze Kontakty, musíme vytvořit akci Index() a zobrazení Index.
Kontroler Home už obsahuje akci Index(). Tuto metodu musíme upravit tak, aby vypadala jako výpis 2.
Výpis 2 – Kontrolery\HomeController.vb
Public Class HomeController
Inherits System.Web.Mvc.Controller
Private _entities As New ContactManagerDBEntities()
'
' GET: /Home/
Function Index() As ActionResult
Return View(_entities.ContactSet.ToList())
End Function
…
Všimněte si, že třída domácího kontroleru v seznamu 2 obsahuje privátní pole s názvem _entities. Pole _entities představuje entity z datového modelu. Ke komunikaci s databází používáme pole _entities.
Metoda Index() vrátí zobrazení, které představuje všechny kontakty z tabulky databáze Kontakty. Výraz _entities. ContactSet.ToList() vrátí seznam kontaktů jako obecný seznam.
Teď, když jsme vytvořili kontroler indexu, musíme vytvořit zobrazení Index. Před vytvořením zobrazení indexu zkompilujte aplikaci výběrem možnosti nabídky Sestavit, Sestavit řešení. Před přidáním zobrazení byste měli projekt vždy zkompilovat, aby se v dialogovém okně Přidat zobrazení zobrazil seznam tříd modelu.
Zobrazení indexu vytvoříte tak, že kliknete pravým tlačítkem na metodu Index() a vyberete možnost nabídky Přidat zobrazení (viz Obrázek 12). Výběrem této možnosti nabídky se otevře dialogové okno Přidat zobrazení (viz Obrázek 13).
Obrázek 12: Přidání zobrazení indexu (kliknutím zobrazíte obrázek v plné velikosti)
V dialogovém okně Přidat zobrazení zaškrtněte políčko Vytvořit zobrazení silného typu. Vyberte třídu View data ContactManager.Contact a Zobrazit seznam obsahu. Výběrem těchto možností se vygeneruje zobrazení, které zobrazí seznam záznamů kontaktů.
Obrázek 13: Dialogové okno Přidat zobrazení (kliknutím zobrazíte obrázek v plné velikosti)
Po kliknutí na tlačítko Přidat se vygeneruje zobrazení Index ve výpisu 3. Všimněte si direktivy <%@ Page %> , která se zobrazí v horní části souboru. Zobrazení indexu dědí z třídy ViewPage<IEnumerable<ContactManager.Models.Contact>> . Jinými slovy třída Model v zobrazení představuje seznam entit kontaktů.
Tělo zobrazení Index obsahuje smyčku foreach, která iteruje každý z kontaktů reprezentovaných modelem třídy. Hodnota každé vlastnosti třídy Contact je zobrazena v tabulce HTML.
Výpis 3 – Views\Home\Index.aspx (beze změny)
<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage(Of IEnumerable(Of ContactManager.Contact))" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<title>Index</title>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>Index</h2>
<p>
<%=Html.ActionLink("Create New", "Create")%>
</p>
<table>
<tr>
<th></th>
<th>
Id
</th>
<th>
FirstName
</th>
<th>
LastName
</th>
<th>
Phone
</th>
<th>
Email
</th>
</tr>
<% For Each item In Model%>
<tr>
<td>
<%=Html.ActionLink("Edit", "Edit", New With {.id = item.Id})%> |
<%=Html.ActionLink("Details", "Details", New With {.id = item.Id})%>
</td>
<td>
<%=Html.Encode(item.Id)%>
</td>
<td>
<%=Html.Encode(item.FirstName)%>
</td>
<td>
<%=Html.Encode(item.LastName)%>
</td>
<td>
<%=Html.Encode(item.Phone)%>
</td>
<td>
<%=Html.Encode(item.Email)%>
</td>
</tr>
<% Next%>
</table>
</asp:Content>
Potřebujeme provést jednu změnu zobrazení indexu. Vzhledem k tomu, že nevytvářejíme zobrazení podrobností, můžeme odkaz Podrobnosti odebrat. Vyhledejte a odeberte následující kód ze zobrazení Index:
{.id = položka. Id})%>
Po úpravě zobrazení Index můžete spustit aplikaci Contact Manager. Vyberte možnost nabídky Ladit, Spustit ladění nebo jednoduše stiskněte klávesu F5. Při prvním spuštění aplikace se zobrazí dialogové okno na obrázku 14. Vyberte možnost Upravit soubor Web.config pro povolení ladění a klikněte na tlačítko OK.
Obrázek 14: Povolení ladění (kliknutím zobrazíte obrázek v plné velikosti)
Zobrazení indexu je ve výchozím nastavení vráceno. Toto zobrazení obsahuje seznam všech dat z tabulky databáze Kontakty (viz Obrázek 15).
Obrázek 15: Zobrazení indexu (kliknutím zobrazíte obrázek v plné velikosti)
Všimněte si, že zobrazení Index obsahuje odkaz s popiskem Vytvořit nový v dolní části zobrazení. V další části se dozvíte, jak vytvářet nové kontakty.
Vytváření nových kontaktů
Abychom uživatelům umožnili vytvářet nové kontakty, musíme přidat dvě akce Create() do domovského kontroleru. Potřebujeme vytvořit jednu akci Create(), která vrátí formulář HTML pro vytvoření nového kontaktu. Potřebujeme vytvořit druhou akci Create(), která provede skutečné vložení nového kontaktu do databáze.
Nové metody Create(), které musíme přidat do domovského kontroleru, jsou obsaženy ve výpisu 4.
Výpis 4 – Controllers\HomeController.vb (s metodami Create)
'
' GET: /Home/Create
Function Create() As ActionResult
Return View()
End Function
'
' POST: /Home/Create
<AcceptVerbs(HttpVerbs.Post)> _
Function Create(<Bind(Exclude:="Id")> ByVal contactToCreate As Contact) As ActionResult
If Not ModelState.IsValid Then
Return View()
End If
Try
_entities.AddToContactSet(contactToCreate)
_entities.SaveChanges()
Return RedirectToAction("Index")
Catch
Return View()
End Try
End Function
První metodu Create() lze vyvolat pomocí HTTP GET, zatímco druhou metodu Create() může vyvolat pouze HTTP POST. Jinými slovy, druhou metodu Create() lze vyvolat pouze při publikování formuláře HTML. První metoda Create() jednoduše vrátí zobrazení, které obsahuje formulář HTML pro vytvoření nového kontaktu. Druhá metoda Create() je mnohem zajímavější: přidá nový kontakt do databáze.
Všimněte si, že druhá metoda Create() byla upravena tak, aby přijímala instanci třídy Contact. Hodnoty formuláře odeslané z formuláře HTML jsou vázány na tuto třídu Contact ASP.NET MVC framework automaticky. Každé pole formuláře z formuláře HTML Create je přiřazeno vlastnosti parametru Contact.
Všimněte si, že parametr Contact je opatřen atributem [Bind]. Atribut [Bind] se používá k vyloučení id kontaktu vlastnost z vazby. Vzhledem k tomu, že vlastnost Id představuje vlastnost Identity, nechceme vlastnost Id nastavit.
V těle metody Create() se Entity Framework používá k vložení nového kontaktu do databáze. Nový kontakt se přidá do existující sady kontaktů a metoda SaveChanges() je volána, aby se tyto změny odeslaly zpět do podkladové databáze.
Formulář HTML pro vytváření nových kontaktů můžete vygenerovat tak, že kliknete pravým tlačítkem na některou ze dvou metod Create() a vyberete možnost nabídky Přidat zobrazení (viz Obrázek 16).
Obrázek 16: Přidání zobrazení Vytvořit (kliknutím zobrazíte obrázek v plné velikosti)
V dialogovém okně Přidat zobrazení vyberte třídu ContactManager.Contact a možnost Vytvořit pro zobrazení obsahu (viz Obrázek 17). Když kliknete na tlačítko Přidat , automaticky se vygeneruje zobrazení Vytvořit.
Obrázek 17: Zobrazení exploze stránky (kliknutím zobrazíte obrázek v plné velikosti)
Zobrazení Vytvořit obsahuje pole formuláře pro každou z vlastností třídy Contact. Kód pro zobrazení Vytvořit je součástí výpisu 5.
Výpis 5 - Views\Home\Create.aspx
<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage(Of ContactManager.Contact)" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<title>Create</title>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>Create</h2>
<%= Html.ValidationSummary() %>
<% Using Html.BeginForm()%>
<fieldset>
<legend>Fields</legend>
<p>
<label for="FirstName">FirstName:</label>
<%= Html.TextBox("FirstName") %>
<%= Html.ValidationMessage("FirstName", "*") %>
</p>
<p>
<label for="LastName">LastName:</label>
<%= Html.TextBox("LastName") %>
<%= Html.ValidationMessage("LastName", "*") %>
</p>
<p>
<label for="Phone">Phone:</label>
<%= Html.TextBox("Phone") %>
<%= Html.ValidationMessage("Phone", "*") %>
</p>
<p>
<label for="Email">Email:</label>
<%= Html.TextBox("Email") %>
<%= Html.ValidationMessage("Email", "*") %>
</p>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
<% End Using %>
<div>
<%=Html.ActionLink("Back to List", "Index") %>
</div>
</asp:Content>
Po úpravě metod Create() a přidání zobrazení Vytvořit můžete spustit aplikaci Contact Manger a vytvořit nové kontakty. Kliknutím na odkaz Vytvořit nový , který se zobrazí v zobrazení Index, přejděte do zobrazení Vytvořit. Toto zobrazení by se mělo zobrazit na obrázku 18.
Obrázek 18: Vytvoření zobrazení (kliknutím zobrazíte obrázek v plné velikosti)
Úpravy kontaktů
Přidání funkce pro úpravu záznamu kontaktu je velmi podobné přidání funkce pro vytváření nových záznamů kontaktů. Nejprve musíme do třídy Home controller přidat dvě nové editační metody. Tyto nové metody Edit() jsou obsaženy ve výpisu 6.
Výpis 6 – Controllers\HomeController.vb (s metodami Edit)
'
' GET: /Home/Edit/5
Function Edit(ByVal id As Integer) As ActionResult
Dim contactToEdit = (from c in _entities.ContactSet _
where c.Id = id _
select c).FirstOrDefault()
Return View(contactToEdit)
End Function
'
' POST: /Home/Edit/5
<AcceptVerbs(HttpVerbs.Post)> _
Function Edit(ByVal contactToEdit As Contact) As ActionResult
If Not ModelState.IsValid Then
Return View()
End If
Try
Dim originalContact = (from c in _entities.ContactSet _
where c.Id = contactToEdit.Id _
select c).FirstOrDefault()
_entities.ApplyPropertyChanges( originalContact.EntityKey.EntitySetName, contactToEdit)
_entities.SaveChanges()
Return RedirectToAction("Index")
Catch
Return View()
End Try
End Function
První metoda Edit() je vyvolána operací HTTP GET. Této metodě je předán parametr ID, který představuje ID upravovaného záznamu kontaktu. Entity Framework se používá k načtení kontaktu, který odpovídá ID. Vrátí se zobrazení, které obsahuje formulář HTML pro úpravu záznamu.
Druhá metoda Edit() provede skutečnou aktualizaci databáze. Tato metoda přijímá instanci třídy Contact jako parametr. Rozhraní ASP.NET MVC automaticky sváže pole formuláře z formuláře Edit s touto třídou. Všimněte si, že při úpravách kontaktu nezahrnujete atribut [Bind] (potřebujeme hodnotu vlastnosti Id).
Entity Framework slouží k uložení upraveného kontaktu do databáze. Původní kontakt musí být nejprve načten z databáze. Dále entity Framework ApplyPropertyChanges() metoda je volána k zaznamenání změn v Contact. Nakonec je volána metoda SaveChanges() entity frameworku, která zachovají změny v podkladové databázi.
Zobrazení obsahující formulář pro úpravy můžete vygenerovat tak, že kliknete pravým tlačítkem na metodu Edit() a vyberete možnost nabídky Přidat zobrazení. V dialogovém okně Přidat zobrazení vyberte třídu ContactManager.Models.Contact a obsah zobrazení Upravit (viz Obrázek 19).
Obrázek 19: Přidání zobrazení pro úpravy (kliknutím zobrazíte obrázek v plné velikosti)
Po kliknutí na tlačítko Přidat se automaticky vygeneruje nové zobrazení pro úpravy. Vygenerovaný formulář HTML obsahuje pole, která odpovídají každé z vlastností třídy Contact (viz Výpis 7).
Výpis 7 - Views\Home\Edit.aspx
<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage(Of ContactManager.Contact)" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<title>Edit</title>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>Edit</h2>
<%=Html.ValidationSummary()%>
<% Using Html.BeginForm() %>
<fieldset>
<legend>Fields</legend>
<p>
<label for="FirstName">FirstName:</label>
<%= Html.TextBox("FirstName") %>
<%= Html.ValidationMessage("FirstName", "*") %>
</p>
<p>
<label for="LastName">LastName:</label>
<%= Html.TextBox("LastName") %>
<%= Html.ValidationMessage("LastName", "*") %>
</p>
<p>
<label for="Phone">Phone:</label>
<%= Html.TextBox("Phone") %>
<%= Html.ValidationMessage("Phone", "*") %>
</p>
<p>
<label for="Email">Email:</label>
<%= Html.TextBox("Email") %>
<%= Html.ValidationMessage("Email", "*") %>
</p>
<p>
<input type="submit" value="Save" />
</p>
</fieldset>
<% End Using %>
<div>
<%=Html.ActionLink("Back to List", "Index") %>
</div>
</asp:Content>
Odstraňování kontaktů
Pokud chcete odstranit kontakty, musíte do třídy Home controller přidat dvě akce Delete(). První akce Delete() zobrazí formulář potvrzení odstranění. Druhá akce Delete() provede skutečné odstranění.
Poznámka
Později v iteraci č. 7 upravíme Správce kontaktů tak, aby podporoval jeden krok odstranění Ajaxem.
Dvě nové metody Delete() jsou obsaženy ve výpisu 8.
Výpis 8 – Controllers\HomeController.vb (metody Delete)
'
' GET: /Home/Delete/5
Function Delete(ByVal id As Integer) As ActionResult
Dim contactToDelete = (from c in _entities.ContactSet _
where c.Id = id _
select c).FirstOrDefault()
Return View(contactToDelete)
End Function
'
' POST: /Home/Delete/5
<AcceptVerbs(HttpVerbs.Post)> _
Function Delete(ByVal contactToDelete As Contact) As ActionResult
Try
Dim originalContact = (from c in _entities.ContactSet _
where c.Id = contactToDelete.Id _
select c).FirstOrDefault()
_entities.DeleteObject(originalContact)
_entities.SaveChanges()
Return RedirectToAction("Index")
Catch
Return View()
End Try
End Function
První metoda Delete() vrátí potvrzovací formulář pro odstranění záznamu kontaktu z databáze (viz Obrázek 20). Druhá metoda Delete() provádí skutečnou operaci odstranění databáze. Po načtení původního kontaktu z databáze jsou volány metody Entity Framework DeleteObject() a SaveChanges() k provedení odstranění databáze.
Obrázek 20: Zobrazení potvrzení odstranění (kliknutím zobrazíte obrázek v plné velikosti)
Potřebujeme upravit zobrazení indexu tak, aby obsahovalo odkaz pro odstranění záznamů kontaktů (viz obrázek 21). Do stejné buňky tabulky, která obsahuje odkaz Upravit, musíte přidat následující kód:
{.id = položka. Id})%>
Obrázek 21: Zobrazení indexu s odkazem Upravit (kliknutím zobrazíte obrázek v plné velikosti)
Dále musíme vytvořit zobrazení potvrzení odstranění. Klikněte pravým tlačítkem myši na metodu Delete() ve třídě Home controller a vyberte možnost nabídky Přidat zobrazení. Zobrazí se dialogové okno Přidat zobrazení (viz Obrázek 22).
Na rozdíl od zobrazení Seznam, Vytvořit a Upravit dialogové okno Přidat zobrazení neobsahuje možnost pro vytvoření zobrazení Odstranit. Místo toho vyberte ContactManager.Models.Contact datová třída a obsah prázdného zobrazení. Výběr možnosti Obsah prázdného zobrazení bude vyžadovat, abychom zobrazení vytvořili sami.
Obrázek 22: Přidání zobrazení potvrzení odstranění (kliknutím zobrazíte obrázek v plné velikosti)
Obsah zobrazení Odstranit je obsažen ve výpisu 9. Toto zobrazení obsahuje formulář, který potvrzuje, zda má být konkrétní kontakt odstraněn (viz obrázek 21).
Výpis 9 – Views\Home\Delete.aspx
<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage(Of ContactManager.Contact)" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<title>Delete</title>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>Delete</h2>
<p>
Are you sure that you want to delete the entry for
<%= Model.FirstName %> <%= Model.LastName %>?
</p>
<% Using Html.BeginForm(New With { .Id = Model.Id }) %>
<p>
<input type="submit" value="Delete" />
</p>
<% End Using %>
<div>
<%=Html.ActionLink("Back to List", "Index") %>
</div>
</asp:Content>
Změna názvu výchozího kontroleru
Může vás obtěžovat, že název třídy kontroleru pro práci s kontakty se nazývá HomeController třída. Neměl by mít kontroler název ContactController?
Tento problém je dostatečně jednoduchý na to, aby se vyřešil. Nejprve musíme refaktorovat název kontroleru Home. Otevřete třídu HomeController v editoru Visual Studio Code Editor, klikněte pravým tlačítkem na název třídy a vyberte možnost nabídky Přejmenovat. Výběrem této možnosti nabídky se otevře dialogové okno Přejmenovat.
Obrázek 23: Refaktoring názvu kontroleru (kliknutím zobrazíte obrázek v plné velikosti)
Obrázek 24: Použití dialogového okna Přejmenovat (kliknutím zobrazíte obrázek v plné velikosti)
Pokud přejmenujete třídu kontroleru, Visual Studio také aktualizuje název složky ve složce Zobrazení. Visual Studio přejmenuje složku \Views\Home na složku \Views\Contact.
Po provedení této změny už vaše aplikace nebude mít kontroler Home. Po spuštění aplikace se na obrázku 25 zobrazí chybová stránka.
Obrázek 25: Žádný výchozí kontroler (kliknutím zobrazíte obrázek v plné velikosti)
Potřebujeme aktualizovat výchozí trasu v souboru Global.asax tak, aby místo kontroleru Home používala kontroler kontaktů. Otevřete soubor Global.asax a upravte výchozí kontroler používaný výchozí trasou (viz výpis 10).
Výpis 10 – Global.asax.vb
Public Class MvcApplication
Inherits System.Web.HttpApplication
Shared Sub RegisterRoutes(ByVal routes As RouteCollection)
routes.IgnoreRoute("{resource}.axd/{*pathInfo}")
' MapRoute takes the following parameters, in order:
' (1) Route name
' (2) URL with parameters
' (3) Parameter defaults
routes.MapRoute( _
"Default", _
"{controller}/{action}/{id}", _
New With {.controller = "Home", .action = "Index", .id = ""} _
)
End Sub
Sub Application_Start()
RegisterRoutes(RouteTable.Routes)
End Sub
End Class
Po provedení těchto změn bude Správce kontaktů fungovat správně. Teď jako výchozí kontroler použije třídu Kontroler kontaktů.
Souhrn
V této první iteraci jsme vytvořili základní aplikaci Contact Manager nejrychlejším možným způsobem. K automatickému vygenerování počátečního kódu pro kontrolery a zobrazení jsme využili Visual Studio. Využili jsme také Entity Framework k automatickému vygenerování tříd modelu databáze.
V současné době můžeme v aplikaci Contact Manager vypsat, vytvořit, upravit a odstranit záznamy kontaktů. Jinými slovy, můžeme provádět všechny základní databázové operace vyžadované webovou aplikací řízenou databází.
Naše aplikace má bohužel určité problémy. Nejprve váhám připustit, že aplikace Contact Manager není ta nejatraktivnější aplikace. Potřebuje to nějakou práci na návrhu. V další iteraci se podíváme na to, jak můžeme změnit výchozí stránku předlohy zobrazení a šablonu stylů CSS, abychom vylepšili vzhled aplikace.
Zadruhé jsme neimplementovali žádné ověřování formulářů. Například nic nebrání v odeslání formuláře Vytvořit kontakt bez zadání hodnot do některého z polí formuláře. Kromě toho můžete zadat neplatná telefonní čísla a e-mailové adresy. Začneme řešit problém ověření formuláře v iteraci č. 3.
A co je nejdůležitější, aktuální iteraci aplikace Contact Manager nelze snadno upravit ani udržovat. Například logika přístupu k databázi se zapásá přímo do akcí kontroleru. To znamená, že nemůžeme upravovat kód pro přístup k datům bez úprav našich kontrolerů. V pozdějších iteracích prozkoumáme vzory návrhu softwaru, které můžeme implementovat, aby byl Contact Manager odolnější vůči změnám.