Komplet Guide til CRUD i ASP.NET MVC

At bygge webapplikationer, der kan håndtere data, er en fundamental færdighed for enhver udvikler. Kernen i datamanipulation er det, vi kalder CRUD-operationer: Create (Opret), Read (Læs), Update (Opdater) og Delete (Slet). I denne dybdegående artikel vil vi guide dig trin for trin gennem processen med at bygge en fuldt funktionel ASP.NET MVC-applikation, der udfører disse operationer på en elegant og effektiv måde. Vi vil benytte os af kraftfulde teknologier som Entity Framework til at kommunikere med databasen, jQuery og AJAX til at skabe en dynamisk brugeroplevelse uden at skulle genindlæse siden, og det populære DataTables-plugin til at præsentere data på en pæn og interaktiv måde.

Denne guide er designet til at være praktisk og let at følge, selv for dem med begrænset erfaring i ASP.NET MVC. Vi starter helt fra bunden med at oprette databasen og projektet, og vi bygger derefter lag for lag, indtil vi har en færdig applikation, der kan håndtere en liste af studerende. Undervejs vil vi dække emner som model-binding, klientsidevalidering og asynkrone kald til serveren, hvilket giver dig en solid forståelse for, hvordan moderne webapplikationer fungerer.

Forberedelser: Nødvendige Værktøjer og Pakker

Før vi begynder at skrive kode, er det vigtigt at sikre, at vores udviklingsmiljø er korrekt konfigureret. En vellykket implementering afhænger af de rigtige værktøjer og biblioteker. Her er en liste over, hvad du skal have klar:

• Visual Studio: Version 2013 eller nyere. I denne guide bruger vi Visual Studio 2017.
• SQL Server: Version 2012 eller nyere. Dette vil fungere som vores database-backend.
• ASP.NET MVC: Version 5.0.0.0 eller højere. Du kan tjekke din version ved at højreklikke på System.Web.Mvc under 'References' i dit projekt og vælge 'Properties'. Hvis din version er for lav, kan du opdatere den via NuGet Package Manager Console med kommandoen: Install-Package Microsoft.AspNet.Mvc -Version 5.2.7.

Derudover skal vi installere et par essentielle NuGet-pakker for at få adgang til den funktionalitet, vi har brug for. Dette gøres ved at højreklikke på dit projekt i Solution Explorer og vælge 'Manage NuGet Packages...':

1. Bootstrap: Giver os et responsivt CSS-framework til at style vores applikation.
2. jQuery: Et must-have JavaScript-bibliotek, der forenkler DOM-manipulation og AJAX-kald. Vi bruger version 1.12.4 eller nyere.
3. jQuery UI: Bruges til at skabe vores popup-dialog (modal) til oprettelse og redigering af data.
4. jQuery Validation & Microsoft jQuery Unobtrusive Validation: Disse to pakker arbejder sammen for at muliggøre nem klientsidevalidering baseret på de regler, vi definerer i vores model.
5. DataTables: Selvom det ikke er en standard NuGet-pakke, vil vi inkludere det via CDN-links for at omdanne vores simple HTML-tabel til et interaktivt datagrid med sortering, filtrering og paginering.

Trin 1: Opsætning af Databasen

Enhver CRUD-applikation starter med en database. Vi opretter en simpel database og en tabel til at gemme vores data. Åbn SQL Server Management Studio og følg disse trin:

1. Opret en ny database. Vi kalder den MvcCRUDDB.
2. I denne database, opret en ny tabel ved navn Student.
3. Definer følgende kolonner i Student-tabellen:
   • StudentID (int, Primary Key, Not Null)
   • Name (nvarchar(50), Null)
   • Department (nvarchar(50), Null)
   • Semester (nvarchar(50), Null)
   • Age (int, Null)
   • Fees (int, Null)
4. Sørg for at sætte StudentID-kolonnen til at være en 'Identity Specification' med 'Is Identity' sat til 'Yes'. Dette sikrer, at hver ny studerende automatisk får et unikt ID.

Trin 2: Oprettelse af ASP.NET MVC-Projektet

Nu hvor databasen er klar, kan vi oprette vores webapplikation i Visual Studio.

1. Gå til File -> New -> Project.
2. Vælg 'ASP.NET Web Application (.NET Framework)' under Visual C#.
3. Navngiv dit projekt, for eksempel MvcCRUD, og klik OK.
4. Vælg 'Empty' skabelonen og marker afkrydsningsfeltet for 'MVC'. Klik OK.

Visual Studio vil nu generere en grundlæggende projektstruktur. Sørg for at installere de nødvendige NuGet-pakker som beskrevet i forberedelsesafsnittet.

Trin 3: Forbindelse via Entity Framework

For at vores applikation kan tale med databasen, bruger vi Entity Framework (EF). EF er en Object-Relational Mapper (ORM), der lader os arbejde med databasen ved hjælp af C#-objekter i stedet for at skrive rå SQL-forespørgsler. Dette gør koden mere læsbar og vedligeholdelsesvenlig.

1. Højreklik på mappen 'Models' i Solution Explorer -> Add -> New Item.
2. Vælg 'Data' fra venstre panel og derefter 'ADO.NET Entity Data Model'. Navngiv den DBModels og klik Add.
3. I den næste dialogboks, vælg 'EF Designer from database'.
4. Klik på 'New Connection' og indtast dine SQL Server-oplysninger for at forbinde til MvcCRUDDB-databasen.
5. Gem forbindelsesstrengen i Web.config (standardvalget er fint).
6. Vælg den Student-tabel, vi oprettede tidligere, og klik Finish.

Dette vil generere en Student.cs klasse i din Models-mappe, som repræsenterer en række i din databasetabel. Vi kan nu interagere med denne klasse for at udføre CRUD-operationer.

Trin 4: Implementering af Controlleren

Controlleren er hjernen i vores applikation. Den modtager anmodninger fra brugeren, interagerer med modellen (vores database via EF) og returnerer et view. Vi opretter en StudentController.

1. Højreklik på mappen 'Controllers' -> Add -> Controller.
2. Vælg 'MVC 5 Controller - Empty'.
3. Navngiv den StudentController.

Inde i denne controller tilføjer vi flere 'Action Methods' til at håndtere vores CRUD-logik.

Hentning af Data (Read)

Denne metode henter alle studerende fra databasen og returnerer dem som JSON, så vores DataTable kan vise dem.

public ActionResult GetData() { using (DBModel db = new DBModel()) { List<Student> studentList = db.Students.ToList<Student>(); return Json(new { data = studentList }, JsonRequestBehavior.AllowGet); } }

Oprettelse og Opdatering (Create & Update)

Vi bruger én metode til både at oprette og opdatere. Hvis et ID på 0 sendes, ved vi, at det er en ny post. Ellers er det en opdatering.

[HttpGet] public ActionResult StoreOrEdit(int id = 0) { if (id == 0) return View(new Student()); else { using (DBModel db = new DBModel()) { return View(db.Students.Where(x => x.StudentID == id).FirstOrDefault<Student>()); } } } [HttpPost] public ActionResult StoreOrEdit(Student studentob) { using (DBModel db = new DBModel()) { if (studentob.StudentID == 0) { db.Students.Add(studentob); db.SaveChanges(); return Json(new { success = true, message = "Gemt succesfuldt" }, JsonRequestBehavior.AllowGet); } else { db.Entry(studentob).State = EntityState.Modified; db.SaveChanges(); return Json(new { success = true, message = "Opdateret succesfuldt" }, JsonRequestBehavior.AllowGet); } } }

Sletning af Data (Delete)

Denne metode modtager et ID og fjerner den tilsvarende post fra databasen.

[HttpPost] public ActionResult Delete(int id) { using (DBModel db = new DBModel()) { Student emp = db.Students.Where(x => x.StudentID == id).FirstOrDefault<Student>(); db.Students.Remove(emp); db.SaveChanges(); return Json(new { success = true, message = "Slettet succesfuldt" }, JsonRequestBehavior.AllowGet); } }

Trin 5: Design af Brugergrænsefladen (Views)

Nu skal vi oprette de HTML-sider (Views), som brugeren vil interagere med.

Index.cshtml

Dette er vores hovedside, der viser tabellen med studerende. Højreklik inde i Index-metoden i din controller og vælg 'Add View'. Kald den 'Index'.

Kernen i dette view er en simpel <table>-tag og et JavaScript-afsnit, der initialiserer DataTables-plugin'et. Scriptet foretager et AJAX-kald til vores GetData-metode for at hente data og definerer, hvordan hver kolonne skal vises, inklusiv 'Rediger' og 'Slet' knapperne.

StoreOrEdit.cshtml

Dette view er en formular til at tilføje eller redigere en studerende. Det vil blive vist i en popup-dialog. Det er et 'Partial View', da det ikke har brug for det fulde layout. Formularen bruger HTML Helpers som @Html.EditorFor til at binde til vores Student-model.

Tabel: Client-side vs. Server-side Processing

DataTables kan fungere på to måder. Vores eksempel bruger client-side processing, hvilket er ideelt for mindre datasæt. For meget store datasæt er server-side processing at foretrække. Her er en sammenligning:

Ofte Stillede Spørgsmål (FAQ)

Hvad betyder CRUD?

CRUD er et akronym for de fire grundlæggende funktioner i vedvarende datalagring: Create (Opret), Read (Læs), Update (Opdater) og Delete (Slet). Disse er de standardoperationer, der udføres på data i en database.

Hvorfor bruge Entity Framework?

Entity Framework (EF) forenkler adgangen til databasen ved at lade udviklere arbejde med stærkt typede .NET-objekter i stedet for at skrive SQL-forespørgsler som strenge. Dette reducerer mængden af boilerplate-kode, minimerer risikoen for SQL-injektion og øger produktiviteten.

Hvad er fordelen ved at bruge AJAX?

AJAX (Asynchronous JavaScript and XML) gør det muligt for en webapplikation at sende og modtage data fra en server i baggrunden uden at skulle genindlæse hele siden. Dette resulterer i en hurtigere, mere flydende og mere desktop-lignende brugeroplevelse. Vores brug af AJAX til at gemme, opdatere og slette data er et perfekt eksempel på dette.

Kan denne guide bruges med nyere versioner af Visual Studio og .NET?

Ja, absolut. Principperne i denne guide er fundamentale for ASP.NET MVC. Mens der kan være mindre syntaktiske forskelle eller ændringer i projektopsætningen i nyere versioner som .NET Core eller .NET 6/7/8, er den overordnede arkitektur med en Controller, der håndterer logik, Entity Framework til dataadgang, og Views til præsentation, stadig den samme.

Konklusion

Vi har nu med succes bygget en komplet ASP.NET MVC-webapplikation fra bunden, der implementerer alle fire CRUD-operationer. Gennem denne proces har vi lært at oprette en database, konfigurere et MVC-projekt, bruge Entity Framework til at kommunikere med databasen, og skabe en dynamisk brugergrænseflade ved hjælp af jQuery, AJAX og DataTables-plugin'et. Denne applikation udgør et solidt fundament, som du kan bygge videre på i dine egne projekter. Ved at mestre disse teknikker er du godt på vej til at udvikle robuste og moderne datadrevne webapplikationer.