Hide/Display text fields in view

Asked

Viewed 1,717 times

0

I have a table with dropdownlist and editorfor fields to fill in the user request. I need to add a new feature now which is: If the user selects a specific option in the dropdowlist 'Unit' two new fields should appear in the table (Number and Reason) If this is not the selected option, the table is as is, that is, how it opens for the user. How can I do this? I can do it just by changing the view or I 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

2 answers

1

I believe you need to change only in the View itself, hiding the fields when the user select some option for the Drive 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>

  • Do I need to add something else to my view or application for it to read this Javascript code @Jkzari ? Only I put this code in the view does not change anything. Already enters the application showing the fields that should be hidden...

  • Vitor, you need the jquery library. Download it in your project by Nuget (if no longer available). This line hides the Ddls: //Hiding fields when loading page $('#Number, #Reason'). Hide(); change to $('#[dropdownlist id number], #[dropdownlist id reason]'). Hide(); to know the field id right click on it and click inspect element

  • Ok, I installed the library by Nuget, but still the script is not working. The id is right, I checked when inspecting the element. All right. What else can it be?

  • Great! It worked now! Thank you

  • this my dropdownlist I make the selection of the drive, has a ok button associated with it. By selecting it, another field that I did not put in the view called situation is also loaded via dropdownlist with the situations corresponding to the selected drive. The javascript is working fine when I select the due drive. but when clicking ok it is necessary to load the other dropdownlist, the fields disappear. How can I load them also through ok?

  • You need a dropdownlist that comes from an ajax/json? right? I don’t know exactly how to do it, I have to do something similar in my work. Search on 'dropdownlist com ajax mvc' (https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#safe=off&q=dropdownlist+com+ajax+mvc) , then I post as I did for you.

  • Okay! If you get put here too!

  • @Jkzari when you need to add other information to your answer you, edit it and add to it instead of posting a new answer. This is not a forum. A single answer should contain all the information necessary to solve the problem. Yes comments can be used to discuss the solution and come up with the best possible answer, as you did.

  • ok @bigown will do so from now on, thanks for the help.

  • @Has Pfvictor ever done the dropdownlist? I have a code working here...

  • @Jkzari made a dropdowlist but took the project again to make another change and had the same problem. I added the validation but when I click save the fields disappear and the error message does not appear, but remains on the same screen. When I uncheck the checkbox the fields should disappear too, but they’re still there. How to fix these little details?

  • Victor put the code with the changes in a new question, abç

Show 7 more comments

1

Vitor, add this line that should work: 

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

Follow 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>

Browser other questions tagged c# asp.net

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