Заполнение поля на Razor view

Question

Я на самом деле новичок в asp. net ядре и мало что знаю об этом. Мой вопрос. Я хочу заполнить текстовое поле в представлении Razor, когда в раскрывающемся списке выбран элемент перечисления, но не имею представления о том, как это сделать. Я искал об этом, но не нашел ничего, что мне нужно, чтобы заполнить поле «Цена» при выборе элемента. от FightClass

Просмотр

@model Airline.Models.BookingModel
@{
    ViewData["Title"] = "Buy";
}

<h2>Buy</h2>

<h4>BookingModel</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="Buy">

            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <input asp-for="FlightSkyMiles" type="hidden" value="@ViewBag.Flight.SkyMiles" />
            <div class="form-group">
                <label asp-for="FlightName" class="control-label"></label>
                <input asp-for="FlightName" value="@ViewBag.Flight.FlightName" class="form-control" readonly />
                <span asp-validation-for="FlightName" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="FlightNo" class="control-label"></label>
                <input asp-for="FlightNo" value="@ViewBag.Flight.FlightNo" class="form-control" readonly />
                <span asp-validation-for="FlightNo" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="OriginCity" class="control-label"></label>
                <input asp-for="OriginCity" value="@ViewBag.Flight.OriginCity" class="form-control" readonly />
                <span asp-validation-for="OriginCity" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="DestinationCity" class="control-label"></label>
                <input asp-for="DestinationCity" value="@ViewBag.Flight.DestinationCity" class="form-control" readonly />
                <span asp-validation-for="DestinationCity" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Departure" class="control-label"></label>
                <input asp-for="Departure" type="datetime" value="@ViewBag.Flight.Departure" class="form-control" readonly />
                <span asp-validation-for="Departure" class="text-danger"></span>
            </div>

            <div class="form-group">
                <label asp-for="Adult" class="control-label"></label>
                <input asp-for="Adult" type="text" name="seats" value="0" class="form-control" />
                <span asp-validation-for="Adult" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Children" class="control-label"></label>
                <input asp-for="Children" type="text" name="seats" value="0" class="form-control" />
                <span asp-validation-for="Children" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Senior" class="control-label"></label>
                <input asp-for="Senior" type="text" name="seats" value="0" class="form-control" />
                <span asp-validation-for="Senior" class="text-danger"></span>
            </div>

            <div class="form-group">
                <label asp-for="Travelers" class="control-label"></label>
                <input asp-for="Travelers" type="text" name="TotalSeats" class="form-control"  />
                <span asp-validation-for="Travelers" class="text-danger"></span>
            </div>

            <div class="form-group">
                <label asp-for="FlightClass" class="control-label"></label>
                <select class="form-control" asp-for="FlightClass" name="fclass" asp-items="Html.GetEnumSelectList<Classtype>()">
                    <option selected="selected" value="">Please select</option>
                </select>
                <span asp-validation-for="FlightClass" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Price" class="control-label"></label>
                <input asp-for="Price" class="form-control" readonly />
                <span asp-validation-for="Price" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="radio" name="Reservation" value="Buy" /> &nbsp;Buy &nbsp; &nbsp;
                <input type="radio" name="Reservation" value="Block" /> &nbsp;Block
                <span asp-validation-for="ReservationType" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Submit" class="btn btn-default" />
            </div>

        </form>
    </div>
</div>

<div>
    <a asp-action="Index">Back to List</a>
</div>

Если кто-нибудь может мне помочь, я буду очень благодарен

Answer 1

Вы можете установить событие onchange на выбор:

<select onchange="getPrice()" class="form-control" asp-for="FlightClass" name="fclass" asp-items="Html.GetEnumSelectList<Classtype>()">
    <option selected="selected" value="">Please select</option>
</select>

, чтобы при изменении выбора вы могли ajax позвонить на серверную сторону, чтобы узнать цену на основе Classtype:

<script>
    function getPrice() {
        $.ajax
        ({
            url: '/home/getPrice',
            type: 'post',              
            data: { 'id' : $("#FlightClass").val() },
            success: function (result) {

                $("#Price").val(result.price);
            },
            error: function () {
                alert("Error")
            }
        });

    }
</script>

На стороне контроллера вы можете запросить цену по id:

public IActionResult getPrice(string id)
{
    //get price by id 

    var price = "";
    return new JsonResult(new { price = price });
}