@using MVCWebApp.Models
@model List<Car> // assigns the Model for the View and indicates the data-type of the Model.
@*
Alternative import statement for the View's
Model (collection of Cars),
which would allow other types of
collections to be passed to the View.
@model IEnumerable<Car>
*@
@{
Layout = null;
ViewData["Title"] = "Car Inventory - Strongly Typed View";
/*
* This example demonstrates using a Strongly-Typed View to display a collection of Cars.
* The controller passes the collection of
Car objects to this View using the View Model approach.
*
* This View is considered a Strongly-Typed View because it has a Model class
* assigned to it.
Views that have a Model assigned to it can retrieve data using the
"Model" keyword
* within the
View's template HTML code. This also requires the Controller to pass the model object
* to the View using the View()
method.
*
* This View uses three separate Controller
methods to handle the processing of this page.
* The Controller's "DisplayCarInventory" method is used to query the
database, create a collection of Cars,
* and pass the collection of Cars to the
View when requesting it via the View() method. Once
the View is passed
* a Model object,
it can use it to generate the HTML content for the page before it is delivered
to the client.
*
* The View uses the Controller's "SearchByMake" method to process the HTML form that is
used
* to perform a
search based on the user input for make. The form uses HTTP Post to submit the
* form data to
the Controller's method.
*
* The View uses the Controller's "ViewCarDetails" method to process the clicking of a
hyperlink to get
* more detailed
information for the Car. The hyperlink is setup to request the Controller's ViewCarDetails, which delivers a View
* contain the
specific car's detailed information. This is accomplished by dynamically
generating a hyperlink for each Car
* that contains a
route parameter value that can be used in processing the request. The hyperlink
generated for each Car contains
* the car's VIN
number as the hyperlink's route parameter. The hyperlink uses a TagHelper to indicate the Controller,
* the Controller
method to execute, and the route parameter. See the Razor template code below
on how to implement this.
*/
}
<!DOCTYPE html>
<html>
<head>
<title>Car Inventory</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h1>@ViewData["Title"]</h1>
<br />
<br />
<form asp-controller="Cars" asp-action="SearchByMake" method="POST">
<input id="make" name="make" type="text" />
<input id="btnSubmit" name="btnSubmit" type="submit" value="Search" />
</form>
<hr />
<table class="table">
<thead>
<tr>
<th>Make:</th>
<th>Model:</th>
<th>Year:</th>
<th>Value:</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (Car car in Model)
{
<tr>
@* <td>
<img
src="@car.ImageUrl"
class="img-fluid img-thumbnail"
/>
</td> *@
<td>
@car.Make
</td>
<td>
@car.Model
</td>
<td>
@car.Year
</td>
<td>
@car.Value.ToString("C2")
</td>
<td>
<ul class="list-inline">
@*
The View
Details hyperlink uses the Tag Helper to request processing from a
specific
Controller's action method and passes input data to the method using a route
parameter.
+
asp-controller attribute is used to indicate the Controller that will handle
the request.
+ asp-action attribute indicates the method inside the
Controller to execute.
+ asp-route attribute indicates the route parameter name and
value passed to the method.
*@
<li><a asp-controller="Cars" asp-action="ViewCarDetails" asp-route-vin="@car.VIN"> View Details </a> |</li>
<li><a asp-controller="Cars" asp-action="EditCar" asp-route-vin="@car.VIN"> Edit Car </a> |</li>
<li><a asp-controller="Cars" asp-action="DeleteCar" asp-route-vin="@car.VIN"> Delete Car </a> </li>
</ul>
</td>
</tr>
}
</tbody>
</table>
</body>
</html>