Customizing an ASP.NET Core MVC Website

Explore how to extend an ASP.NET Core MVC website by adding custom CSS for product display, integrating category images, and using Razor syntax for dynamic content. Understand defining typed views to improve coding with IntelliSense and learn to combine HTML with C# code to build interactive pages.

We'll cover the following...

Defining a custom style
Setting up the category images
Razor syntax and expressions
Defining a typed view
Results of the customized home page
- Try it yourself

Now that we’ve reviewed the structure of a basic MVC website, we will customize and extend it. We have already registered an EF Core model for the Northwind database, so the next task is to output some of that data on the home page.

Defining a custom style

The home page will show a list of the $77$ products in the Northwind database. To efficiently use space, we want to show the list in three columns. To do this, we need to customize the style sheet for the website:

Step 1: In the wwwroot\css folder, open the site.css file.

Step 2: At the bottom of the file, add a new style that will apply to an element with the product-columns ...

1.Introduction

2.Hello, C#! Welcome, .NET!

3.Speaking C#

4.Controlling Flow, Converting Types, and Handling Exception

5.Writing, Debugging, and Testing Functions

6.Building Your Own Types with Object-Oriented Programming

7.Implementing Interfaces and Inheriting Classes

8.Packaging and Distributing .NET Types

9.Working with Common .NET Types

10.Working with Files, Streams, and Serialization

11.Working with Data Using Entity Framework Core

12.Querying and Manipulating Data Using LINQ

13.Introducing Web Development Using ASP.NET Core

14.Building Websites Using ASP.NET Core Razor Pages

15.Building Websites Using the Model-View-Controller Pattern

16.Building and Consuming Web Services

17.Building User Interfaces Using Blazor

18.Conclusion

Customizing an ASP.NET Core MVC Website

Defining a custom style