How do I perform select list list from the view for the Controller?

Question

I have the following code in my view:

    @using (Html.BeginForm("DataAniv", "Mailing", FormMethod.Post))
{
    <div class="form-group">
        <label for="sel1">Selecione o mês:</label>
        <select class="form-control" id="sel1">
            <option value="Janeiro">Janeiro</option>
            <option value="Fevereiro">Fevereiro</option>
            <option value="Março">Março</option>
            <option value="Abril">Abril</option>
            <option value="Maio">Maio</option>
            <option value="Junho">Junho</option>
            <option value="Julho">Julho</option>
            <option value="Agosto">Agosto</option>
            <option value="Setembro">Setembro</option>
            <option value="Outubro">Outubro</option>
            <option value="Novembro">Novembro</option>
            <option value="Dezembro">Dezembro</option>
        </select>
    </div>
    <input class="btn btn-primary" type="submit" value="Gerar">
}

The idea is that once the user makes a selection on this list, "value" is sent to the controller that will execute a logic. However, no matter which way I try, the form always gives the Submit with null value. Is it possible for the code to work this way? Or I must use Javascript or @Html.Dropdownlistfor?

Answer 1

To receive the value of your select in Controller, you need to declare the attribute name. The id attribute has "only" usefulness for javascript and css, if the input does not have a name defined it will not be included in the Formdata to be posted to the server.

<select class="form-control" id="sel1" name="sel1">

See the example below:

$("#forumlario").on('submit', function() {

  var formData = new FormData(document.forms[0]);

  for (var pair of formData.entries()) {
    console.log('Input:"'+ pair[0] + '", Valor "' + pair[1]+"'");
  }

  return false;

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" id="forumlario">
  <input type="text" id="Campo1" name="CampoName" value="campo com name" />  
  <input type="text" id="Campo3" value="campo sem name" />
  <br>
          <select class="form-control" id="sel1" name="sel1">
            <option value="Janeiro">Janeiro</option>
            <option value="Fevereiro">Fevereiro</option>
            <option value="Março">Março</option>
            <option value="Abril">Abril</option>
            <option value="Maio">Maio</option>
            <option value="Junho">Junho</option>
            <option value="Julho">Julho</option>
            <option value="Agosto">Agosto</option>
            <option value="Setembro">Setembro</option>
            <option value="Outubro">Outubro</option>
            <option value="Novembro">Novembro</option>
            <option value="Dezembro">Dezembro</option>
        </select>
  <br>
  <button type="submit">Enviar</button>

</form>