Hide / Show text fields in view

Question

Hide / Show text fields in view

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

I have a table with dropdownlist and editorfor fields to fill the user's request. I need to add a new functionality now that is: If the user selects a specific option in the dropdowlist 'Drive' two new fields should appear in the table (Number and Reason) If this is not the option selected, the table stays as is, as it opens to the user. How can I do this? Can I do just changing the view or need to change something in the control too?

 <div class="title">
    Selecione a Unidade:</div>
<div>@Html.DropDownList("Unidade", string.Empty)
    <button type="submit">
        Ok</button>  // Após clique nesse ok com a tal unidade selecionada ou simplesmente selecionando a determinada opção, os campos 'Numero' e 'Motivo' devem aparecer para preenchimento obrigatório.
</div>
<table>
    <tr>
        <th> Nome </th>
        <th> Data </th>
    </tr>
    <tr>
        <td>@Html.DropDownList("Nome", string.Empty)
        </td>
        <td>@Html.EditorFor(x => x.Date)
        </td>
        <td>@Html.EditorFor(x => x.Numero) // Deve ficar oculto a menos q tal opção..
        </td>
        <td>@Html.EditorFor(x => x.Motivo) // Deve ficar oculto a menos q tal opção seja selecionada
        </td>
    </tr>
</table>
<div class="formfooter">
    <button type="submit">
        Salvar</button></div>
</div>


    public ActionResult AddItems(RequestItem item)
    {
        SetTempData();
        item.Solicitacao_Id = requestId;

        if (_data.RequestItems.IsValid(item))
        {
            _data.RequestItems.Insert(item);

            _data.Save();
            return RedirectToAction("ViewItems");
        }

        InitializeData(null, null, null, item.Unidade_Id);
        return View(item);

    }

c# asp.net

asked by anonymous 04.09.2014 / 16:30

2 answers

How popular DropDownListFor with information from a foreign key? PHP Standardization Fig Namespaces

score 1 · Answer 1

I believe I need to change only in the same View, hiding the fields when the user select any option for the Unit DDL

<script>
$(document).ready(function(){

   //Escondendo campos quando carregar página
   $('#Numero, #Motivo').hide();

   // Exibindo/ Escondendo conforme valor de Unidade
   $('#Unidade').change(function(){
        if (this.value == [valor para habilitar Numero e Motivo]){
            $('#Numero, #Motivo').show();
        }else{
            $('#Numero, #Motivo').show();
        }
   });
});
</script>

score 1 · Answer 2

Vitor, add this line that should work:

@Scripts.Render("~/bundles/jquery")

Here is the code I used to test:

<div class="title">
    Selecione a Unidade:

    <select id="Unidade">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
    </select>
</div>

<p class="ocultar"> Número: @Html.EditorFor(x => x.Numero) // Deve ficar oculto a menos q tal opção.. </p>
<p class="ocultar"> Motivo: @Html.EditorFor(x => x.Motivo) // Deve ficar oculto a menos q tal opção seja selecionada </p>

<br/>

<button type="submit">
        Salvar
</button>

@Scripts.Render("~/bundles/jquery")

<script language="Javascript">
    $(document).ready(function () {

        //Escondendo campos quando carregar página
        $('.ocultar').hide();

        // Exibindo/ Escondendo conforme valor de Unidade
        $('#Unidade').change(function () {
            if (this.value == 1) {
                $('.ocultar').hide();
                $('#Numero, #Motivo').val('');
            } else {
                $('.ocultar').show();
            }
        });
    });
</script>