Je souhaite concevoir un formulaire dans le noyau asp.net, doté d'une liste déroulante. Je souhaite lier un modèle à cette liste déroulante que toutes les colonnes de ce modèle affichent dans la liste déroulante, et l'utilisateur peut sélectionner une ligne et filtrer les résultats.

Existe-t-il cette capacité dans asp.net core ou css ou js ?

C'est mon modèle : Company.cs

public class Company
{
   public int Id { get; set; }

   public string CompanyCode { get; set; }

   public string CompanyName { get; set; }

   public string SubCompanyName { get; set; }
 }

C'est ma vue formulaire : Insert.cshtml

<form asp-action="Insert">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <div class="form-group">
        <input asp-for="ErrorReportCode" class="form-control" , placeholder="RequestCode" id="txtErrorReportCode" />
        <span asp-validation-for="ErrorReportCode" class="text-danger"></span>
    </div>
    <div class="form-group">
        <input asp-for="ErrorReportDateReport" class="form-control datePicker" type="text" id="txtErrorReportDateReport" placeholder="RequestDate" />
        <span asp-validation-for="ErrorReportDateReport" class="text-danger"></span>
    </div>

    <div class="form-group">
        @Html.DropDownListFor< ????? >

    </div> 
    <div class="form-group">
        <input type="submit" value="Insert" class="btn-red pull-left" />
    </div>
</form>

Je souhaite avoir une liste déroulante dans mon formulaire, cet utilisateur peut sélectionner une entreprise en fonction de ses spécifications, telles que CompanyCode, CompanyName et SubcompanyName. En d'autres termes, je veux une liste déroulante avec plusieurs colonnes.

De plus, lorsque l'utilisateur a tapé un mot dans la zone de texte de cette liste déroulante, les résultats d'affichage dans le tableau de l'entreprise changent de manière dynamique. En fait, les données vont filtrer.

somthing like this Image

1
NedaM 15 nov. 2020 à 11:33

1 réponse

Meilleure réponse

Tout d'abord, la valeur de la liste déroulante ne peut pas lier un modèle. Je pense que lier l'ID de l'entreprise est un bon choix. Si vous souhaitez afficher plusieurs colonnes, vous pouvez les regrouper dans la valeur de l'option. Voici une démo (j'utilise de fausses données pour tester):

Action

public IActionResult Insert() {
            List<Company> l = new List<Company> { new Company {  Id=1, CompanyCode="c1", CompanyName="company1", SubCompanyName="subcompany1"},
                new Company { Id = 2, CompanyCode = "c2", CompanyName = "company2", SubCompanyName = "subcompany2" },
            new Company {  Id=3, CompanyCode="c3", CompanyName="company3", SubCompanyName="subcompany3"}};
            List<SelectListItem> l1 = new List<SelectListItem>();
            foreach(Company c in l) {    
                l1.Add(new SelectListItem { Text = c.CompanyCode + " | " + c.CompanyName + " | " + c.SubCompanyName, Value = c.Id + "" });
            }
            ViewBag.Select = l1;
            return View();
        }

Vue:

 <input type="text" list="cars" />
            <datalist id="cars">
                @foreach (var i in ViewBag.Select)
                {
                    <option id=@i.Value>@i.Text</option>
                }
            </datalist>

Résultat:

enter image description here

Si vous préférez un meilleur style, vous pouvez rechercher un troisième plugin. Mettre à jour (ajouter <option>CompanyCode | CompanyName | SubCompanyName </option> dans la liste de données) :

<input type="text" list="cars" />
            <datalist id="cars">
                <option>CompanyCode | CompanyName | SubCompanyName </option>
                @foreach (var i in ViewBag.Select)
                {
                    <option id=@i.Value>@i.Text</option>
                }

            </datalist>

Résultat: entrez la description de l'image ici

Mise à jour2:

Vous pouvez également utiliser un espace réservé : view :

<input type="text" list="cars" placeholder="CompanyCode | CompanyName | SubCompanyName"  style="width:400px"/>
            <datalist id="cars">
                @foreach (var i in ViewBag.Select)
                {
                    <option id=@i.Value>@i.Text</option>
                }
            </datalist>

Résultat:

enter image description here

1
Yiyi You 16 nov. 2020 à 09:32