In this module we are going add thumbnail images to the Vehicle rows in the results table.
Preparing for the Module
The first thing we’ll need to do is place the vehicle images somewhere under the wwwroot folder. So, download the zip file containing the images from the following link to your downloads folder.
Add the images to the wwwroot folder
Create a new folder under the wwwroot folder called images. Extract the zip file Chapt03-Mod16-vehicles-images.zip in your downloads folder.
Double click on the extracted file named Chapt03-Mod16-vehicles-images (without the .zip extension) in your downloads file to open it. You may have to double click on another subfolder with the same name to get to the contents of the extracted file. Next, copy the three folders named cars, trucks, and jeeps from the extracted contents in the downloads folder to the newly created images folder under the wwwroot folder in the project using windows explorer
The vehicle images should now show up in Solution Explorer under the wwwroot/images folder.
Remove the VIN column
Currently, when we run the application, the first column in the results table is the Vehicle’s VIN number. This isn’t a piece of information a user is likely to find important when searching for a vehicle to buy. The VIN number will be much more useful on the details page we are going to build in a later module. So, we are going to replace that column with a thumbnail image of each vehicle which will be much more useful and a lot more fun to look at.
Add the ImagePath property to the Vehicle model
To show thumbnail images for vehicle’s, each Vehicle entity will have to know where its image is stored. Add the ImagePath property to the Vehicle class to store this information with the modified code shown below.
FredsCars\Models\Vehicle.cs
... existing code ...
public class Vehicle
{
public int Id { get; set; }
public Status Status { get; set; }
public string Year { get; set; } = string.Empty;
public string Make { get; set; } = string.Empty;
public string Model { get; set; } = string.Empty;
public string Color { get; set; } = string.Empty;
[Column(TypeName = "decimal(9, 2)")]
[DataType(DataType.Currency)]
public decimal Price { get; set; }
public string VIN { get; set; } = string.Empty;
public string? ImagePath { get; set; } = string.Empty;
... existing code ...In the above code we make the new ImagePath property nullable just in case no image is provided.
Add the ImagePath Migration
Since we have modified the model, we need to create a migration and update the database so that it will reflect the model’s changes.
Open up a command window and navigate to the FredsCars project folder (the one with the fredscars.csproj file in it) and run the following commands.
dotnet ef migrations add ImagePath
dotnet ef database updateThe new ImagePath property should now show up in the database in the Vehicle table.
Modify the SeedData class
The next thing we need to do is modify the seeding routing to populate the ImagePath property for all of our initial test data.
Modify the SeedData class with the code shown below.
FredsCars\Models\SeedData.cs
... existing code ...
// Add Vehicle records
// if no Vehicle data exists yet.
if (!context.Vehicles.Any())
{
// Reset Identity seed value to 1
context.Database
.ExecuteSqlRaw("DBCC CHECKIDENT ('Vehicle', RESEED, 0)");
context.Vehicles.AddRange(
// Cars
new Vehicle
{
Status = Status.New,
Year = "2021",
Make = "Dodge",
Model = "Challenger",
Color = "Frostbite",
Price = 64164,
VIN = "2C3CDZFJ8MH631199",
VehicleTypeId = carTypeId,
ImagePath = "/images/cars/car1.webp"
},
new Vehicle
{
Status = Status.Used,
Year = "2020",
Make = "Ford",
Model = "Escape",
Color = "Oxford White",
Price = 22999,
VIN = "1FMCU0F63LUC25826",
VehicleTypeId = carTypeId,
ImagePath = "/images/cars/car2.webp"
},
new Vehicle
{
Status = Status.New,
Year = "2021",
Make = "Dodge",
Model = "Durange",
Color = "Black",
Price = 50557,
VIN = "1C4RDJDG5MC837730",
VehicleTypeId = carTypeId,
ImagePath = "/images/cars/car3.webp"
},
new Vehicle
{
Status = Status.New,
Year = "2021",
Make = "Nissan",
Model = "Niro",
Color = "Blue",
Price = 24960,
VIN = "2XYZT67JTF24AZG856",
VehicleTypeId = carTypeId,
ImagePath = "/images/cars/Car4.png"
},
new Vehicle
{
Status = Status.New,
Year = "2021",
Make = "Kia",
Model = "Stinger",
Color = "Gray",
Price = 36090,
VIN = "6FG146B89624AZ7952",
VehicleTypeId = carTypeId,
ImagePath = "/images/cars/Car5.png"
},
new Vehicle
{
Status = Status.New,
Year = "2021",
Make = "Kia",
Model = "Stinger",
Color = "Gray",
Price = 36090,
VIN = "6FG146B89624AZ7952",
VehicleTypeId = carTypeId,
ImagePath = "/images/cars/Car6.png"
},
// Trucks
new Vehicle
{
Status = Status.New,
Year = "2022",
Make = "Ram",
Model = "Crew Cab",
Color = "Black",
Price = 68400,
VIN = "3C6UR5DL8NG157035",
VehicleTypeId = truckTypeId,
ImagePath = "/images/trucks/truck1.webp"
},
new Vehicle
{
Status = Status.Used,
Year = "2017",
Make = "Ram",
Model = "Crew Cab",
Color = "Red",
Price = 33000,
VIN = "1C6RR7PT0HS814596",
VehicleTypeId = truckTypeId,
ImagePath = "/images/trucks/truck2.webp"
},
// Jeeps
new Vehicle
{
Status = Status.New,
Year = "2022",
Make = "Jeep",
Model = "Compass",
Color = "White",
Price = 34980,
VIN = "3C4NJDFB5NT114024",
VehicleTypeId = jeepTypeId,
ImagePath = "/images/jeeps/jeep1.webp"
},
new Vehicle
{
Status = Status.New,
Year = "2022",
Make = "Jeep",
Model = "Compass",
Color = "Red",
Price = 39275,
VIN = "3C4NJDCB1NT118172",
VehicleTypeId = jeepTypeId,
ImagePath = "/images/jeeps/jeep2.webp"
},
new Vehicle
{
Status = Status.New,
Year = "2022",
Make = "Jeep",
Model = "Grand Cherokee",
Color = "Pearlcoat",
Price = 53575,
VIN = "1C4RJKBG5M8201121",
VehicleTypeId = jeepTypeId,
ImagePath = "/images/jeeps/jeep3.webp"
},
new Vehicle
{
Status = Status.New,
Year = "2021",
Make = "Jeep",
Model = "Wrangler Sport S",
Color = "Green",
Price = 40940,
VIN = "1C4GJXAN0MW856433",
VehicleTypeId = jeepTypeId,
ImagePath = "/images/jeeps/jeep4.webp"
}
);
context.SaveChanges();
... existing code ...Delete the Vehicle data from the Vehicle table using SSOX (SQL Server Object Explorer) in Visual Studio and restart the application. The seeding routine will then reseed the Vehicle table with our test data this time including the ImagePath.
Once you restart the application and navigate to it in a browser you should see results similar to the screenshot shown below.
Now the thumbnail images show as the first column in the results table. This is much more nicer to look at then a VIN number don’t you think?
Comparing Dynamic Results to Static HTML
Now we have completed the list feature. But, I hope you haven’t forgotten how in chapter one we had to painstakingly craft the HTML for each Vehicle. Here in our first dynamic framework, MVC, all an administrator would have to do is enter another row of vehicle data into the database and that new Vehicle would show up in the results. We would not have to touch the HTML or modify any component’s C# code.
What’s Next
Now that we have completed the list feature, it would be nice to let the user sort the data and page through the results. In the next module we will impliment the paging and sorting features.