Iteration 1 – Erstellen der Anwendung (C#)

2023-07-13

In der ersten Iteration erstellen wir den Contact Manager auf einfachste Weise. Wir fügen Unterstützung für grundlegende Datenbankvorgänge hinzu: Erstellen, Lesen, Aktualisieren und Löschen (CRUD).

Erstellen einer Kontaktverwaltung ASP.NET MVC-Anwendung (VB)

In dieser Reihe von Tutorials erstellen wir eine gesamte Kontaktverwaltungsanwendung von Anfang bis Ende. Mit der Contact Manager-Anwendung können Sie Kontaktinformationen – Namen, Telefonnummern und E-Mail-Adressen – für eine Liste von Personen speichern.

Wir erstellen die Anwendung über mehrere Iterationen. Mit jeder Iteration verbessern wir die Anwendung schrittweise. Das Ziel dieses Ansatzes für mehrere Iterationen besteht darin, ihnen zu ermöglichen, den Grund für jede Änderung zu verstehen.

Iteration #1: Erstellen Sie die Anwendung. In der ersten Iteration erstellen wir den Contact Manager auf einfachste Weise. Wir fügen Unterstützung für grundlegende Datenbankvorgänge hinzu: Erstellen, Lesen, Aktualisieren und Löschen (CRUD).
Iteration #2: Lassen Sie die Anwendung schön aussehen. In dieser Iteration verbessern wir das Erscheinungsbild der Anwendung, indem wir die Standardansicht ASP.NET MVC master Seite und cascading Stylesheet ändern.
Iteration #3: Hinzufügen der Formularüberprüfung. In der dritten Iteration fügen wir die grundlegende Formularüberprüfung hinzu. Wir verhindern, dass Personen ein Formular einreichen, ohne die erforderlichen Formularfelder ausfüllen zu müssen. Außerdem überprüfen wir E-Mail-Adressen und Telefonnummern.
Iteration #4: Machen Sie die Anwendung lose gekoppelt. In dieser vierten Iteration nutzen wir mehrere Softwareentwurfsmuster, um die Verwaltung und Änderung der Contact Manager-Anwendung zu vereinfachen. Beispielsweise umgestalten wir unsere Anwendung so, dass sie das Repositorymuster und das Abhängigkeitsinjektionsmuster verwendet.
Iteration #5: Erstellen von Komponententests. In der fünften Iteration erleichtern wir die Wartung und Änderung unserer Anwendung durch Hinzufügen von Komponententests. Wir simulieren unsere Datenmodellklassen und erstellen Komponententests für unsere Controller und die Validierungslogik.
Iteration #6: Verwenden Sie die testgesteuerte Entwicklung. In dieser sechsten Iteration fügen wir unserer Anwendung neue Funktionen hinzu, indem wir zuerst Komponententests schreiben und Code für die Komponententests schreiben. In dieser Iteration fügen wir Kontaktgruppen hinzu.
Iteration #7: Hinzufügen von Ajax-Funktionen. In der siebten Iteration verbessern wir die Reaktionsfähigkeit und Leistung unserer Anwendung, indem wir Unterstützung für Ajax hinzufügen.

Diese Iteration

In dieser ersten Iteration erstellen wir die Basisanwendung. Ziel ist es, den Kontakt-Manager so schnell wie möglich zu erstellen. In späteren Iterationen verbessern wir den Entwurf der Anwendung.

Die Contact Manager-Anwendung ist eine einfache datenbankgesteuerte Anwendung. Sie können die Anwendung verwenden, um neue Kontakte zu erstellen, vorhandene Kontakte zu bearbeiten und Kontakte zu löschen.

In dieser Iteration führen wir die folgenden Schritte aus:

ASP.NET MVC-Anwendung
Erstellen einer Datenbank zum Speichern unserer Kontakte
Generieren einer Modellklasse für unsere Datenbank mit dem Microsoft Entity Framework
Erstellen einer Controlleraktion und -ansicht, die es uns ermöglicht, alle Kontakte in der Datenbank aufzulisten
Erstellen von Controlleraktionen und einer Ansicht, die es uns ermöglicht, einen neuen Kontakt in der Datenbank zu erstellen
Erstellen von Controlleraktionen und einer Ansicht, die es uns ermöglicht, einen vorhandenen Kontakt in der Datenbank zu bearbeiten
Erstellen von Controlleraktionen und einer Ansicht, die es uns ermöglicht, einen vorhandenen Kontakt in der Datenbank zu löschen

Erforderliche Software

In ASP.NET MVC-Anwendungen müssen Sie entweder Visual Studio 2008 oder Visual Web Developer 2008 auf Ihrem Computer installiert haben (Visual Web Developer ist eine kostenlose Version von Visual Studio, die nicht alle erweiterten Features von Visual Studio enthält). Sie können entweder die Testversion von Visual Studio 2008 oder Visual Web Developer unter der folgenden Adresse herunterladen:

https://www.asp.net/downloads/essential/

Hinweis

Für ASP.NET MVC-Anwendungen mit Visual Web Developer muss Visual Web Developer Service Pack 1 installiert sein. Ohne Service Pack 1 können Sie keine Webanwendungsprojekte erstellen.

ASP.NET MVC-Framework. Sie können das ASP.NET MVC-Framework unter der folgenden Adresse herunterladen:

https://www.asp.net/mvc

In diesem Tutorial verwenden wir das Microsoft Entity Framework, um auf eine Datenbank zuzugreifen. Das Entity Framework ist in .NET Framework 3.5 Service Pack 1 enthalten. Sie können dieses Service Pack von folgendem Speicherort herunterladen:

https://www.microsoft.com/download/details.aspx?id=22& desc=dotnet35

Alternativ zu jedem dieser Downloads können Sie den Web platform Installer (Web PI) nutzen. Sie können den Web-PI von der folgenden Adresse herunterladen:

https://www.asp.net/downloads/essential/

ASP.NET MVC-Projekt

ASP.NET MVC-Webanwendungsprojekt. Starten Sie Visual Studio, und wählen Sie die Menüoption Datei, Neues Projekt aus. Das Dialogfeld Neues Projekt wird angezeigt (siehe Abbildung 1). Wählen Sie den Webprojekttyp und die vorlage ASP.NET MVC-Webanwendung aus . Nennen Sie Ihr neues Projekt ContactManager, und klicken Sie auf die Schaltfläche OK.

Stellen Sie sicher, dass Sie .NET Framework 3.5 in der Dropdownliste oben rechts im Dialogfeld Neues Projekt ausgewählt haben. Andernfalls wird die Vorlage ASP.NET MVC-Webanwendung nicht angezeigt.

Abbildung 01: Dialogfeld Neues Projekt(Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

ASP.NET MVC-Anwendung wird das Dialogfeld Komponententestprojekt erstellen angezeigt. Sie können dieses Dialogfeld verwenden, um anzugeben, dass Sie ein Komponententestprojekt erstellen und Ihrer Projektmappe hinzufügen möchten, wenn Sie Ihre ASP.NET MVC-Anwendung erstellen. Obwohl wir in dieser Iteration keine Komponententests erstellen, sollten Sie die Option Ja, Erstellen eines Komponententestprojekts auswählen, da wir planen, Komponententests in einer späteren Iteration hinzuzufügen. Das Hinzufügen eines Testprojekts beim erstellen eines neuen ASP.NET MVC-Projekts ist viel einfacher als das Hinzufügen eines Testprojekts, nachdem das ASP.NET MVC-Projekt erstellt wurde.

Hinweis

Da Visual Web Developer keine Testprojekte unterstützt, wird das Dialogfeld Komponententestprojekt erstellen bei Verwendung von Visual Web Developer nicht angezeigt.

Abbildung 02: Dialogfeld Komponententestprojekt erstellen (Klicken Sie hier, um das vollständige Bild anzuzeigen)

ASP.NET MVC-Anwendung wird im Fenster Visual Studio Projektmappen-Explorer angezeigt (siehe Abbildung 3). Wenn das fenster Projektmappen-Explorer nicht angezeigt wird, können Sie dieses Fenster öffnen, indem Sie die Menüoption Ansicht, Projektmappen-Explorer auswählen. Beachten Sie, dass die Projektmappe zwei Projekte enthält: das ASP.NET MVC-Projekt und das Testprojekt. Das ASP.NET MVC-Projekt hat den Namen ContactManager und das Testprojekt den Namen ContactManager.Tests.

Abbildung 03: Fenster Projektmappen-Explorer (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Löschen der Projektbeispieldateien

Die ASP.NET MVC-Projektvorlage enthält Beispieldateien für Controller und Ansichten. Bevor Sie eine neue ASP.NET MVC-Anwendung erstellen, sollten Sie diese Dateien löschen. Sie können Dateien und Ordner im Projektmappen-Explorer Fenster löschen, indem Sie mit der rechten Maustaste auf eine Datei oder einen Ordner klicken und die Menüoption Löschen auswählen.

Sie müssen die folgenden Dateien aus dem ASP.NET MVC-Projekt löschen:

\Controller\HomeController.cs
\Views\Home\About.aspx
\Views\Home\Index.aspx

Außerdem müssen Sie die folgende Datei aus dem Testprojekt löschen:

\Controller\HomeControllerTest.cs

Erstellen der Datenbank

Die Contact Manager-Anwendung ist eine datenbankgesteuerte Webanwendung. Wir verwenden eine Datenbank, um die Kontaktinformationen zu speichern.

Die ASP.NET MVC-Frameworks mit jeder modernen Datenbank, einschließlich Microsoft SQL Server, Oracle, MySQL und IBM DB2-Datenbanken. In diesem Tutorial verwenden wir eine Microsoft SQL Server-Datenbank. Wenn Sie Visual Studio installieren, erhalten Sie die Möglichkeit, Microsoft SQL Server Express zu installieren, bei der es sich um eine kostenlose Version der Microsoft SQL Server-Datenbank handelt.

Erstellen Sie eine neue Datenbank, indem Sie im Fenster Projektmappen-Explorer mit der rechten Maustaste auf den Ordner App_Data klicken und die Menüoption Hinzufügen, Neues Element auswählen. Wählen Sie im Dialogfeld Neues Element hinzufügen die Kategorie Daten und die Vorlage SQL Server Datenbank aus (siehe Abbildung 4). Benennen Sie die neue Datenbank ContactManagerDB.mdf, und klicken Sie auf die Schaltfläche OK.

Abbildung 04: Erstellen einer neuen Microsoft SQL Server Express-Datenbank (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Nachdem Sie die neue Datenbank erstellt haben, wird die Datenbank im Ordner App_Data im Fenster Projektmappen-Explorer angezeigt. Doppelklicken Sie auf die datei ContactManager.mdf, um das Fenster Server Explorer zu öffnen und eine Verbindung mit der Datenbank herzustellen.

Hinweis

Das Fenster Server Explorer wird im Fall von Microsoft Visual Web Developer als Fenster "Datenbank Explorer" bezeichnet.

Sie können das Fenster Server Explorer verwenden, um neue Datenbankobjekte wie Datenbanktabellen, Sichten, Trigger und gespeicherte Prozeduren zu erstellen. Klicken Sie mit der rechten Maustaste auf den Ordner Tabellen, und wählen Sie die Menüoption Neue Tabelle hinzufügen aus. Die Designer Datenbanktabelle wird angezeigt (siehe Abbildung 5).

Abbildung 05: Datenbanktabelle Designer (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Wir müssen eine Tabelle erstellen, die die folgenden Spalten enthält:

Spaltenname	Datentyp	NULL-Werte zulassen
Id	INT	false
FirstName	nvarchar(50)	false
LastName	nvarchar(50)	false
Phone	nvarchar(50)	false
E-Mail	nvarchar(255)	false

Die erste Spalte, die Spalte Id, ist speziell. Sie müssen die Spalte Id als Identitätsspalte und Primärschlüsselspalte markieren. Sie geben an, dass eine Spalte eine Identitätsspalte ist, indem Sie Spalteneigenschaften erweitern (siehe unten in Abbildung 6) und einen Bildlauf nach unten zur Identitätsspezifikationseigenschaft ausführen. Legen Sie die Eigenschaft (Is Identity) auf den Wert Ja fest.

Sie markieren eine Spalte als Primärschlüsselspalte, indem Sie die Spalte auswählen und auf die Schaltfläche mit dem Symbol eines Schlüssels klicken. Nachdem eine Spalte als Primärschlüsselspalte markiert wurde, wird neben der Spalte ein Symbol eines Schlüssels angezeigt (siehe Abbildung 6).

Nachdem Sie die Tabelle erstellt haben, klicken Sie auf die Schaltfläche Speichern (die Schaltfläche mit dem Symbol eines Floppys), um die neue Tabelle zu speichern. Geben Sie der neuen Tabelle den Namen Kontakte.

Nachdem Sie die Contacts-Datenbanktabelle erstellt haben, sollten Sie der Tabelle einige Datensätze hinzufügen. Klicken Sie im Fenster Server Explorer mit der rechten Maustaste auf die Tabelle Kontakte, und wählen Sie die Menüoption Tabellendaten anzeigen aus. Geben Sie einen oder mehrere Kontakte in das angezeigte Raster ein.

Erstellen des Datenmodells

Die ASP.NET MVC-Anwendung besteht aus Modellen, Ansichten und Controllern. Wir beginnen mit der Erstellung einer Model-Klasse, die die Im vorherigen Abschnitt erstellte Tabelle Kontakte darstellt.

In diesem Tutorial verwenden wir Microsoft Entity Framework, um automatisch eine Modellklasse aus der Datenbank zu generieren.

Hinweis

Das ASP.NET MVC-Framework ist in keiner Weise an das Microsoft Entity Framework gebunden. Sie können ASP.NET MVC mit alternativen Datenbankzugriffstechnologien wie NHibernate, LINQ to SQL oder ADO.NET verwenden.

Führen Sie die folgenden Schritte aus, um die Datenmodellklassen zu erstellen:

Klicken Sie im Fenster Projektmappen-Explorer mit der rechten Maustaste auf den Ordner Modelle, und wählen Sie Hinzufügen, Neues Element aus. Das Dialogfeld Neues Element hinzufügen wird angezeigt (siehe Abbildung 6).
Wählen Sie die Kategorie Daten und die Vorlage ADO.NET Entitätsdatenmodell aus. Nennen Sie Ihr Datenmodell ContactManagerModel.edmx , und klicken Sie auf die Schaltfläche Hinzufügen . Der Entitätsdatenmodell-Assistent wird angezeigt (siehe Abbildung 7).
Wählen Sie im Schritt Modellinhalt auswählen die Option Aus Datenbank generieren aus (siehe Abbildung 7).
Wählen Sie im Schritt Datenverbindung auswählen die ContactManagerDB.mdf Datenbank aus, und geben Sie den Namen ContactManagerDBEntities für die Entitätsverbindungseinstellungen ein (siehe Abbildung 8).
Aktivieren Sie im Schritt Datenbankobjekte auswählen das Kontrollkästchen Tabellen (siehe Abbildung 9). Das Datenmodell enthält alle Tabellen, die in Ihrer Datenbank enthalten sind (es gibt nur eine, die Tabelle Kontakte). Geben Sie den Namespace Models ein. Klicken Sie auf die Schaltfläche Fertig stellen, um den Assistenten abzuschließen.

Abbildung 06: Dialogfeld "Neues Element hinzufügen" (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Abbildung 07: Auswählen des Modellinhalts (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Abbildung 08: Wählen Sie Ihre Datenverbindung aus (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Abbildung 09: Wählen Sie Ihre Datenbankobjekte aus (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Nachdem Sie den Entitätsdatenmodell-Assistenten abgeschlossen haben, wird die entitätsdatenmodell-Designer angezeigt. Der Designer zeigt eine Klasse an, die jeder zu modellierenden Tabelle entspricht. Eine Klasse mit dem Namen Contacts sollte angezeigt werden.

Der Entity Data Model-Assistent generiert Klassennamen basierend auf Datenbanktabellennamen. Sie müssen fast immer den Namen der vom Assistenten generierten Klasse ändern. Klicken Sie im Designer mit der rechten Maustaste auf die Contacts-Klasse, und wählen Sie die Menüoption Umbenennen aus. Ändern Sie den Namen der Klasse von Contacts (Plural) in Contact (Singular). Nachdem Sie den Klassennamen geändert haben, sollte die Klasse wie In Abbildung 10 angezeigt werden.

Abbildung 10: Die Contact-Klasse (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

An diesem Punkt haben wir unser Datenbankmodell erstellt. Wir können die Contact-Klasse verwenden, um einen bestimmten Kontaktdatensatz in unserer Datenbank darzustellen.

Erstellen des Home-Controllers

Der nächste Schritt besteht darin, unseren Home-Controller zu erstellen. Der Home-Controller ist der Standardcontroller, der in einer ASP.NET MVC-Anwendung aufgerufen wird.

Erstellen Sie die Home-Controllerklasse, indem Sie im Fenster Projektmappen-Explorer mit der rechten Maustaste auf den Ordner Controller klicken und die Menüoption Hinzufügen, Controller auswählen (siehe Abbildung 11). Beachten Sie das Kontrollkästchen Aktionsmethoden hinzufügen für Create-, Update- und Details-Szenarien. Stellen Sie sicher, dass dieses Kontrollkästchen aktiviert ist, bevor Sie auf die Schaltfläche Hinzufügen klicken.

Abbildung 11: Hinzufügen des Home-Controllers (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Wenn Sie den Home-Controller erstellen, erhalten Sie die -Klasse in Listing 1.

Auflistung 1: Controller\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();
            }
        }
    }
}

Auflisten der Kontakte

Um die Datensätze in der Contacts-Datenbanktabelle anzuzeigen, müssen wir eine Index()-Aktion und eine Indexansicht erstellen.

Der Home-Controller enthält bereits eine Index()-Aktion. Wir müssen diese Methode so ändern, dass sie wie Listing 2 aussieht.

Auflistung 2: Controller\HomeController.cs

public class HomeController : Controller
{

    private ContactManagerDBEntities _entities = new ContactManagerDBEntities();

    //
    // GET: /Home/

    public ActionResult Index()
    {
        return View(_entities.ContactSet.ToList());
    }
…

Beachten Sie, dass die Home-Controller-Klasse in Listing 2 ein privates Feld mit dem Namen _entities enthält. Das Feld _entities stellt die Entitäten aus dem Datenmodell dar. Wir verwenden das Feld _entities, um mit der Datenbank zu kommunizieren.

Die Index()-Methode gibt eine Ansicht zurück, die alle Kontakte aus der Contacts-Datenbanktabelle darstellt. Der Ausdruck _entities. ContactSet.ToList() gibt die Liste der Kontakte als generische Liste zurück.

Nachdem wir nun den Indexcontroller erstellt haben, müssen wir als nächstes die Indexansicht erstellen. Kompilieren Sie Ihre Anwendung vor dem Erstellen der Indexansicht, indem Sie die Menüoption Erstellen, Projektmappe erstellen auswählen. Sie sollten Ihr Projekt immer kompilieren, bevor Sie eine Ansicht hinzufügen, damit die Liste der Modellklassen im Dialogfeld Ansicht hinzufügen angezeigt wird.

Sie erstellen die Indexansicht, indem Sie mit der rechten Maustaste auf die Index()-Methode klicken und die Menüoption Ansicht hinzufügen auswählen (siehe Abbildung 12). Wenn Sie diese Menüoption auswählen, wird das Dialogfeld Ansicht hinzufügen geöffnet (siehe Abbildung 13).

Abbildung 12: Hinzufügen der Indexansicht (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Aktivieren Sie im Dialogfeld Ansicht hinzufügen das Kontrollkästchen Erstellen einer stark typisierten Ansicht. Wählen Sie die Datenklasse Anzeigen ContactManager.Models.Contact und die Inhaltsliste anzeigen aus. Wenn Sie diese Optionen auswählen, wird eine Ansicht generiert, die eine Liste mit Kontaktdatensätzen anzeigt.

Abbildung 13: Dialogfeld Ansicht hinzufügen (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Wenn Sie auf die Schaltfläche Hinzufügen klicken, wird die Indexansicht in Listing 3 generiert. Beachten Sie die <%@ Page %> -Direktive, die oben in der Datei angezeigt wird. Die Indexansicht erbt von der ViewPage<IEnumerable<ContactManager.Models.Contact-Klasse>> . Mit anderen Worten, die Model-Klasse in der Ansicht stellt eine Liste von Contact-Entitäten dar.

Der Text der Indexansicht enthält eine foreach-Schleife, die jeden der kontakte durchläuft, die von der Model-Klasse dargestellt werden. Der Wert jeder Eigenschaft der Contact-Klasse wird in einer HTML-Tabelle angezeigt.

Eintrag 3: Ansichten\Home\Index.aspx (unverändert)

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

Wir müssen eine Änderung an der Indexansicht vornehmen. Da wir keine Detailansicht erstellen, können wir den Link Details entfernen. Suchen Und entfernen Sie den folgenden Code aus der Indexansicht:

{ id=item. Id })%>

Nachdem Sie die Indexansicht geändert haben, können Sie die Contact Manager-Anwendung ausführen. Wählen Sie die Menüoption Debuggen, Debuggen starten oder drücken Sie einfach F5. Wenn Sie die Anwendung zum ersten Mal ausführen, wird das Dialogfeld in Abbildung 14 angezeigt. Wählen Sie die Option Web.config Datei ändern aus, um das Debuggen zu aktivieren, und klicken Sie auf die Schaltfläche OK.

Abbildung 14: Aktivieren des Debuggens (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Die Indexansicht wird standardmäßig zurückgegeben. In dieser Ansicht werden alle Daten aus der Contacts-Datenbanktabelle aufgelistet (siehe Abbildung 15).

Abbildung 15: Die Indexansicht (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Beachten Sie, dass die Indexansicht unten in der Ansicht einen Link mit der Bezeichnung Neu erstellen enthält. Im nächsten Abschnitt erfahren Sie, wie Sie neue Kontakte erstellen.

Erstellen neuer Kontakte

Damit Benutzer neue Kontakte erstellen können, müssen wir dem Startcontroller zwei Create()-Aktionen hinzufügen. Wir müssen eine Create()-Aktion erstellen, die ein HTML-Formular zum Erstellen eines neuen Kontakts zurückgibt. Wir müssen eine zweite Create()-Aktion erstellen, die den tatsächlichen Datenbankeinfügevorgang des neuen Kontakts ausführt.

Die neuen Create()-Methoden, die wir dem Home-Controller hinzufügen müssen, sind in Listing 4 enthalten.

Auflistung 4: Controller\HomeController.cs (mit Create-Methoden)

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

Die erste Create()-Methode kann mit einem HTTP GET aufgerufen werden, während die zweite Create()-Methode nur von einem HTTP-POST aufgerufen werden kann. Anders ausgedrückt: Die zweite Create()-Methode kann nur beim Veröffentlichen eines HTML-Formulars aufgerufen werden. Die erste Create()-Methode gibt einfach eine Ansicht zurück, die das HTML-Formular zum Erstellen eines neuen Kontakts enthält. Die zweite Create()-Methode ist viel interessanter: Sie fügt den neuen Kontakt zur Datenbank hinzu.

Beachten Sie, dass die zweite Create()-Methode so geändert wurde, dass sie eine instance der Contact-Klasse akzeptiert. Die aus dem HTML-Formular gesendeten Formularwerte werden automatisch vom ASP.NET MVC-Framework an diese Contact-Klasse gebunden. Jedes Formularfeld aus dem HTML-Formular Erstellen wird einer Eigenschaft des Contact-Parameters zugewiesen.

Beachten Sie, dass der Contact-Parameter mit einem [Bind]-Attribut versehen ist. Das [Bind]-Attribut wird verwendet, um die Contact ID-Eigenschaft von der Bindung auszuschließen. Da die Id-Eigenschaft eine Identity-Eigenschaft darstellt, möchten wir die Id-Eigenschaft nicht festlegen.

Im Textkörper der Create()-Methode wird das Entity Framework verwendet, um den neuen Kontakt in die Datenbank einzufügen. Der neue Contact wird dem vorhandenen Satz von Kontakten hinzugefügt, und die SaveChanges()-Methode wird aufgerufen, um diese Änderungen zurück in die zugrunde liegende Datenbank zu übertragen.

Sie können ein HTML-Formular zum Erstellen neuer Kontakte generieren, indem Sie mit der rechten Maustaste auf eine der beiden Create()-Methoden klicken und die Menüoption Ansicht hinzufügen auswählen (siehe Abbildung 16).

Abbildung 16: Hinzufügen der Ansicht "Erstellen" (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Wählen Sie im Dialogfeld Ansicht hinzufügen die Klasse ContactManager.Models.Contact und die Option Erstellen aus, um Inhalte anzuzeigen (siehe Abbildung 17). Wenn Sie auf die Schaltfläche Hinzufügen klicken, wird automatisch eine Ansicht Erstellen generiert.

Abbildung 17: Explodieren einer Seite (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Die Create-Ansicht enthält Formularfelder für jede Eigenschaft der Contact-Klasse. Der Code für die Ansicht Erstellen ist in Listing 5 enthalten.

Eintrag 5: Ansichten\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>

Nachdem Sie die Create()-Methoden geändert und die Ansicht Erstellen hinzugefügt haben, können Sie die Contact Manager-Anwendung ausführen und neue Kontakte erstellen. Klicken Sie auf den Link Neu erstellen , der in der Indexansicht angezeigt wird, um zur Ansicht Erstellen zu navigieren. Die Ansicht sollte in Abbildung 18 angezeigt werden.

Abbildung 18: Ansicht erstellen (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Bearbeiten von Kontakten

Das Hinzufügen der Funktionalität zum Bearbeiten eines Kontaktdatensatzes ähnelt dem Hinzufügen der Funktionalität zum Erstellen neuer Kontaktdatensätze. Zunächst müssen wir der Home-Controllerklasse zwei neue Edit-Methoden hinzufügen. Diese neuen Edit()-Methoden sind in Listing 6 enthalten.

Auflistung 6: Controller\HomeController.cs (mit Edit-Methoden)

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

Die erste Edit()-Methode wird durch einen HTTP GET-Vorgang aufgerufen. An diese Methode wird ein Id-Parameter übergeben, der die ID des zu bearbeitenden Kontaktdatensatzes darstellt. Das Entity Framework wird verwendet, um einen Kontakt abzurufen, der der ID entspricht. Eine Ansicht, die ein HTML-Formular zum Bearbeiten eines Datensatzes enthält, wird zurückgegeben.

Die zweite Edit()-Methode führt die tatsächliche Aktualisierung der Datenbank aus. Diese Methode akzeptiert eine instance der Contact-Klasse als Parameter. Das ASP.NET MVC-Framework bindet die Formularfelder aus dem Formular Bearbeiten automatisch an diese Klasse. Beachten Sie, dass Sie das Attribut [Bind] beim Bearbeiten eines Contact nicht einschließen (wir benötigen den Wert der Id-Eigenschaft).

Das Entity Framework wird verwendet, um den geänderten Kontakt in der Datenbank zu speichern. Der ursprüngliche Kontakt muss zuerst aus der Datenbank abgerufen werden. Als Nächstes wird die Entity Framework ApplyPropertyChanges()-Methode aufgerufen, um die Änderungen am Contact aufzuzeichnen. Schließlich wird die Entity Framework SaveChanges()-Methode aufgerufen, um die Änderungen an der zugrunde liegenden Datenbank beizubehalten.

Sie können die Ansicht generieren, die das Formular Bearbeiten enthält, indem Sie mit der rechten Maustaste auf die Edit()-Methode klicken und die Menüoption Ansicht hinzufügen auswählen. Wählen Sie im Dialogfeld Ansicht hinzufügen die Klasse ContactManager.Models.Contact und den Inhalt der Ansicht bearbeiten aus (siehe Abbildung 19).

Abbildung 19: Hinzufügen einer Bearbeitungsansicht (Klicken Sie hier, um ein Bild in voller Größe anzuzeigen)

Wenn Sie auf die Schaltfläche Hinzufügen klicken, wird automatisch eine neue Bearbeitungsansicht generiert. Das generierte HTML-Formular enthält Felder, die den eigenschaften der Contact-Klasse entsprechen (siehe Eintrag 7).

Eintrag 7: Ansichten\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>

Kontakte löschen

Wenn Sie Kontakte löschen möchten, müssen Sie der Home-Controllerklasse zwei Delete()-Aktionen hinzufügen. Die erste Delete()-Aktion zeigt ein Löschbestätigungsformular an. Die zweite Delete()-Aktion führt den tatsächlichen Löschvorgang aus.

Hinweis

Später, in Iteration 7, ändern wir den Kontakt-Manager so, dass er einen einstufigen Ajax-Löschvorgang unterstützt.

Die beiden neuen Delete()-Methoden sind in Listing 8 enthalten.

Auflistung 8: Controller\HomeController.cs (Delete-Methoden)

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

Die erste Delete()-Methode gibt ein Bestätigungsformular zum Löschen eines Kontaktdatensatzes aus der Datenbank zurück (siehe Abbildung 20). Die zweite Delete()-Methode führt den tatsächlichen Löschvorgang für die Datenbank aus. Nachdem der ursprüngliche Kontakt aus der Datenbank abgerufen wurde, werden die Methoden DeleteObject() und SaveChanges() von Entity Framework aufgerufen, um die Datenbanklöschung durchzuführen.

Abbildung 20: Die Löschbestätigungsansicht (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Wir müssen die Indexansicht so ändern, dass sie einen Link zum Löschen von Kontaktdatensätzen enthält (siehe Abbildung 21). Sie müssen der gleichen Tabellenzelle, die den Link Bearbeiten enthält, den folgenden Code hinzufügen:

Html.ActionLink( { id=item. ID }) %>

Abbildung 21: Indexansicht mit Link "Bearbeiten" (Zum Anzeigen des Bilds in voller Größe klicken)

Als Nächstes müssen wir die Löschbestätigungsansicht erstellen. Klicken Sie mit der rechten Maustaste auf die Delete()-Methode in der Home-Controller-Klasse, und wählen Sie die Menüoption Ansicht hinzufügen aus. Das Dialogfeld Ansicht hinzufügen wird angezeigt (siehe Abbildung 22).

Im Gegensatz zu den Ansichten Liste, Erstellen und Bearbeiten enthält das Dialogfeld Ansicht hinzufügen keine Option zum Erstellen einer Löschansicht. Wählen Sie stattdessen die ContactManager.Models.Contact-Datenklasse und den Inhalt der Ansicht Leer aus. Wenn Sie die Option Inhalt der leeren Ansicht auswählen, müssen wir die Ansicht selbst erstellen.

Abbildung 22: Hinzufügen der Löschbestätigungsansicht (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Der Inhalt der Löschansicht ist in Listing 9 enthalten. Diese Ansicht enthält ein Formular, das bestätigt, ob ein bestimmter Kontakt gelöscht werden soll (siehe Abbildung 21).

Eintrag 9: Ansichten\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>

Ändern des Namens des Standardcontrollers

Es könnte Sie stören, dass der Name unserer Controllerklasse für die Arbeit mit Kontakten die HomeController-Klasse heißt. Sollte der Controller nicht ContactController heißen?

Dieses Problem ist einfach genug zu beheben. Zunächst müssen wir den Namen des Homecontrollers umgestalten. Öffnen Sie die HomeController-Klasse im Visual Studio Code-Editor, klicken Sie mit der rechten Maustaste auf den Namen der Klasse, und wählen Sie die Menüoption Umgestalten, Umbenennen aus. Wenn Sie diese Menüoption auswählen, wird das Dialogfeld Umbenennen geöffnet.

Abbildung 23: Umgestalten eines Controllernamens (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Abbildung 24: Verwenden des Dialogfelds "Umbenennen" (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Wenn Sie Ihre Controllerklasse umbenennen, aktualisiert Visual Studio auch den Namen des Ordners im Ordner Views. Visual Studio benennt den Ordner \Views\Home in den Ordner \Views\Contact um.

Nachdem Sie diese Änderung vorgenommen haben, verfügt Ihre Anwendung nicht mehr über einen Home-Controller. Wenn Sie Ihre Anwendung ausführen, erhalten Sie die Fehlerseite in Abbildung 25.

Abbildung 25: Kein Standardcontroller (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Wir müssen die Standardroute in der Datei Global.asax aktualisieren, um den Kontaktcontroller anstelle des Homecontrollers zu verwenden. Öffnen Sie die Datei Global.asax, und ändern Sie den Standardcontroller, der von der Standardroute verwendet wird (siehe Auflistung 10).

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

Nachdem Sie diese Änderungen vorgenommen haben, wird der Kontakt-Manager ordnungsgemäß ausgeführt. Nun wird die Contact-Controllerklasse als Standardcontroller verwendet.

Zusammenfassung

In dieser ersten Iteration haben wir eine einfache Contact Manager-Anwendung auf schnellstmögliche Weise erstellt. Wir haben Visual Studio genutzt, um den anfänglichen Code für unsere Controller und Ansichten automatisch zu generieren. Außerdem haben wir das Entity Framework genutzt, um unsere Datenbankmodellklassen automatisch zu generieren.

Derzeit können wir Kontakteinträge mit der Contact Manager-Anwendung auflisten, erstellen, bearbeiten und löschen. Anders ausgedrückt: Wir können alle grundlegenden Datenbankvorgänge ausführen, die für eine datenbankgesteuerte Webanwendung erforderlich sind.

Leider hat unsere Anwendung einige Probleme. Zunächst und ich zögere zuzugeben, dass die Contact Manager-Anwendung nicht die attraktivste Anwendung ist. Es bedarf einiger Entwurfsarbeiten. In der nächsten Iteration wird untersucht, wie wir die Standardansicht master Seite und kaskadierendes Stylesheet ändern können, um die Darstellung der Anwendung zu verbessern.

Zweitens haben wir keine Formularüberprüfung implementiert. Es gibt beispielsweise nichts, was Sie daran hindern kann, das Kontaktformular erstellen zu übermitteln, ohne Werte für eines der Formularfelder einzugeben. Außerdem können Sie ungültige Telefonnummern und E-Mail-Adressen eingeben. Wir beginnen, das Problem der Formularvalidierung in Iteration 3 anzugehen.

Schließlich und am wichtigsten ist, dass die aktuelle Iteration der Contact Manager-Anwendung nicht einfach geändert oder verwaltet werden kann. Beispielsweise wird die Datenbankzugriffslogik direkt in die Controlleraktionen eingefügt. Dies bedeutet, dass wir unseren Datenzugriffscode nicht ändern können, ohne unsere Verantwortlichen zu ändern. In späteren Iterationen untersuchen wir Softwareentwurfsmuster, die wir implementieren können, um den Contact Manager gegenüber Änderungen widerstandsfähiger zu machen.

Freigeben über

Iteration 1 – Erstellen der Anwendung (C#)

Erstellen einer Kontaktverwaltung ASP.NET MVC-Anwendung (VB)

Diese Iteration

Erforderliche Software

ASP.NET MVC-Projekt

Löschen der Projektbeispieldateien

Erstellen der Datenbank

Erstellen des Datenmodells

Erstellen des Home-Controllers

Auflisten der Kontakte

Erstellen neuer Kontakte

Bearbeiten von Kontakten

Kontakte löschen

Ändern des Namens des Standardcontrollers

Zusammenfassung

Feedback

Zusätzliche Ressourcen