Populating field on Razor view - asp.net-core

Question

I'm actually new in asp.net core and don't know much about it
My question is.
I want to populate a text field on Razor view when an enum item is selected from dropdown list but have no idea about how to do it
I have searched about this but didn't find any thing
I want to populate Price field when item is selected from FightClass
View
#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" /> Buy
<input type="radio" name="Reservation" value="Block" /> 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>
If anyone can help me I will be very thankful

Answer 1

You can set onchange event to select :
<select onchange="getPrice()" class="form-control" asp-for="FlightClass" name="fclass" asp-items="Html.GetEnumSelectList<Classtype>()">
<option selected="selected" value="">Please select</option>
</select>
So that when select changed , you can make ajax call to server side to get price based on 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>
On controller side , you can query the price by id :
public IActionResult getPrice(string id)
{
//get price by id
var price = "";
return new JsonResult(new { price = price });
}