How to manipulate an IQueryable with Linq in ASP.NET Core

Question

I want to access through a Javascript PopOver event (mouse over) a list of cities in a given country by raising a window as follows

For this in the list of countries I have the following code that executes the following method in the CountryController

<td>
<a href="#" data-toggle="popover" data-trigger="hover" id="@item.Id">@item.NumberCities</a>

 </td>

      <script>
            $(document).ready(function () {
                $('[data-toggle="popover"]').popover({
                    title: setData,
                    html: true,
                    placement: 'right'
                });

                function setData($id)
                {
                    var set_data = '';
                    var element = $(this);
                    var id = element.attr("id");
                    $.ajax({
                        url: "/Countries/CitiesDetailsModal/" + id,
                        method: "post",
                        async: false,
                        data: { id: id },
                        success: function (data)
                        {
                            set_data = data;
                        }
                    });

                    return set_data;

                }
            });
        </script>

CountryController.CS:

 public ActionResult CitiesDetailsModal(int? id)
 {
      var paises = countryRepository.GetCountriesWithCities();

      return View();
 }

The problem is that my GetCountriesWithCities () method returns an IQueryable and I cannot manipulate the countries variable with Linq

The result of my countries variable is ...

As can be seen above, this method lists the countries and within them the cities that correspond

But how can I access them? How can I pass to the View the List filtered by the CountryId that I receive as a parameter in the CitiesDetailsModal () method?

My Modal view currently receives a City model and I want to show it with the following CitiesDetailsModal.CSHTML format

@model IEnumerable<SoftwareCore.Common.Models.City>

@{
    ViewData["Title"] = "CityNumbers";
}

<h4>Citys</h4>

<div class="container">

    @foreach (var item in Model)
    {      
        <p><label>Nombre:</label> @item.Name)</p>      
    }

</div>

Where my models at play are:

Country.CS:

public class Country : IEntity { public int Id { get; set; }

[Required]
[Display(Name = "Country")]
[MaxLength(50, ErrorMessage = "The field {0} only can contain {1} characters length.")]
public string Name { get; set; }

public ICollection<City> Cities { get; set; }

[Display(Name = "# Cities")]
public int NumberCities { get { return this.Cities == null ? 0 : this.Cities.Count; } }

}

City.CS:

public class City : IEntity
    {
        public int Id { get; set; }

        [Required]
        [Display(Name = "City")]
        [MaxLength(50, ErrorMessage = "el campo {0} solo puede contener {1} caracteres de largo.")]
        public string Name { get; set; }
    }

How can I display the list of cities from my CitiesDetailsModal () method?

Do I have to change my method GetCountriesWithCities () ?? Or can I drive via Linq an IQueryable?

  public IQueryable GetCountriesWithCities()
  {
     return this.context.Countries.Include(c => c.Cities).OrderBy(c => c.Name);
  }

Any help for me?

Answer 1

So you query for all countries, but want all the cities for the selected country instead?

Then filter and project those, materialize them into a list and send that to your view:

var allCities = paises.Where(c => c.Id == id.Value)
                      .SelectMany(c => c.Cities).ToList();
return View(allCities);

In order for this to work though, your IQueryable-returning method should be returning IQueryable<Country>.