Iteracja 1 — Tworzenie aplikacji (C#)
autor: Microsoft
W pierwszej iteracji tworzymy Menedżera kontaktów w najprostszy możliwy sposób. Dodajemy obsługę podstawowych operacji bazy danych: tworzenie, odczyt, aktualizowanie i usuwanie (CRUD).
Tworzenie aplikacji MVC do zarządzania kontaktami ASP.NET (VB)
W tej serii samouczków utworzymy całą aplikację do zarządzania kontaktami od początku do końca. Aplikacja Contact Manager umożliwia przechowywanie informacji kontaktowych — nazw, numerów telefonów i adresów e-mail — dla listy osób.
Tworzymy aplikację za pośrednictwem wielu iteracji. Wraz z każdą iteracją stopniowo ulepszamy aplikację. Celem tego podejścia iteracji wielokrotnej jest umożliwienie zrozumienia przyczyny każdej zmiany.
Iteracja #1 — tworzenie aplikacji. W pierwszej iteracji tworzymy Menedżera kontaktów w najprostszy możliwy sposób. Dodajemy obsługę podstawowych operacji bazy danych: tworzenie, odczyt, aktualizowanie i usuwanie (CRUD).
Iteracja #2 — sprawia, że aplikacja wygląda ładnie. W tej iteracji poprawiamy wygląd aplikacji, modyfikując domyślną stronę wzorcową widoku MVC ASP.NET oraz kaskadowy arkusz stylów.
Iteracja 3 — dodawanie walidacji formularza. W trzeciej iteracji dodamy podstawową walidację formularza. Uniemożliwiamy użytkownikom przesyłanie formularza bez wypełniania wymaganych pól formularza. Weryfikujemy również adresy e-mail i numery telefonów.
Iteracja #4 — luźno sprzężenie aplikacji. W tej czwartej iteracji korzystamy z kilku wzorców projektowych oprogramowania, aby ułatwić konserwację i modyfikowanie aplikacji Contact Manager. Na przykład refaktoryzujemy naszą aplikację, aby używać wzorca repozytorium i wzorca wstrzykiwania zależności.
Iteracja 5 — tworzenie testów jednostkowych. W piątej iteracji ułatwiamy konserwację i modyfikowanie aplikacji przez dodawanie testów jednostkowych. Wyśmiewamy nasze klasy modelu danych i tworzymy testy jednostkowe dla naszych kontrolerów i logiki walidacji.
Iteracja 6 — używanie programowania opartego na testach. W tej szóstej iteracji do naszej aplikacji dodamy nowe funkcje, pisząc najpierw testy jednostkowe i pisząc kod względem testów jednostkowych. W tej iteracji dodajemy grupy kontaktów.
Iteracja #7 — dodawanie funkcji Ajax. W siódmej iteracji poprawiamy czas odpowiedzi i wydajność naszej aplikacji, dodając obsługę Ajax.
Ta iteracja
W tej pierwszej iteracji utworzymy podstawową aplikację. Celem jest zbudowanie menedżera kontaktów w najszybszy i najprostszy sposób. W kolejnych iteracjach ulepszamy projekt aplikacji.
Aplikacja Contact Manager jest podstawową aplikacją opartą na bazie danych. Za pomocą aplikacji można tworzyć nowe kontakty, edytować istniejące kontakty i usuwać kontakty.
W tej iteracji wykonamy następujące kroki:
- ASP.NET aplikacji MVC
- Tworzenie bazy danych do przechowywania naszych kontaktów
- Generowanie klasy modelu dla naszej bazy danych za pomocą programu Microsoft Entity Framework
- Utwórz akcję kontrolera i widok, który umożliwia nam wyświetlenie listy wszystkich kontaktów w bazie danych
- Tworzenie akcji kontrolera i widoku, który umożliwia utworzenie nowego kontaktu w bazie danych
- Tworzenie akcji kontrolera i widoku, który umożliwia edytowanie istniejącego kontaktu w bazie danych
- Tworzenie akcji kontrolera i widoku, który umożliwia nam usunięcie istniejącego kontaktu w bazie danych
Wymagania wstępne dotyczące oprogramowania
W ASP.NET aplikacjach MVC na komputerze musi być zainstalowany program Visual Studio 2008 lub Visual Web Developer 2008 (Visual Web Developer to bezpłatna wersja programu Visual Studio, która nie zawiera wszystkich zaawansowanych funkcji programu Visual Studio). Możesz pobrać wersję próbną programu Visual Studio 2008 lub Visual Web Developer z następującego adresu:
https://www.asp.net/downloads/essential/
Uwaga
W przypadku ASP.NET aplikacji MVC z programem Visual Web Developer musisz mieć zainstalowany program Visual Web Developer z dodatkiem Service Pack 1. Bez dodatku Service Pack 1 nie można tworzyć projektów aplikacji internetowych.
ASP.NET struktury MVC. Możesz pobrać platformę ASP.NET MVC z następującego adresu:
W tym samouczku do uzyskiwania dostępu do bazy danych używamy programu Microsoft Entity Framework. Program Entity Framework jest dołączony do .NET Framework 3.5 z dodatkiem Service Pack 1. Ten dodatek Service Pack można pobrać z następującej lokalizacji:
https://www.microsoft.com/download/details.aspx?id=22& desc=dotnet35
Alternatywą do wykonania każdego z tych plików do pobrania jest jeden po drugim, możesz skorzystać z Instalatora platformy internetowej (Web PI). Internetowy numer PI można pobrać z następującego adresu:
https://www.asp.net/downloads/essential/
ASP.NET projekt MVC
ASP.NET projekt aplikacji internetowej MVC. Uruchom program Visual Studio i wybierz opcję menu Plik, Nowy projekt. Zostanie wyświetlone okno dialogowe Nowy projekt (zobacz Rysunek 1). Wybierz typ projektu internetowego i szablon aplikacji internetowej ASP.NET MVC . Nadaj nowemu projektowi nazwę ContactManager i kliknij przycisk OK.
Upewnij się, że wybrano .NET Framework 3.5 z listy rozwijanej w prawym górnym rogu okna dialogowego Nowy projekt. W przeciwnym razie szablon aplikacji internetowej MVC ASP.NET nie będzie wyświetlany.
Rysunek 01. Okno dialogowe Nowy projekt (kliknij, aby wyświetlić obraz o pełnym rozmiarze)
ASP.NET aplikacji MVC zostanie wyświetlone okno dialogowe Tworzenie projektu testu jednostkowego . Za pomocą tego okna dialogowego możesz wskazać, że chcesz utworzyć i dodać projekt testu jednostkowego do rozwiązania podczas tworzenia aplikacji MVC ASP.NET. Chociaż nie będziemy kompilować testów jednostkowych w tej iteracji, należy wybrać opcję Tak, utworzyć projekt testu jednostkowego, ponieważ planujemy dodać testy jednostkowe w późniejszej iteracji. Dodawanie projektu testowego podczas pierwszego tworzenia nowego projektu ASP.NET MVC jest znacznie łatwiejsze niż dodawanie projektu testowego po utworzeniu projektu ASP.NET MVC.
Uwaga
Ponieważ program Visual Web Developer nie obsługuje projektów testowych, okno dialogowe Tworzenie projektu testów jednostkowych nie jest obsługiwane w przypadku korzystania z programu Visual Web Developer.
Rysunek 02. Okno dialogowe Tworzenie projektu testów jednostkowych (kliknij, aby wyświetlić obraz pełnowymiarowy)
ASP.NET aplikacja MVC jest wyświetlana w oknie Eksplorator rozwiązań programu Visual Studio (zobacz Rysunek 3). Jeśli nie widzisz okna Eksplorator rozwiązań, możesz otworzyć to okno, wybierając opcję menu Widok, Eksplorator rozwiązań. Zwróć uwagę, że rozwiązanie zawiera dwa projekty: projekt ASP.NET MVC i projekt Test. Projekt MVC ASP.NET nosi nazwę ContactManager, a projekt testowy nosi nazwę ContactManager.Tests.
Rysunek 03. Okno Eksplorator rozwiązań (kliknij, aby wyświetlić obraz pełnowymiarowy)
Usuwanie przykładowych plików projektu
Szablon projektu MVC ASP.NET zawiera przykładowe pliki dla kontrolerów i widoków. Przed utworzeniem nowej ASP.NET aplikacji MVC należy usunąć te pliki. Pliki i foldery można usunąć w oknie Eksplorator rozwiązań, klikając prawym przyciskiem myszy plik lub folder i wybierając opcję menu Usuń.
Należy usunąć następujące pliki z projektu ASP.NET MVC:
\Controllers\HomeController.cs
\Views\Home\About.aspx
\Views\Home\Index.aspx
Należy również usunąć następujący plik z projektu Test:
\Controllers\HomeControllerTest.cs
Tworzenie bazy danych
Aplikacja Contact Manager jest aplikacją internetową opartą na bazie danych. Używamy bazy danych do przechowywania informacji kontaktowych.
Struktura ASP.NET MVC z dowolną nowoczesną bazą danych, w tym bazami danych Microsoft SQL Server, Oracle, MySQL i IBM DB2. W tym samouczku używamy bazy danych microsoft SQL Server. Podczas instalowania programu Visual Studio jest dostępna opcja instalowania Microsoft SQL Server Express, która jest bezpłatną wersją bazy danych Microsoft SQL Server.
Utwórz nową bazę danych, klikając prawym przyciskiem myszy folder App_Data w oknie Eksplorator rozwiązań i wybierając opcję menu Dodaj, Nowy element. W oknie dialogowym Dodawanie nowego elementu wybierz kategorię Dane i szablon bazy danych SQL Server (zobacz Rysunek 4). Nadaj nowej bazie danych nazwę ContactManagerDB.mdf i kliknij przycisk OK.
Rysunek 04. Tworzenie nowej bazy danych Microsoft SQL Server Express (kliknij, aby wyświetlić obraz pełnowymiarowy)
Po utworzeniu nowej bazy danych baza danych zostanie wyświetlona w folderze App_Data w oknie Eksplorator rozwiązań. Kliknij dwukrotnie plik ContactManager.mdf, aby otworzyć okno Eksplorator serwera i połączyć się z bazą danych.
Uwaga
Okno Eksploratora serwera jest nazywane oknem Eksploratora baz danych w przypadku dewelopera microsoft Visual Web.
Za pomocą okna Eksploratora serwera można tworzyć nowe obiekty bazy danych, takie jak tabele bazy danych, widoki, wyzwalacze i procedury składowane. Kliknij prawym przyciskiem myszy folder Tables i wybierz opcję menu Dodaj nową tabelę. Zostanie wyświetlona Projektant tabela bazy danych (zobacz Rysunek 5).
Rysunek 05. Tabela bazy danych Projektant (kliknij, aby wyświetlić obraz pełnowymiarowy)
Musimy utworzyć tabelę zawierającą następujące kolumny:
| Nazwa kolumny | Typ danych | Zezwalaj na wartości null |
|---|---|---|
| Id | int | fałsz |
| FirstName (Imię) | nvarchar(50) | fałsz |
| LastName (Nazwisko) | nvarchar(50) | fałsz |
| Telefon | nvarchar(50) | fałsz |
| nvarchar(255) | fałsz |
Pierwsza kolumna, kolumna Id, jest specjalna. Musisz oznaczyć kolumnę Id jako kolumnę Tożsamość i kolumnę Klucz podstawowy. Wskazujesz, że kolumna jest kolumną Tożsamość, rozwijając pozycję Właściwości kolumny (spójrz na dół rysunku 6) i przewijając w dół do właściwości Specyfikacja tożsamości. Ustaw właściwość (Is Identity) na wartość Tak.
Kolumnę oznaczysz jako kolumnę Klucz podstawowy, wybierając kolumnę i klikając przycisk z ikoną klucza. Po oznaczeniu kolumny jako kolumny Klucz podstawowy obok kolumny pojawi się ikona klucza (zobacz Rysunek 6).
Po zakończeniu tworzenia tabeli kliknij przycisk Zapisz (przycisk z ikoną dyskietki), aby zapisać nową tabelę. Nadaj nowej tabeli nazwę Kontakty.
Po zakończeniu tworzenia tabeli bazy danych Kontakty należy dodać kilka rekordów do tabeli. Kliknij prawym przyciskiem myszy tabelę Kontakty w oknie Eksplorator serwera i wybierz opcję menu Pokaż dane tabeli. Wprowadź co najmniej jeden kontakt w wyświetlonej siatce.
Tworzenie modelu danych
Aplikacja ASP.NET MVC składa się z modeli, widoków i kontrolerów. Zaczynamy od utworzenia klasy Model reprezentującej tabelę Kontakty utworzoną w poprzedniej sekcji.
W tym samouczku używamy programu Microsoft Entity Framework do automatycznego generowania klasy modelu z bazy danych.
Uwaga
Struktura ASP.NET MVC nie jest w żaden sposób powiązana z programem Microsoft Entity Framework. Możesz użyć ASP.NET MVC z alternatywnymi technologiami dostępu do baz danych, takimi jak NHibernate, LINQ to SQL lub ADO.NET.
Wykonaj następujące kroki, aby utworzyć klasy modelu danych:
- Kliknij prawym przyciskiem myszy folder Models w oknie Eksplorator rozwiązań i wybierz pozycję Dodaj, Nowy element. Zostanie wyświetlone okno dialogowe Dodawanie nowego elementu (zobacz Rysunek 6).
- Wybierz kategorię Dane i szablon modelu danych jednostki ADO.NET. Nadaj modelowi danych nazwę ContactManagerModel.edmx i kliknij przycisk Dodaj . Zostanie wyświetlony kreator modelu danych jednostki (zobacz Rysunek 7).
- W kroku Wybieranie zawartości modelu wybierz pozycję Generuj z bazy danych (zobacz Rysunek 7).
- W kroku Wybieranie połączenia danych wybierz bazę danych ContactManagerDB.mdf i wprowadź nazwę ContactManagerDBEntities dla ustawień połączenia jednostki (zobacz Rysunek 8).
- W kroku Wybieranie obiektów bazy danych zaznacz pole wyboru z etykietą Tabele (zobacz Rysunek 9). Model danych będzie zawierać wszystkie tabele zawarte w bazie danych (istnieje tylko jedna tabela Kontakty). Wprowadź modele przestrzeni nazw. Kliknij przycisk Zakończ, aby ukończyć pracę kreatora.
Rysunek 06. Okno dialogowe Dodawanie nowego elementu (kliknij, aby wyświetlić obraz pełnowymiarowy)
Rysunek 07. Wybieranie zawartości modelu (kliknij, aby wyświetlić obraz pełnowymiarowy)
Rysunek 08. Wybierz połączenie danych (kliknij, aby wyświetlić obraz pełnowymiarowy)
Rysunek 09. Wybierz obiekty bazy danych (kliknij, aby wyświetlić obraz pełnowymiarowy)
Po zakończeniu pracy Kreatora modelu danych jednostki zostanie wyświetlony Projektant modelu danych jednostki. Projektant wyświetla klasę odpowiadającą każdej tabeli modelowanej. Powinna zostać wyświetlona jedna klasa o nazwie Kontakty.
Kreator modelu danych jednostki generuje nazwy klas na podstawie nazw tabel bazy danych. Prawie zawsze trzeba zmienić nazwę klasy wygenerowanej przez kreatora. Kliknij prawym przyciskiem myszy klasę Kontakty w projektancie i wybierz opcję menu Zmień nazwę. Zmień nazwę klasy z Kontakty (liczba mnoga) na Kontakt (pojedyncza). Po zmianie nazwy klasy klasa powinna wyglądać jak Rysunek 10.
Rysunek 10. Klasa Kontakt (kliknij, aby wyświetlić obraz pełnowymiarowy)
W tym momencie utworzyliśmy nasz model bazy danych. Możemy użyć klasy Contact do reprezentowania określonego rekordu kontaktu w naszej bazie danych.
Tworzenie kontrolera głównego
Następnym krokiem jest utworzenie kontrolera home. Kontroler główny jest domyślnym kontrolerem wywoływanym w aplikacji MVC ASP.NET.
Utwórz klasę Kontrolera domu, klikając prawym przyciskiem myszy folder Controllers w oknie Eksplorator rozwiązań i wybierając opcję menu Dodaj, Kontroler (zobacz Rysunek 11). Zwróć uwagę na pole wyboru z etykietą Dodaj metody akcji dla scenariuszy Create, Update i Details. Przed kliknięciem przycisku Dodaj upewnij się, że to pole wyboru jest zaznaczone.
Rysunek 11. Dodawanie kontrolera głównego (kliknij, aby wyświetlić obraz o pełnym rozmiarze)
Podczas tworzenia kontrolera home uzyskasz klasę w pozycji Lista 1.
Lista 1 — Kontrolery\HomeController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Ajax;
namespace ContactManager.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
return View();
}
//
// GET: /Home/Details/5
public ActionResult Details(int id)
{
return View();
}
//
// GET: /Home/Create
public ActionResult Create()
{
return View();
}
//
// POST: /Home/Create
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Create(FormCollection collection)
{
try
{
// TODO: Add insert logic here
return RedirectToAction("Index");
}
catch
{
return View();
}
}
//
// GET: /Home/Edit/5
public ActionResult Edit(int id)
{
return View();
}
//
// POST: /Home/Edit/5
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Edit(int id, FormCollection collection)
{
try
{
// TODO: Add update logic here
return RedirectToAction("Index");
}
catch
{
return View();
}
}
}
}
Wyświetlanie listy kontaktów
Aby wyświetlić rekordy w tabeli bazy danych Kontakty, musimy utworzyć akcję Index() i widok indeksu.
Kontroler główny zawiera już akcję Index(). Musimy zmodyfikować tę metodę tak, aby wyglądała jak Lista 2.
Lista 2 — Kontrolery\HomeController.cs
public class HomeController : Controller
{
private ContactManagerDBEntities _entities = new ContactManagerDBEntities();
//
// GET: /Home/
public ActionResult Index()
{
return View(_entities.ContactSet.ToList());
}
…
Zwróć uwagę, że klasa kontrolera Home na liście 2 zawiera pole prywatne o nazwie _entities. Pole _entities reprezentuje jednostki z modelu danych. Do komunikowania się z bazą danych używamy pola _entities.
Metoda Index() zwraca widok reprezentujący wszystkie kontakty z tabeli bazy danych Kontakty. Wyrażenie _entities. Funkcja ContactSet.ToList() zwraca listę kontaktów jako listę ogólną.
Teraz, po utworzeniu kontrolera indeksu, musimy utworzyć widok Indeks. Przed utworzeniem widoku Indeks skompiluj aplikację, wybierając opcję menu Kompiluj, Kompiluj rozwiązanie. Przed dodaniem widoku należy zawsze skompilować projekt, aby można było wyświetlić listę klas modelu w oknie dialogowym Dodawanie widoku .
Widok Indeks można utworzyć, klikając prawym przyciskiem myszy metodę Index() i wybierając opcję menu Dodaj widok (zobacz Rysunek 12). Wybranie tej opcji menu powoduje otwarcie okna dialogowego Dodawanie widoku (zobacz Rysunek 13).
Rysunek 12. Dodawanie widoku indeksu (kliknij, aby wyświetlić obraz pełnowymiarowy)
W oknie dialogowym Dodawanie widoku zaznacz pole wyboru z etykietą Utwórz silnie typizowanego widoku. Wybierz klasę Wyświetl dane ContactManager.Models.Contact i Wyświetl listę zawartości. Wybranie tych opcji powoduje wygenerowanie widoku, który wyświetla listę rekordów kontaktów.
Rysunek 13. Okno dialogowe Dodawanie widoku (kliknij, aby wyświetlić obraz pełnowymiarowy)
Po kliknięciu przycisku Dodaj zostanie wygenerowany widok Indeks w obszarze Lista 3. Zwróć uwagę na dyrektywę <%@ Page %> wyświetlaną w górnej części pliku. Widok Indeks dziedziczy z klasy ViewPage<IEnumerable<ContactManager.Models.Contact>> . Innymi słowy, klasa Model w widoku reprezentuje listę jednostek Contact.
Treść widoku Indeks zawiera pętlę foreach, która iteruje po każdym kontaktach reprezentowanych przez klasę Model. Wartość każdej właściwości klasy Contact jest wyświetlana w tabeli HTML.
Lista 3 — Views\Home\Index.aspx (niezmodyfikowane)
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<ContactManager.Models.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>
<table>
<tr>
<th></th>
<th>
Id
</th>
<th>
FirstName
</th>
<th>
LastName
</th>
<th>
Phone
</th>
<th>
Email
</th>
</tr>
<% foreach (var item in Model) { %>
<tr>
<td>
<%= Html.ActionLink("Edit", "Edit", new { id=item.Id }) %> |
<%= Html.ActionLink("Details", "Details", new { 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>
<% } %>
</table>
<p>
<%= Html.ActionLink("Create New", "Create") %>
</p>
</asp:Content>
Musimy wprowadzić jedną modyfikację widoku Indeks. Ponieważ nie tworzymy widoku Szczegóły, możemy usunąć link Szczegóły. Znajdź i usuń następujący kod z widoku Indeks:
{ id=item. Id })%>
Po zmodyfikowaniu widoku Indeks można uruchomić aplikację Contact Manager. Wybierz opcję menu Debuguj, Rozpocznij debugowanie lub po prostu naciśnij klawisz F5. Przy pierwszym uruchomieniu aplikacji zostanie wyświetlone okno dialogowe na rysunku 14. Wybierz opcję Modyfikuj plik Web.config, aby włączyć debugowanie , a następnie kliknij przycisk OK.
Rysunek 14. Włączanie debugowania (kliknij, aby wyświetlić obraz w pełnym rozmiarze)
Widok Indeks jest domyślnie zwracany. Ten widok zawiera listę wszystkich danych z tabeli bazy danych Kontakty (zobacz Rysunek 15).
Rysunek 15. Widok indeksu (kliknij, aby wyświetlić obraz pełnowymiarowy)
Zwróć uwagę, że widok Indeks zawiera link z etykietą Utwórz nowy w dolnej części widoku. W następnej sekcji dowiesz się, jak tworzyć nowe kontakty.
Tworzenie nowych kontaktów
Aby umożliwić użytkownikom tworzenie nowych kontaktów, musimy dodać dwie akcje Create() do kontrolera głównego. Musimy utworzyć jedną akcję Create(), która zwraca formularz HTML do tworzenia nowego kontaktu. Musimy utworzyć drugą akcję Create(), która wykonuje rzeczywiste wstawianie bazy danych nowego kontaktu.
Nowe metody Create(), które należy dodać do kontrolera home, są zawarte w liście 4.
Lista 4 — Kontrolery\HomeController.cs (z metodami tworzenia)
//
// GET: /Home/Create
public ActionResult Create()
{
return View();
}
//
// POST: /Home/Create
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Create([Bind(Exclude = "Id")] Contact contactToCreate)
{
if (!ModelState.IsValid)
return View();
try
{
_entities.AddToContactSet(contactToCreate);
_entities.SaveChanges();
return RedirectToAction("Index");
}
catch
{
return View();
}
}
Pierwszą metodę Create() można wywołać za pomocą metody HTTP GET, podczas gdy druga metoda Create() może być wywoływana tylko przez metodę HTTP POST. Innymi słowy, drugą metodę Create() można wywołać tylko podczas publikowania formularza HTML. Pierwsza metoda Create() po prostu zwraca widok zawierający formularz HTML do utworzenia nowego kontaktu. Druga metoda Create() jest znacznie bardziej interesująca: dodaje nowy kontakt do bazy danych.
Zwróć uwagę, że druga metoda Create() została zmodyfikowana w celu zaakceptowania wystąpienia klasy Contact. Wartości formularza opublikowane w formularzu HTML są automatycznie powiązane z tą klasą Contact przez platformę ASP.NET MVC. Każde pole formularza z formularza TWORZENIA HTML jest przypisywane do właściwości parametru Kontakt.
Zwróć uwagę, że parametr Contact jest ozdobiony atrybutem [Bind]. Atrybut [Bind] służy do wykluczania właściwości Identyfikator kontaktu z powiązania. Ponieważ właściwość Id reprezentuje właściwość Identity, nie chcemy ustawiać właściwości Id.
W treści metody Create() platforma Entity Framework służy do wstawiania nowego kontaktu do bazy danych. Nowy kontakt jest dodawany do istniejącego zestawu kontaktów, a metoda SaveChanges() jest wywoływana w celu wypchnięcia tych zmian z powrotem do bazowej bazy danych.
Formularz HTML do tworzenia nowych kontaktów można wygenerować, klikając prawym przyciskiem myszy jedną z dwóch metod Create() i wybierając opcję menu Dodaj widok (zobacz Rysunek 16).
Rysunek 16. Dodawanie widoku Tworzenie (kliknij, aby wyświetlić obraz pełnowymiarowy)
W oknie dialogowym Dodawanie widoku wybierz klasę ContactManager.Models.Contact i opcję Utwórz dla zawartości widoku (zobacz Rysunek 17). Po kliknięciu przycisku Dodaj zostanie automatycznie wygenerowany widok Utwórz.
Rysunek 17. Wyświetlanie eksplodowania strony (kliknij, aby wyświetlić obraz pełnowymiarowy)
Widok Tworzenie zawiera pola formularza dla każdej właściwości klasy Contact. Kod widoku Tworzenie znajduje się na liście 5.
Lista 5 — Views\Home\Create.aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<ContactManager.Models.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>
<% } %>
<div>
<%=Html.ActionLink("Back to List", "Index") %>
</div>
</asp:Content>
Po zmodyfikowaniu metod Create() i dodaniu widoku Utwórz można uruchomić aplikację Contact Manger i utworzyć nowe kontakty. Kliknij link Utwórz nowy , który zostanie wyświetlony w widoku Indeks, aby przejść do widoku Utwórz. Widok powinien zostać wyświetlony na rysunku 18.
Rysunek 18. Widok tworzenia (kliknij, aby wyświetlić obraz pełnowymiarowy)
Edytowanie kontaktów
Dodanie funkcji edytowania rekordu kontaktu jest bardzo podobne do dodawania funkcji tworzenia nowych rekordów kontaktów. Najpierw musimy dodać dwie nowe metody Edit do klasy kontrolera Home. Te nowe metody Edit() znajdują się na liście 6.
Lista 6 — Kontrolery\HomeController.cs (z metodami edycji)
//
// GET: /Home/Edit/5
public ActionResult Edit(int id)
{
var contactToEdit = (from c in _entities.ContactSet
where c.Id == id
select c).FirstOrDefault();
return View(contactToEdit);
}
//
// POST: /Home/Edit/5
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Edit(Contact contactToEdit)
{
if (!ModelState.IsValid)
return View();
try
{
var 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();
}
}
}
Pierwsza metoda Edit() jest wywoływana przez operację HTTP GET. Parametr Id jest przekazywany do tej metody, która reprezentuje identyfikator edytowanego rekordu kontaktu. Program Entity Framework służy do pobierania kontaktu zgodnego z identyfikatorem. Zwracany jest widok zawierający formularz HTML do edycji rekordu.
Druga metoda Edit() wykonuje rzeczywistą aktualizację bazy danych. Ta metoda akceptuje wystąpienie klasy Contact jako parametr. Struktura MVC ASP.NET automatycznie wiąże pola formularza z formularza Edycja z tą klasą. Zwróć uwagę, że atrybut [Bind] nie jest uwzględniany podczas edytowania kontaktu (potrzebujemy wartości właściwości Id).
Program Entity Framework służy do zapisywania zmodyfikowanego kontaktu w bazie danych. Oryginalny kontakt należy najpierw pobrać z bazy danych. Następnie metoda ApplyPropertyChanges() programu Entity Framework jest wywoływana w celu zarejestrowania zmian w kontakcie. Na koniec wywoływana jest metoda SaveChanges() programu Entity Framework, aby utrwała zmiany w bazowej bazie danych.
Możesz wygenerować widok zawierający formularz Edycja, klikając prawym przyciskiem myszy metodę Edit() i wybierając opcję menu Dodaj widok. W oknie dialogowym Dodawanie widoku wybierz klasę ContactManager.Models.Contact i zawartość Widoku edycji (zobacz Rysunek 19).
Rysunek 19. Dodawanie widoku edycji (kliknij, aby wyświetlić obraz pełnowymiarowy)
Po kliknięciu przycisku Dodaj zostanie automatycznie wygenerowany nowy widok Edycji. Wygenerowany formularz HTML zawiera pola odpowiadające poszczególnym właściwościom klasy Contact (zobacz Lista 7).
Lista 7 — Views\Home\Edit.aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<ContactManager.Models.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>
<% } %>
<div>
<%=Html.ActionLink("Back to List", "Index") %>
</div>
</asp:Content>
Usuwanie kontaktów
Jeśli chcesz usunąć kontakty, musisz dodać dwie akcje Delete() do klasy kontrolera Home. Pierwsza akcja Usuń() wyświetla formularz potwierdzenia usunięcia. Druga akcja Delete() wykonuje rzeczywiste usunięcie.
Uwaga
Później w iteracji 7 zmodyfikujemy Menedżera kontaktów tak, aby obsługiwał usuwanie Ajax w jednym kroku.
Dwie nowe metody Delete() znajdują się na liście 8.
Lista 8 — Controllers\HomeController.cs (metody usuwania)
//
// GET: /Home/Delete/5
public ActionResult Delete(int id)
{
var contactToDelete = (from c in _entities.ContactSet
where c.Id == id
select c).FirstOrDefault();
return View(contactToDelete);
}
//
// POST: /Home/Delete/5
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Delete(Contact contactToDelete)
{
try
{
var 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();
}
}
Pierwsza metoda Delete() zwraca formularz potwierdzenia usuwania rekordu kontaktu z bazy danych (zobacz Rysunek20). Druga metoda Delete() wykonuje rzeczywistą operację usuwania względem bazy danych. Po pobraniu oryginalnego kontaktu z bazy danych metody Entity Framework DeleteObject() i SaveChanges() są wywoływane w celu usunięcia bazy danych.
Rysunek 20. Widok potwierdzenia usuwania (kliknij, aby wyświetlić obraz w pełnym rozmiarze)
Musimy zmodyfikować widok Indeks, aby zawierał link do usuwania rekordów kontaktów (zobacz Rysunek 21). Musisz dodać następujący kod do tej samej komórki tabeli, która zawiera link Edytuj:
Html.ActionLink( { id=item. Id }) %>
Rysunek 21. Widok indeksu z linkiem Edycja (kliknij, aby wyświetlić obraz pełnowymiarowy)
Następnie musimy utworzyć widok potwierdzenia usuwania. Kliknij prawym przyciskiem myszy metodę Delete() w klasie Kontrolera home i wybierz opcję menu Dodaj widok. Zostanie wyświetlone okno dialogowe Dodawanie widoku (zobacz Rysunek 22).
W przeciwieństwie do widoków Lista, Tworzenie i Edytowanie okno dialogowe Dodawanie widoku nie zawiera opcji tworzenia widoku Usuń. Zamiast tego wybierz klasę danych ContactManager.Models.Contact i Pustą zawartość widoku. Wybranie opcji Pusta zawartość widoku będzie wymagało od nas utworzenia widoku.
Rysunek 22. Dodawanie widoku potwierdzenia usuwania (kliknij, aby wyświetlić obraz pełnowymiarowy)
Zawartość widoku Usuń znajduje się na liście 9. Ten widok zawiera formularz, który potwierdza, czy dany kontakt powinien zostać usunięty (zobacz Rysunek 21).
Lista 9 — Views\Home\Delete.aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<ContactManager.Models.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 { Id = Model.Id }))
{ %>
<p>
<input type="submit" value="Delete" />
</p>
<% } %>
<div>
<%=Html.ActionLink("Back to List", "Index") %>
</div>
</asp:Content>
Zmienianie nazwy kontrolera domyślnego
Może to przeszkadzać, że nazwa klasy kontrolera do pracy z kontaktami nosi nazwę HomeController klasy. Czy kontroler nie powinien mieć nazwy ContactController?
Ten problem jest wystarczająco łatwy do rozwiązania. Najpierw musimy refaktoryzować nazwę kontrolera home. Otwórz klasę HomeController w Visual Studio Code Redaktor, kliknij prawym przyciskiem myszy nazwę klasy i wybierz opcję refaktoryzacji menu, Zmień nazwę. Wybranie tej opcji menu powoduje otwarcie okna dialogowego Zmienianie nazwy.
Rysunek 23. Refaktoryzacja nazwy kontrolera (kliknij, aby wyświetlić obraz o pełnym rozmiarze)
Rysunek 24. Używanie okna dialogowego Zmienianie nazwy (kliknij, aby wyświetlić obraz o pełnym rozmiarze)
Jeśli zmienisz nazwę klasy kontrolera, program Visual Studio zaktualizuje również nazwę folderu w folderze Views. Program Visual Studio zmieni nazwę folderu \Views\Home na folder \Views\Contact.
Po wprowadzeniu tej zmiany aplikacja nie będzie już mieć kontrolera home. Po uruchomieniu aplikacji zostanie wyświetlona strona błędu na rysunku 25.
Rysunek 25. Brak domyślnego kontrolera (kliknij, aby wyświetlić obraz pełnowymiarowy)
Musimy zaktualizować trasę domyślną w pliku Global.asax, aby używać kontrolera kontaktów zamiast kontrolera home. Otwórz plik Global.asax i zmodyfikuj domyślny kontroler używany przez trasę domyślną (zobacz Wyświetlanie listy 10).
Lista 10 — Global.asax.cs
using System.Web.Mvc;
using System.Web.Routing;
namespace ContactManager
{
public class MvcApplication : System.Web.HttpApplication
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
"Default", // Route name
"{controller}/{action}/{id}", // URL with parameters
new { controller = "Contact", action = "Index", id = "" } // Parameter defaults
);
}
protected void Application_Start()
{
RegisterRoutes(RouteTable.Routes);
}
}
}
Po wprowadzeniu tych zmian menedżer kontaktów zostanie uruchomiony poprawnie. Teraz będzie używać klasy kontrolera Kontakt jako kontrolera domyślnego.
Podsumowanie
W pierwszej iteracji utworzyliśmy podstawową aplikację Contact Manager w najszybszy możliwy sposób. Skorzystaliśmy z programu Visual Studio, aby automatycznie wygenerować kod początkowy dla naszych kontrolerów i widoków. Skorzystaliśmy również z programu Entity Framework, aby automatycznie wygenerować nasze klasy modelu bazy danych.
Obecnie możemy wyświetlać listę, tworzyć, edytować i usuwać rekordy kontaktów za pomocą aplikacji Contact Manager. Innymi słowy, możemy wykonać wszystkie podstawowe operacje bazy danych wymagane przez aplikację internetową opartą na bazie danych.
Niestety, nasza aplikacja ma pewne problemy. Po pierwsze i waham się przyznać, że aplikacja Contact Manager nie jest najbardziej atrakcyjną aplikacją. Wymaga to pewnych prac projektowych. W następnej iteracji przyjrzymy się, jak możemy zmienić domyślną stronę wzorcową widoku i kaskadowy arkusz stylów, aby poprawić wygląd aplikacji.
Po drugie, nie zaimplementowaliśmy żadnej weryfikacji formularza. Na przykład nie ma nic, aby uniemożliwić przesłanie formularza Tworzenie kontaktu bez wprowadzania wartości dla dowolnego pola formularza. Ponadto możesz wprowadzić nieprawidłowe numery telefonów i adresy e-mail. Zaczynamy rozwiązywać problem weryfikacji formularza w iteracji nr 3.
Wreszcie i co najważniejsze, nie można łatwo zmodyfikować ani utrzymać bieżącej iteracji aplikacji Contact Manager. Na przykład logika dostępu do bazy danych jest pieczona bezpośrednio w akcjach kontrolera. Oznacza to, że nie możemy modyfikować kodu dostępu do danych bez modyfikowania kontrolerów. W kolejnych iteracjach poznamy wzorce projektowe oprogramowania, które możemy zaimplementować, aby menedżer kontaktów był bardziej odporny na zmiany.
Opinia
Dostępne już wkrótce: W 2024 r. będziemy stopniowo wycofywać zgłoszenia z serwisu GitHub jako mechanizm przesyłania opinii na temat zawartości i zastępować go nowym systemem opinii. Aby uzyskać więcej informacji, sprawdź: https://aka.ms/ContentUserFeedback.
Prześlij i wyświetl opinię dla