MVC

Guide för att snabbt komma igång med ett MVC projekt.

Innehåll

• Skapa ett nytt projekt
• Installera NuGet paket
  • EntityFrameworkCore
    • Windows
    • MacOs
  • EntityFrameworkCore.SqlServer
    • Windows
    • MacOs
  • EntityFrameworkCore.Tools
    • Windows
    • MacOs
• Scaffold DbContext
  • Windows
  • MacOS
• Flytta connectionsträngen
  • carDbContext.cs
  • appsettings.json
• Lägg till DbContext i startup.cs
  • startup.cs
• Lägg till en controller
  • Förklaring
  • Exempel - BrandsController
• Genererade filer
  • Controllers
    • Exempel - BrandsController.cs
  • Views
    • Exempel - Details.cshtml
• Lägg till en länk i navbaren
  • Exempel - Länk för Brands
  • _Layout.cshtml
• Starta webbapplikationen
  • Att tänka på

---

Skapa ett nytt projekt

Skapa ett nytt projekt i Visual Studio Community.

Typ	ASP.NET Core web app (Model-View-Controller)
Framework	.NET 5.0 (current)
Authentication Type	None
Enable for HTTPS	Ja

---

Installera NuGet Paket

Installera följande nuGet paket.

Paket	Version
Microsoft.EntityFrameworkCore	5.0.16
Microsoft.EntityFrameworkCore.SqlServer	5.0.16
Microsoft.EntityFrameworkCore.Tools	5.0.16

Microsoft.EntityFrameworkCore

Windows

Install-Package Microsoft.EntityFrameworkCore -v 5.0.16

MacOS

dotnet add package Microsoft.EntityFrameworkCore -v 5.0.16

Microsoft.EntityFrameworkCore.SqlServer

Windows

Install-Package Microsoft.EntityFrameworkCore.SqlServer -v 5.0.16

MacOS

dotnet add package Microsoft.EntityFrameworkCore.SqlServer -v 5.0.16

Microsoft.EntityFrameworkCore.Tools

Windows

Install-Package Microsoft.EntityFrameworkCore.Tools -v 5.0.16

MacOS

dotnet add package Microsoft.EntityFrameworkCore.Tools -v 5.0.16

---

Scaffold DbContext

Kör kommandot scaffold-DbContext mot en befintlig databas.

Exempel

Windows

scaffold-DbContext "Server=localhost;Database=carDb;User Id=sa;Password=P@ssw0rd;" Microsoft.EntityFrameworkCore.SqlServer -o Models

MacOS

dotnet ef dbcontext Scaffold "Server=locahost;Database=carDb;User ID=sa;Password=P@ssw0rd; "Microsoft.EntityFrameworkCore.SqlServer -o Models

---

Flytta connectionstringen

Flytta din connectionstring från context-filen till appsettings.json

carDbContext.cs före

protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
{
    if (!optionsBuilder.IsConfigured)
    {
        optionsBuilder.UseSqlServer("server=localhost;database=carDb;user id=sa;Password=P@ssw0rd;");
    }
}

carDbContext.cs efter

protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
{
}

appsettings.json före

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*"
}

appsettings.json efter

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*",
  "ConnectionStrings": {
    "connString": "Server=localhost;database=carDb;User Id=sa;Password=P@ssw0rd;"
  }
}

---

Lägg till din DbContext i startup.cs

Öppna startup.cs och lägg till din dbcontext.

startup.cs före

public void ConfigureServices(IServiceCollection services)
{
    services.AddControllersWithViews();
}

startup.cs efter

public void ConfigureServices(IServiceCollection services)
{
    services.AddControllersWithViews();
    services.AddDbContext<carDbContext>(
        options => options.UseSqlServer(
            Configuration.GetConnectionString("connString")));
}

Referenser

Kom ihåg att referera till EntityFrameworkCore och mappen där din DbContext finns.

Exempel

using Microsoft.EntityFrameworkCore;
using WebApplication6.Models;

---

Lägg till en ny controller

1. Högerklicka på mappen Controllers
2. Välj Add -> Controller...
3. Välj MVC Controller with views, using Entity Framework

Förklaring

Model class	Den klass du vill skapa en controller för
Data context class	Din DbContext
Generate views	Genererar vyer för controllern
Reference script libraries	Inkluderar referenser til ev. script
Use a layout page	Använder grundmallen
Controller name	klassnamn + Controller

Exempel BrandsController

Model class	Brand
Data context class	carDbContext
Generate views	Ja
Reference script libraries	Ja
Use a layout page	Ja
Controller name	BrandsController

---

Genererade filer

Efter att controllern skapats har det tillkommit en del nya filer.

Controllers

I mappen Controllers finns nu BrandsController.cs
Filen innehåller all logik för kommunikation mellan views och models.

Exempel BrandsController.cs

public class BrandsController : Controller
{
   private readonly carDbContext _context;

   public BrandsController(carDbContext context)
   {
       _context = context;
   }

   // GET: Brands
   public async Task<IActionResult> Index()
   {
       return View(await _context.Brands.ToListAsync());
   }
}

Views

I mappen Views har en ny mapp skapats - Brands.
Denna mappen innehåller samtliga vyer för Brands.

• Create.cshtml
  • Vy för att skapa en ny instans av Brand
• Delete.cshtml
  • Vy för att radera en instans av Brand
• Details.cshtml
  • Vy för att se all information om en instans av Brand
• Edit.cshtml
  • Vy för att editera en instans av Brand.
• index.cshtml
  • Startsida för Brands.
    • Listar alla instanser.

Exempel Details.cshtml

@model WebApplication6.Models.Brand

@{
   ViewData["Title"] = "Details";
}

<h1>Details</h1>

<div>
   <h4>Brand</h4>
   <hr />
   <dl class="row">
       <dt class = "col-sm-2">
           @Html.DisplayNameFor(model => model.BrandName)
       </dt>
       <dd class = "col-sm-10">
           @Html.DisplayFor(model => model.BrandName)
       </dd>
   </dl>
</div>
<div>
   <a asp-action="Edit" asp-route-id="@Model.Id">Edit</a> |
   <a asp-action="Index">Back to List</a>
</div>

---

Lägg till en länk i navbaren

Navigera till _Layout.cshtml

Views -> Shared -> _Layout.csthml
Denna filen är grundmallen för samtliga vyer i projektet.

Exempel - länk

<li class="nav-item">
    <a class="nav-link text-dark" asp-controller="[ControllerNamn]" asp-action="[MetodNamn]">[Länktext]</a>
</li>

Exempel - Länk för Brands

<li class="nav-item">
   <a class="nav-link text-dark" asp-controller="Brands" >asp-action="Index">Brands</a>
</li>

_Layout.cshtml före

<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
    <ul class="navbar-nav flex-grow-1">
        <li class="nav-item">
            <a class="nav-link text-dark" asp-controller="Home" asp-action="Index">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link text-dark" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </li>
    </ul>
</div>

_Layout.cshtml efter

<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
    <ul class="navbar-nav flex-grow-1">
        <li class="nav-item">
            <a class="nav-link text-dark" asp-controller="Home" asp-action="Index">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link text-dark" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </li>
        <li class="nav-item">
            <a class="nav-link text-dark" asp-controller="Brands" asp-action="Index">Brands</a>
        </li>
    </ul>
</div>

---

Starta din webbapplikation

För att starta din webbapplikation trycked du på den "vanliga" startknappen.
Det bör stå IIS Express på knappen.

OBS!

Tänk på att webbapplikationen nu är kopplad mot din databas.
Dvs. alla objekt du skapar/raderar/ändrar kommer att appliceras mot databasen.