C# a ASP.NET MVC

html templates

Prezentácia

Vytvorenie nového projektu

Vo Visual Studio Code si vytvoríme nový ASP.NET MVC projekt. Projekt sa spustí v prehliadači na https://localhost:5001

1. Stiahneme a nainštalujeme .NET SDK

.NET SDK download

2. Na Visual Studio Code si nainštalujeme C# extension

3. Vytvoríme si nový prečinok, kde bude náš nový projekt

4. Vytvoríme si nový projekt pomocou príkazu:

dotnet new mvc -o NewProjectName

5. Spustíme príkaz na overenie certifikátu:

dotnet dev-certs https --trust

6. Vybudujeme a spustíme projekt pomocou CTRL + F5

Nový Model

1. Vytvoríme nový súbor v priečinku /Models s názvom Movie.cs

2. Do súboru vložíme:

using System;
using System.ComponentModel.DataAnnotations;

namespace MvcMovie.Models
{
    public class Movie
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
}

Nový Controller

1. Vytvoríme nový súbor v priečinku /Controllers s názvom MoviesController.cs

2. Do súboru vložíme:

using Microsoft.AspNetCore.Mvc;
using System.Text.Encodings.Web;

namespace MvcMovie.Controllers
{
     public class MoviesController : Controller
     {
        //
        // GET: /Movies/
        public string Index()
        {
            return "Hello World ...";
        }

        // GET: /Movies/Welcome/
        public string Welcome()
        {
            return "This is the action method ...";
        }
    }
}

3. Súbor zmeníme na:

using Microsoft.AspNetCore.Mvc;
using System.Text.Encodings.Web;

namespace MvcMovie.Controllers
{
    public class MoviesController : Controller
    {
        //
        // GET: /Movies/
        public string Index()
        {
            return "Hello World ...";
        }

        //
        // GET: /Movies/Welcome/
        public string Welcome(string name, int id = 1)
        {
            return HtmlEncoder.Default.Encode($"Hello {name}, ID: {id}");
        }
    }
}

4. Súbor zmeníme na:

using Microsoft.AspNetCore.Mvc;
using System.Text.Encodings.Web;
using MvcMovie.Models;

namespace MvcMovie.Controllers
{
    public class MoviesController : Controller
    {
        //
        // GET: /Movies/
        public ActionResult Index()
        {
            var movie = new Movie() { Name = "Shrek!"};

            return View();
        }
    }
}

Nový View

1. V priečinku /Views si vytvoríme nový prečinok /Movies

2. V priečinku /Views/Movies si vytvoríme nový súbor Index.cshtml

3. Do súboru vložíme:

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

<h2>Hello</h2>

<p>This is new view for movies.</p>

4. Súbor zmeníme na:

@model MvcMovie.Models.Movie
@{
ViewData["Title"] = "Index";
}

<h2>Movies</h2>

<p>@Model.Name</p>

Tvorba zoznamu filmov a zákazníkov

1. Vytvoríme nový model Customer

2. Vytvoríme nový model RandomMovieViewModel

3. Zmeníme MoviesController na:

using Microsoft.AspNetCore.Mvc;
using System.Text.Encodings.Web;
using MvcMovie.Models;
using System.Collections.Generic;

namespace MvcMovie.Controllers
{
    public class MoviesController : Controller
    {
        //
        // GET: /Movies/
        public ActionResult Index()
        {
            var movie = new Movie() { Name = "Shrek!"};
            var customers = new List {
                new Customer {Name = "Customer 1"},
                new Customer {Name = "Customer 2"}
            };

            var viewModel = new RandomMovieViewModel{
               Movie = movie,
               Customers = customers
            };

            return View(viewModel);
        }
    }
}

4. Zmeníme /Views/Movies/Index.cshtml na:

@model MvcMovies.Models.RandomMovieViewModel
@{
ViewData["Title"] = "Index";
}

<h2>@Model.Movie.Name</h2>

@if (Model.Customers.Count == 0){
<text>No one has rented this movie before.</text>
}

else {
<ul>

@foreach (var customer in Model.Customers)
{

<li>@customer.Name</li>

}

</ul>

}

5. Vytvoríme nový Controller pre zákazníka s názvom CustomersControler.cs

using Microsoft.AspNetCore.Mvc;
using System.Text.Encodings.Web;
using MvcMovie.Models;
using System.Collections.Generic;
using System.Linq;

namespace MvcMovie.Controllers
{
    public class CustomersController : Controller
        {
        public ViewResult Index(){
            var customers = GetCustomers();

            return View(customers);
        }

        public ActionResult Details(int id)
        {
            var customer = GetCustomers().SingleOrDefault(c => c.Id == id);

            return View(customer);
        }

        private IEnumerable<Customer> GetCustomers()
        {
            return new List<Customer>
            {
                new Customer { Id = 1, Name = "John Smith" },
                new Customer { Id = 2, Name = "Mary Williams" }
            };
        }
    }
}

6. Zmeníme MoviesController.cs na:

        {
            return new List<Customer>
            {
                new Movie { Id = 1, Name = "Shrek" },
                new Movie { Id = 2, Name = "Wall-e" }
            };
        }
    }
}

7. Vytvoríme nový priečinok /Views/Customers/

8. V tomto priečinku si vytvoríme súbor Details.cshtml

@model MvcMovie.Models.Customer

@{
ViewBag.Title = Model.Name;
Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>@Model.Name</h2>

9. Vytvoríme ešte jeden súbor Index.cshtml

@model IEnumerable<MvcMovie.Models.Customer>
@{
ViewBag.Title = "Customers";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Customers</h2>
@if (!Model.Any())
{

<p>We don't have any customers yet.</p>

}

else

{

<thead>
<tr>
<th>Customer</th>
</tr>
</thead>
<tbody>
@foreach (var customer in Model)
{
<tr>
<td>@Html.ActionLink(customer.Name, "Details", "Customers", new , null)</td>
</tr>
}
</tbody>

</table>

}

10. Zmeníme /Views/Movies/Index.cshtml na:

@model IEnumerable<MvcMovie.Models.Movie>

@{
ViewBag.Title = "Movies";
Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Movies</h2>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Movie</th>
</tr>
</thead>
<tbody>
@foreach (var movie in Model)
{
<tr>
<td>@movie.Name</td>
</tr>
}
</tbody>
</table>

11. Zmeníme /Views/Shared/_Layout.cshtml tak, aby tam boli linky na Customers a Movies

Úlohy

1. Pridať niekoľko nových filmov a zákazníkov

2. Pridať zákazníkovi nové parametre a vypísať ich do /Views/Customers/Details.cshtml

3. Pridať filmu nové parametre a vypísať ich do /Views/Movies/Details.cshtml

Customer Details

Movie List

Movie Details

Zdroje