At Visual Studio
Set up and initialize a project
- Create a new project
- ASP.NET Core Web Application
- Without checking "Place solution and project in the same directory"
- .NET Core, ASP.NET Core 5.0, Empty
- Startup.cs
- Add MVC to ConfigureServices
- service.AddControllersWithViews()
- Add redirection to https
- app.UseHttpsRedirection()
- Static files. Use wwwroot as default for all static files
- app.UseStaticFiles()
- Change endpoint.
- Map the name of controller
- Database needs ID to be passed
- If you do not specify controller, use Home.
- If you do not specify action, use Index
- Actionable parameter id for the database
app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
});
- Models/Car.cs
- Create Car class
- Models is domain related classes, which do not contain logic, instead, contains necessary data and properties
- Id, Name, Description, Price, ImageUrl, ImageThumbnailUrl, IsOnSale, IsInStock, CategoryId, Category
- Models/Category.cs
- Add Category class
- CategoryId, CategoryName, CategoryDescription, Cars
Add repositories
- Add interface repositories
- Models/ICarRepository.cs
- GetAllCar, GetCarOnSale, GetCarById
- Models/ICategoryRepository.cs
- GetAllCategories
- Add repositories
- Models/CategoryReposigory.cs
- Add examples of Category class
- Models/CarRepository.cs
- GetAllCar, GetCarOnSale, GetCarById
- Add
- Startup.cs
- services.AddScoped<ICategoryRepository, CategoryRepository>();
- services.AddScoped<ICarRepository, CarRepository>
Controllers use Models and Views to create a response to clients. Controllers do not need to know how the data is stored in the database.
In order to return both Car and Category, you need ViewModels.
- Add Constructor and Action method to CarController
- Controllers/CarController.cs
- Constructor: ICarRepository, ICategoryRepository
- Action method: ViewResult List()
- return View(_carRepository.GetAllCar);
Add Views
- Add a simple view
- Views/Car/List.cshtml
- Car model
- Name, Price, CategoryName
@model IEnumerable<CarShop2.Models.Car>
<html>
<head>
<meta charset="utf-8" />
<title>Car Shop</title>
</head>
<body>
@foreach (var car in Model)
{
<div>
<h2>@car.Name</h2>
<h3>@car.Price</h3>
<h4>@car.Category.CategoryName</h4>
</div>
}
</body>
</html>
- Add ViewBag
- Controllers/CarController.cs/List
- ViewBag.CurrentCategory = "Best sellers";
- Views/Car/List.cshtml
- ViewBag.CurrentCategory
- Add ViewModels
- ViewModels/CarListViewModel.cs
- IEnumerable<Car> Car
- string CurrentCategory
- Controllers/CarController.cs
- IActionResult List()
- carListViewModel.Car
- carListViewModel.CurrentCategory
- return View(carListviewModel);
- Views/Car/List.cshtml
- CarShop.ViewModels.CarListViewModel
- Model.CurrentCategory
Add Partial Layout
- Remove meta, body, html from List.cshtml
- Add files
- Views/Shared/_Layout.cshtml
- Views/_ViewStart.cshtml
- Views/_ViewImports.cshtml
- using Models
- using ViewModels
- Add CSS with bootstraup of Library manager of Visual Studio
- Right click project, Add, Client-side library
- Provider: jsdelivr
- Library: bootstrap
- Target location: wwwroot/lib/bootstrap
- Right click project, Add, Client-side library
- Provider: cdnjs
- Library: jquery
- Target location: wwwroot/lib/jquery
- Add image directory
- wwwroot/Images
- Add content directory and CSS file
- wwwroot/content/site.css
- Edit site.css
- Add library
- Views/Shared/_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
<script src="~/lib/jquery/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
<link href="~/content/site.css?11111" rel="stylesheet" />
<title>@ViewBag.Title</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-3 col-lg-3 p-1 pt-5">
<img src="~/Images/honda-logo.jpg" class="img-fluid" />
</div>
<div class="col-sm-9 col-md-9 col-lg-9 p-5">
@RenderBody()
</div>
</div>
</div>
</body>
</html>
- Views/Car/List.cshtml
@model CarListViewModel
<div class="container">
<div class="row">
<h1>@Model.CurrentCategory</h1>
</div>
<div class="row">
@foreach (var car in Model.Car)
{
<div class="col-sm-4 col-md-4 col-lg-4 p-2">
<div class="thumbnail">
<img src="@car.ImageThumbNailUrl" />
<div class="caption">
<h3 class="float-right">@car.Price.ToString("c")</h3>
<h3>@car.Name</h3>
<p>@car.Description</p>
</div>
</div>
</div>
}
</div>
</div>
No comments:
Post a Comment