ASP.NET MVC 4 – generování uživatelského rozhraní a migrace sady Entity Framework

Autor: Web Camp Team

Stáhnout Web Camp Training Kit

Pokud znáte ASP.NET metod kontroleru MVC 4 nebo jste dokončili praktické cvičení "Pomocné rutiny, formuláře a ověřování", měli byste vědět, že velká část logiky pro vytváření, aktualizaci, výpis a odebrání všech entit dat se opakuje v celé aplikaci. Nemluvě o tom, že pokud má váš model několik tříd pro manipulaci, budete pravděpodobně věnovat značnému času psaní metod akcí POST a GET pro každou operaci entity a také každé zobrazení.

V tomto cvičení se dozvíte, jak pomocí generování ASP.NET MVC 4 automaticky vygenerovat směrný plán CRUD vaší aplikace (vytvoření, čtení, aktualizace a odstranění). Počínaje jednoduchou třídou modelu a bez psaní jednoho řádku kódu vytvoříte kontroler, který bude obsahovat všechny operace CRUD a také všechna potřebná zobrazení. Po sestavení a spuštění jednoduchého řešení budete mít vygenerovanou aplikační databázi společně s logikou MVC a zobrazeními pro manipulaci s daty.

Kromě toho se dozvíte, jak snadné je používat migrace Entity Framework k provádění aktualizací modelu v celé aplikaci. Migrace Entity Framework vám umožní upravit databázi po změně modelu pomocí jednoduchých kroků. S ohledem na to, že budete moct vytvářet a udržovat webové aplikace efektivněji a využívat nejnovější funkce ASP.NET MVC 4.

Poznámka:

Všechny ukázkové kódy a fragmenty kódu jsou součástí sady Web Camp Training Kit, která je k dispozici na stránkách Microsoft-Web/WebCampTrainingKit Release. Projekt specifický pro toto cvičení je k dispozici v ASP.NET generování a migraci entity Framework MVC 4.

Cíle

V tomto praktickém cvičení se naučíte:

• Pro operace CRUD v řadičích použijte ASP.NET generování uživatelského rozhraní.
• Změňte model databáze pomocí migrací entity Framework.

Požadavky

K dokončení tohoto cvičení musíte mít následující položky:

• Microsoft Visual Studio Express 2012 pro web nebo superior (pokyny k instalaci najdete v dodatku A ).

Nastavení

Instalace fragmentů kódu

Pro usnadnění práce je většina kódu, který budete spravovat v tomto cvičení, k dispozici jako fragmenty kódu sady Visual Studio. Chcete-li nainstalovat fragmenty kódu, spusťte soubor .\Source\Setup\CodeSnippets.vsi .

Pokud nemáte zkušenosti s fragmenty kódu sady Visual Studio Code a chcete se naučit, jak je používat, můžete odkazovat na dodatek z tohoto dokumentu "Příloha B: Použití fragmentů kódu".

---

Cvičení

Toto praktické cvičení tvoří následující cvičení:

1. Použití generování uživatelského rozhraní MVC 4 ASP.NET s migrací Entity Frameworku

Poznámka:

Toto cvičení je doprovázeno koncovou složkou obsahující výsledné řešení, které byste měli získat po dokončení cvičení. Toto řešení můžete použít jako vodítko, pokud potřebujete další pomoc s prací v tomto cvičení.

Odhadovaná doba dokončení tohoto cvičení: 30 minut

Cvičení 1: Použití generování uživatelského rozhraní MVC 4 ASP.NET s migrací Entity Framework

ASP.NET generování uživatelského rozhraní MVC poskytuje rychlý způsob, jak vygenerovat operace CRUD standardizovaným způsobem a vytvořit potřebnou logiku, která vaší aplikaci umožní pracovat s databázovou vrstvou.

V tomto cvičení se dozvíte, jak pomocí generování ASP.NET MVC 4 s kódem nejprve vytvořit metody CRUD. Pak se dozvíte, jak aktualizovat model pomocí migrací Entity Frameworku na změny v databázi.

Úkol 1– Vytvoření nového projektu ASP.NET MVC 4 pomocí generování uživatelského rozhraní

1. Pokud ještě není otevřený, spusťte Visual Studio 2012.

2. Vybrat soubor | Nový projekt. V dialogovém okně Nový projekt v části Visual C# | Webová část vyberte ASP.NET webovou aplikaci MVC 4. Pojmenujte projekt MVC4andEFMigrations a nastavte umístění na Source\Ex1-UsingMVC4ScaffoldingEFMigrations v tomto cvičení. Nastavte název řešení na Začátek a ujistěte se, že je zaškrtnuté políčko Vytvořit adresář pro řešení. Klikněte na OK.

   

   Dialogové okno Nový ASP.NET projektu MVC 4

3. V dialogovém okně Nový ASP.NET projektu MVC 4 vyberte šablonu internetové aplikace a ujistěte se, že razor je vybraný modul zobrazení. Kliknutím na tlačítko OK vytvořte projekt.

   

   Nová internetová aplikace ASP.NET MVC 4

4. V Průzkumník řešení klikněte pravým tlačítkem myši na Modely a vyberte Přidat | Třída pro vytvoření jednoduché osoby třídy (POCO). Pojmenujte ji Osoba a klikněte na OK.

5. Otevřete třídu Person a vložte následující vlastnosti.

   (Fragment kódu – ASP.NET migrace MVC 4 a Entity Framework – Vlastnosti ex1 osoby)

   using System;
   using System.Collections.Generic;
   using System.Linq;
   using System.Web;
   
   namespace MVC4EF.Models
   {
       public class Person
       {
           public int PersonID { get; set; }
   
           public string FirstName { get; set; }
   
           public string LastName { get; set; }        
       }
   }
   

6. Klikněte na Sestavit | Sestavte řešení pro uložení změn a sestavení projektu.

   

   Sestavení aplikace

7. V Průzkumník řešení klikněte pravým tlačítkem myši na složku kontrolerů a vyberte Přidat | Kontroler.

8. Pojmenujte kontroler PersonController a vyplňte možnosti generování uživatelského rozhraní s následujícími hodnotami.

   1. V rozevíracím seznamu Šablony vyberte kontroler MVC s akcemi čtení a zápisu a zobrazeními pomocí možnosti Entity Framework .

   2. V rozevíracím seznamu Třída modelu vyberte třídu Person .

   3. V seznamu tříd Kontext dat vyberte <Nový kontext dat...>. Zvolte libovolný název a klikněte na OK.

   4. V rozevíracím seznamu Zobrazení se ujistěte, že je vybraná možnost Razor .

      

      Přidání kontroleru osob s generováním uživatelského rozhraní

9. Kliknutím na Přidat vytvoříte nový kontroler pro osobu s generováním uživatelského rozhraní. Nyní jste vygenerovali akce kontroleru i zobrazení.

   

   Po vytvoření kontroleru Person s generováním uživatelského rozhraní

10. Otevřete Třídu PersonController . Všimněte si, že se automaticky vygenerovaly úplné metody akcí CRUD.

Uvnitř kontroleru osoby

Úkol 2– Spuštění aplikace

V tomto okamžiku se databáze ještě nevytvořila. V této úloze spustíte aplikaci poprvé a otestujete operace CRUD. Databáze se vytvoří průběžně pomocí code First.

1. Stisknutím klávesy F5 spusťte aplikaci.

2. V prohlížeči přidejte na adresu URL /Person a otevřete stránku Osoba.

   

   Aplikace: první spuštění

3. Teď prozkoumáte stránky Osob a otestujete operace CRUD.

   1. Kliknutím na Vytvořit nový přidáte novou osobu. Zadejte křestní jméno a příjmení a klikněte na Vytvořit.

      

      Přidání nové osoby

   2. V seznamu osob můžete odstranit, upravit nebo přidat položky.

      

      Seznam osob

   3. Kliknutím na Tlačítko Podrobnosti otevřete podrobnosti o dané osobě.

      

      Podrobnosti o osobě

4. Zavřete prohlížeč a vraťte se do sady Visual Studio. Všimněte si, že jste vytvořili celou entitu CRUD pro entitu osoby v celé aplikaci – z modelu do zobrazení – aniž byste museli napsat jeden řádek kódu!

Úloha 3 – Aktualizace databáze pomocí migrací entity Framework

V této úloze aktualizujete databázi pomocí migrací Entity Framework. Zjistíte, jak snadné je změnit model a odrážet změny v databázích pomocí funkce Migrace entity Framework.

1. Otevřete konzolu Správce balíčků. Vyberte nástroje>NuGet Správce balíčků> Správce balíčků konzoly.

2. V konzole Správce balíčků zadejte následující příkaz:

   PMC

   Enable-Migrations -ContextTypeName [ContextClassName]
   

   

   Povolení migrací

   Příkaz Enable-Migration vytvoří složku Migrations , která obsahuje skript pro inicializaci databáze.

   

   Složka Migrace

3. Otevřete soubor Configuration.cs ve složce Migrace. Vyhledejte konstruktor třídy a změňte hodnotu AutomaticMigrationsEnabled na true.

   public Configuration()
   {
       AutomaticMigrationsEnabled = true;
   }
   

4. Otevřete třídu Person a přidejte atribut pro křestní jméno osoby. S tímto novým atributem měníte model.

   public class Person
   {
       public int PersonID { get; set; }
       public string FirstName { get; set; }
       public string LastName { get; set; }
       public string MiddleName { get; set; }
   }
   

5. Vybrat sestavení | Sestavení řešení v nabídce pro sestavení aplikace

   

   Sestavení aplikace

6. V konzole Správce balíčků zadejte následující příkaz:

   PMC

   Add-Migration AddMiddleName
   

   Tento příkaz vyhledá změny v datových objektech a pak přidá potřebné příkazy pro úpravu databáze odpovídajícím způsobem.

   

   Přidání prostředního názvu

7. (Volitelné) Spuštěním následujícího příkazu můžete vygenerovat skript SQL s rozdílovou aktualizací. To vám umožní aktualizovat databázi ručně (v tomto případě není nutné) nebo použít změny v jiných databázích:

   PMC

   Update-Database -Script -SourceMigration:
   
   $InitialDatabase
   

   

   Generování skriptu SQL

   

   Aktualizace skriptu SQL

8. V konzole Správce balíčků zadejte následující příkaz pro aktualizaci databáze:

   PMC

   Update-Database -Verbose
   

   

   Aktualizace databáze

   Tím přidáte sloupec MiddleName v tabulce Lidé tak, aby odpovídal aktuální definici třídy Person .

9. Po aktualizaci databáze klikněte pravým tlačítkem na složku Kontroler a vyberte Přidat | Kontroler , který znovu přidá kontroler osoby (dokončeno se stejnými hodnotami). Tím se stávající metody a zobrazení aktualizují přidáním nového atributu.

   

   Aktualizace kontroleru

10. Klikněte na tlačítko Přidat. Potom vyberte hodnoty Přepsat PersonController.cs a přepsat přidružená zobrazení a klepněte na tlačítko OK.

Aktualizace kontroleru

Úkol 4 – Spuštění aplikace

1. Stisknutím klávesy F5 spusťte aplikaci.

2. Otevřete /Person. Všimněte si, že data byla zachována, zatímco byl přidán sloupec s prostředním názvem.

   

   Přidané druhé jméno

3. Pokud kliknete na Upravit, budete moct k aktuální osobě přidat prostřední jméno.

   

---

Shrnutí

V tomto praktickém cvičení jste se naučili jednoduché kroky k vytvoření operací CRUD s ASP.NET generováním uživatelského rozhraní MVC 4 pomocí libovolné třídy modelu. Pak jste se naučili, jak provést kompletní aktualizaci v aplikaci – z databáze do zobrazení – pomocí migrací Entity Framework.

Příloha A: Instalace sady Visual Studio Express 2012 pro web

Microsoft Visual Studio Express 2012 pro web nebo jinou verzi Expressu můžete nainstalovat pomocí instalačního programu Webová platforma Microsoft. Následující pokyny vás provedou postupem potřebným k instalaci sady Visual Studio Express 2012 pro web pomocí instalačního programu Webová platforma Microsoft.

1. Přejděte na https://learn.microsoft.com/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169 . Pokud už máte nainstalovaný instalační program webové platformy, můžete ho také otevřít a vyhledat produkt Visual Studio Express 2012 pro web se sadou Windows Azure SDK.

2. Klikněte na Nainstalovat. Pokud nemáte instalační program webové platformy, budete přesměrováni na jeho první stažení a instalaci.

3. Po otevření instalačního programu webové platformy spusťte instalaci kliknutím na nainstalovat .

   

   Instalace sady Visual Studio Express

4. Přečtěte si všechny licence a podmínky produktů a pokračujte kliknutím na Přijmout .

   

   Přijetí licenčních podmínek

5. Počkejte, až se proces stahování a instalace dokončí.

   

   Průběh instalace

6. Po dokončení instalace klepněte na tlačítko Dokončit.

   

   Instalace byla dokončena.

7. Kliknutím na tlačítko Ukončit zavřete instalační program webové platformy.

8. Pokud chcete otevřít Visual Studio Express pro web, přejděte na úvodní obrazovku a začněte psát "VS Express" a potom klikněte na dlaždici VS Express pro web.

   

   Dlaždice VS Express pro web

Příloha B: Použití fragmentů kódu

S fragmenty kódu máte veškerý kód, který potřebujete na dosah ruky. Dokument testovacího prostředí vám přesně řekne, kdy je můžete použít, jak je znázorněno na následujícím obrázku.

Použití fragmentů kódu sady Visual Studio k vložení kódu do projektu

Přidání fragmentu kódu pomocí klávesnice (jenom C#)

1. Umístěte kurzor na místo, kam chcete vložit kód.
2. Začněte psát název fragmentu kódu (bez mezer nebo pomlček).
3. Sledujte, jak IntelliSense zobrazuje odpovídající názvy fragmentů kódu.
4. Vyberte správný fragment kódu (nebo pokračujte v psaní, dokud nebude vybrán název celého fragmentu kódu).
5. Dvojím stisknutím klávesy Tab vložte fragment kódu do umístění kurzoru.

Začněte psát název fragmentu kódu.

Stisknutím klávesy Tab vyberte zvýrazněný fragment kódu.

Znovu stiskněte klávesu Tab a fragment kódu se rozbalí.

Pokud chcete přidat fragment kódu pomocí myši (C#, Visual Basic a XML) 1. Klikněte pravým tlačítkem na místo, kam chcete vložit fragment kódu.

1. Vyberte Vložit fragment kódu následovaný mými fragmenty kódu.
2. Kliknutím na něj vyberte příslušný fragment kódu ze seznamu.

Klikněte pravým tlačítkem na místo, kam chcete vložit fragment kódu, a vyberte Vložit fragment kódu.

Výběr relevantního fragmentu ze seznamu kliknutím na něj