@ModelType VehicleMaintenance.Web.HomeViewModel
@Code
    ViewData("Title") = "Vehicles List"
End Code

@If Not IsNothing(TempData("Message")) Then
    @<div style="margin: 10px 0 10px 0">@TempData("Message")</div>
End If

<a href="@Url.Action("CreateVehicle", "Vehicle")">Create Vehicle</a>

<div class="row">
    <div class="col-md-12">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>Vehicles List</th>
                </tr>
            </thead>
            <tbody>
                @For Each item In Model.Vehicles
                    @<tr>
                        <td>@item</td>
                        <td>
                            <button type="button" class="btn btn-primary view-info" data-toggle="modal" data-number="@item">
                                View info
                            </button>
                        </td>
                    </tr>
                Next
            </tbody>
        </table>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="VehicleModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Vehicle Info</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group row">
                    <label for="PlateNumber" class="col-sm-4 col-form-label" required>Plate number</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" id="PlateNumber" disabled />
                    </div>
                </div>
                <div class="form-group row">
                    <label for="VIN" class="col-sm-4 col-form-label">VIN</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" id="VIN" disabled />
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $("body").on("click", ".view-info", function (e) {
            e.preventDefault();

            var number = $(this).data("number");
            if (number !== "") {
                $.ajax({
                    url: "@Request.Url" + "Vehicle/GetVehicleInfo",
                    async: true,
                    data: { number: number },
                    dataType: "JSON",
                    cache: false,
                   success: function (data) {
                        $("#PlateNumber").val(data.Number);
                        $("#VIN").val(data.VIN);
                        $("#VehicleModal").modal("show");
                    },
                    error: function () {
                        $("#PlateNumber").val("no data");
                        $("#VIN").val("no data");
                        $("#VehicleModal").modal("show");
                    }
                });
            }
        });
    });
</script>

.NET Framework

Project Request

ProjectC

Vehicle Maintenance

Movie Navigator

Customers Exchange

ATM

.NET Core

Mail Daemon

Custom

Buns of code

PHP

Mediabox

Loan Castle

Content Management

Laravel

Phone Check

Frontend

Forex Wall

Business projects

Certification Center

Amerikas Auto

Pet projects

Geolocation Assistant

Web Dynamics

Blackball

Good old times

DOS Clock

BrainOut

Airport Administrator

Atomizer

Vehicle Maintenance