Загрузка данных на страницу по мере выбора пользователем вариантов asp net core C#

Проект asp net core 3.1, Entity framework core 3. Проект с представлениями mvc.

Есть 3 сущности - Friend, City, Street:

[Table("friend")]
    public partial class Friend
    {
        [Key]
        [Column("Id_Friend")]
        public long IdFriend { get; set; }
        [Column("Name_", TypeName = "varchar(256)")]
        public string Name { get; set; }
        [Column("City_id")]
        public int? CityId { get; set; }
        [Column("Street_id")]
        public int? StreetId { get; set; }
        [Column("User_id")]
        public long? UserId { get; set; }

        [ForeignKey(nameof(CityId))]
        [InverseProperty("Friends")]
        public virtual City City { get; set; }
        [ForeignKey(nameof(StreetId))]
        [InverseProperty("Friends")]
        public virtual Street Street { get; set; }
        [ForeignKey(nameof(UserId))]
        [InverseProperty("Friends")]
        public virtual User User { get; set; }
    }


[Table("city")]
    public partial class City
    {
        public City()
        {
            Friends = new HashSet<Friend>();
            Streets = new HashSet<Street>();
        }

        [Key]
        [Column("Id_City")]
        public int IdCity { get; set; }
        [Column(TypeName = "varchar(256)")]
        public string Name { get; set; }

        [InverseProperty("City")]
        public virtual ICollection<Friend> Friends { get; set; }
        [InverseProperty("City")]
        public virtual ICollection<Street> Streets { get; set; }
    }


[Table("street")]
    public partial class Street
    {
        public Street()
        {
            Friends = new HashSet<Friend>();
            Houses = new HashSet<House>();
        }

        [Key]
        [Column("Id_Street")]
        public int IdStreet { get; set; }
        [Column(TypeName = "varchar(256)")]
        public string Name { get; set; }
        [Column("City_id")]
        public int? CityId { get; set; }

        [ForeignKey(nameof(CityId))]
        [InverseProperty("Streets")]
        public virtual City City { get; set; }
        [InverseProperty("Street")]
        public virtual ICollection<Friend> Friends { get; set; }
        [InverseProperty("Street")]
        public virtual ICollection<House> Houses { get; set; }
    }

По плану пользователь добавляет друга (Friend) и вводит данные о нем - имя, город, улицу, номер дома.

Как можно сделать так, чтобы на странице представления при выборе пользователем города в поле с улицей подгружался список улиц, относящихся к данному городу - из коллекции ICollection Streets объекта сущности Friends, а не весь список улиц?

Страница представления:

<h4>Friend</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="Edit">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <input type="hidden" asp-for="IdFriend" />
            <div class="form-group">
                <label asp-for="Name" class="control-label"></label>
                <input asp-for="Name" class="form-control" />
                <span asp-validation-for="Name" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="CityId" class="control-label"></label>
                <select asp-for="CityId" class="form-control" asp-items="ViewBag.CityId"></select>
                <span asp-validation-for="CityId" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="StreetId" class="control-label"></label>
                <select asp-for="StreetId" class="form-control" asp-items="ViewBag.StreetId"></select>
                <span asp-validation-for="StreetId" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="HouseId" class="control-label"></label>
                <select asp-for="HouseId" class="form-control" asp-items="ViewBag.HouseId"></select>
                <span asp-validation-for="HouseId" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="UserId" class="control-label"></label>
                <select asp-for="UserId" class="form-control" asp-items="ViewBag.UserId"></select>
                <span asp-validation-for="UserId" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Save" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

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

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}