View Field when Selecting Dropdownlist and save

Question

I have the following scenario: in a form I have a field called Carga-Horaria, which is a Dropdownlist with a list of hourly loads. In this drop an option called another. When selected the option "Other" opens a new field to be typed this new workload.

I managed to do this normally with Javascript in my form.

The point is, I’d like it to be saved in the bank, rather than having a column called, "Other Load-Time," I’d like to save this data in the column Carga-Horaria existing.

<div class="form-group">
    @Html.LabelFor(model => model.Nr_CHoraria, "Carga Horaria Semanal", new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.DropDownListFor(model => model.Nr_CHoraria, new List<SelectListItem>
             {
                 new SelectListItem() {Text = "12", Value="12"},
                 new SelectListItem() {Text = "20", Value="20"},
                 new SelectListItem() {Text = "24", Value="24"},
                 new SelectListItem() {Text = "30", Value="30"},
                 new SelectListItem() {Text = "36", Value="36"},
                 new SelectListItem() {Text = "40", Value="40"},
                 new SelectListItem() {Text = "44", Value="44"},
                 new SelectListItem() {Text = "Outra", Value="0"}
             }, new { @class = "form-control", @id = "ch" })
        @Html.ValidationMessageFor(model => model.Nr_CHoraria)
    </div>
</div>

<div class="form-group" style="display:none" id="div_dch">
    @Html.LabelFor(model => model.Nr_CHoraria, "Digite a Carga Horaria", new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.TextBoxFor(model => model.Nr_CHoraria, new { @class = "chs", @id = "dch" })
        @Html.ValidationMessageFor(model => model.Nr_CHoraria)
    </div>
</div>

<script type="text/javascript">
    $(function () {
        $('#ch').change(function () {
            var value = $(this).val();
            if (value == '0') {
                $('#div_dch').show();

            } else {
                $('#div_dch').hide();
            }
        });
    });

</script>

Answer 1

The correct thing is to separate the names of the suggested load fields and another workload. Something like this:

<div class="form-group">
    @Html.LabelFor(model => model.CargaHoraria, "Carga Horaria Semanal", new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.DropDownListFor(model => model.CargaHoraria, new List<SelectListItem>
             {
                 new SelectListItem() {Text = "12", Value="12"},
                 new SelectListItem() {Text = "20", Value="20"},
                 new SelectListItem() {Text = "24", Value="24"},
                 new SelectListItem() {Text = "30", Value="30"},
                 new SelectListItem() {Text = "36", Value="36"},
                 new SelectListItem() {Text = "40", Value="40"},
                 new SelectListItem() {Text = "44", Value="44"},
                 new SelectListItem() {Text = "Outra", Value="0"}
             }, new { @class = "form-control", @id = "ch" })
        @Html.ValidationMessageFor(model => model.CargaHoraria)
    </div>
</div>

<div class="form-group" style="display:none" id="div_dch">
    @Html.LabelFor(model => model.OutraCargaHoraria, "Digite a Carga Horaria", new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.TextBoxFor(model => model.OutraCargaHoraria, new { @class = "chs", @id = "dch" })
        @Html.ValidationMessageFor(model => model.OutraCargaHoraria)
    </div>
</div>

What I would do in your place is a Viewmodel:

public class CargaHorariaViewModel
{
    public int CargaHoraria { get; set; }
    public int? OutraCargaHoraria { get; set; }
}

The Controller would receive this Viewmodel:

[HttpPost]
public ActionResult CriarCargaHoraria(CargaHorariaViewModel viewModel)
{
    if (ModelState.IsValid)
    {
        var cargaHoraria = new CargaHoraria();
        if (viewModel.CargaHoraria > 0)
            cargaHoraria.Nr_CHoraria = viewModel.CargaHoraria;
        else {
            if (viewModel.OutraCargaHoraria == null) {
                ModelState.AddModelError("OutraCargaHoraria", "Se outra carga horária será informada, o valor de Outra Carga Informada não pode ser nulo. ");
                return View(viewModel);
            }

            cargaHoraria.Nr_CHoraria = (int)viewModel.OutraCargaHoraria;
        }

        // Coloque o resto da lógica aqui.
    }

    return View(viewModel);
}