Evgeniy175 Evgeniy175 - 25 days ago 6
ASP.NET (C#) Question

ASP.net Core: <select> for many entities

I have a model of the Aircraft and FleetItem model:

Aircraft.cs:

public class Aircraft : IDbEntity
{
[Key]
public int Id { get; set; }

public string Type { get; set; }

public int? MaxAltitude { get; set; }

public int? MaxSpeed { get; set; }

public int? NOfFirstClassSeats { get; set; }

public int? NOfBusinessClassSeats { get; set; }

public int? NOfEconomyClassSeats { get; set; }
}


FleetItem.cs:

public class FleetItem : IDbEntity
{
[Key]
public int Id { get; set; }

public string RegNumber { get; set; }

public int AirplaneId { get; set; }

[ForeignKey("AirplaneId")]
public virtual Aircraft Airplane { get; set; }
}


So, actually - FleetItem contains foreign key to Aircraft and registration number of the plane (regnumber is unique).

View Index.cshtml that I have now:

@model Core.Models.FleetItem
@{
ViewData["Title"] = $"Add new plane to fleet";
}

<h2>@ViewData["Title"]</h2>

<form method="post" asp-controller="Fleet" asp-action="Add" asp-antiforgery="true">
<!-- todo add plane select -->

<div class="form-group">
<label asp-for="RegNumber" class="control-label">Registration number:</label>
<input asp-for="RegNumber" class="form-control" type="text" />
<span asp-validation-for="RegNumber"></span>
</div>
<div class="form-group">
<input type="submit" value="Add" class="btn btn-default" />
</div>
</form>


I need to link FleetItem with Aircraft.

Solution that I found: select all airplanes and pass they into view and output it using
<select>
.

This solution suitable when I have a few Aircraft. But, if I have 1000+ aircrafts? It's will be too big
<select>
list. So, i think about any search that returns Aircraft. It will be awesome. But, how to implement this? I think that solution somewhere exists but can't found it.

Or you can suggest best solution?

Answer

In terms of user experience the best option is to add a search box that will keep filtering your Aircraft on the flight, i.e. it will issue a request to a server to show say top 10 elements. This is a common approach to implement such a functionality.

I am not sure if you can easily implement in directly in the MVC model, but if you have some client-side framework, you can use it to achieve this. E.g. you can use popular select2 control that is capable of doing such things. As it's name suggests it's kind of an improvement over ordinary select to add all that stuff that you need.

Of course you could always implement it yourself for a simple case with ordinary input and a div popup.

P.S. You can google a little how to connect select2 with MVC e.g. here. But generally it should not be a big deal since it's just some AJAX request in web api that you need to support with the data + some client side script to connect it to your model.