Selectlistitem with custom attributes

Asked

Viewed 77 times

2

I created a DropDownList by the method below:

private void PopulateDropDown() {
  //Chamo o método que obtém a lista de clientes da API
  List<Models.Cliente> clientes = new Business.Cliente().Get();

  //Rotorno a lista de clientes para a view
  ViewData["Clientes"] = new SelectList(clientes, "Id", "Nome", "IdGrupoCliente");

}

Client class:

public class Cliente{
  public int Id { get; set; }
  public string Nome { get; set; }
  public int IdGrupoCliente { get; set; }
}

View:

<div class="input-group">
   <span class="input-group-addon addon-no-border">
      Selecione o cliente:
    </span>
   @Html.DropDownList("IdCliente", (SelectList)ViewData["Clientes"], new { @class = "form-control" })
</div>

I need to create a customised attribute in options of my select, but I’m not sure how best to do that. My idea was to add a data-IdGrupoCliente as in the example below:

<select class="form-control" id="IdCliente" name="IdCliente">
   <option value="1" data-IdGrupoCliente="10">Cliente Abc</option>
</select>
  • What if I made a method that was intelligent and carried the information of a standard class.?

  • They suggested to overwrite the DropDownList to predict this kind of situation, I think it’s more or less what you meant but with another method. If you want to post what you are imagining it is good to have several xD solutions

2 answers

3


You need to keep in mind that not everything can or should be written using HTML Helpers, they serve to make things easier, but in cases where you need more freedom you better choose not to use them.

Instead of using a SelectList, use a List<Cliente> simple and create the options of tag select manually through a loop.

Take an example

Customer.Cs

public class Cliente
{
    public int Id { get; set; }
    public string Nome { get; set; }
    public int IdGrupoCliente { get; set; } 
}

Homecontroller.Cs

public class HomeController : Controller
{
    private List<Cliente> _clientes = new List<Cliente>
    {
        new Cliente { Id = 1, Nome = "Julius", IdGrupoCliente = 2 },
        new Cliente { Id = 2, Nome = "Chris", IdGrupoCliente = 1 },
        new Cliente { Id = 3, Nome = "Drew", IdGrupoCliente = 2 },
        new Cliente { Id = 4, Nome = "Tonya", IdGrupoCliente = 1 },
        new Cliente { Id = 5, Nome = "Rochelle", IdGrupoCliente = 2 }
    };

    [HttpGet]
    public ActionResult Index()
    {           
        ViewData["Clientes"] = _clientes;
        return View();
    }
}

Index.cshtml

<div class="container">
   <select class="form-control" name="@Html.NameFor(model => model.IdCliente)" id="@Html.IdFor(model => model.IdCliente)">
      @foreach(var cliente in ViewData["Clientes"] as List<Sample.Cliente>)
      {
          <option data-id-grupo-cliente="@cliente.IdGrupoCliente" value="@cliente.Id">@cliente.Nome
          </option>
      }
   <select>     
</div>

See working on . NET Fiddle

2

The solution I found was to pass the list of customers through a viewData[] and create the <select> directly on View.

ViewData["Clientes"] = new Business.Cliente().Get(idDistribuidor);

I went through the client list with a for filling in the <option> with the customised attribute at each iteration:

<div class="panel-body">
 @using (Html.BeginForm("Index", "Importacao", FormMethod.Post, new { enctype = "multipart/form-data" })) {
   @Html.AntiForgeryToken()
   <div class="row">
      <div class="col-sm-5">
         <div class="form-group ">
            <div class="input-group">
               <span class="input-group-addon addon-no-border">
                  Selecione o cliente:
               </span>
               <select name="IdCliente" id="IdCliente" class="form-control">
                  <option value="-1">Selecione</option>
                  @{
           System.Collections.Generic.List<InpartSaude.Negociacao.Models.Cliente> clientes = (System.Collections.Generic.List<InpartSaude.Negociacao.Models.Cliente>)ViewData["Clientes"];
                      for (int i = 0; i < clientes.Count; i++) {
                         <option value="@clientes[i].Id" data-IdGrupoCliente="@cliente[i].IdGrupoCliente">
                            @clientes[i].Nome
                         </option>
                      }
                   }
                </select>
             </div>
          </div>
       </div>
    </div>
 }
</div>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.