0

I would like a form containing criteria fields. These criteria can be of type "affaire" or "suite". For this choice, I use a dropdownlist (see screenshot below). Based on this type, I would like to display only specific criteria fields.

enter image description here

For the type "affaire", I have the following criteria:

  • Statut affaire
  • Libellé affaire
  • Numéro d'affaire
  • Titre de l'affaire
  • Note de l'affaire

For the type "suite", I have the following criteria:

  • Statut suite
  • Libellé suite
  • Numéro de suite
  • Titre de la suite
  • Note de la suite

At this moment, I only display "affaire" criteria fields in my form. Something like this:

@using (Html.BeginForm("SearchAffaires", "Search", FormMethod.Post)) { 

    @Html.LabelFor(m => Model.SearchType)
    @Html.DropDownListFor(m => Model.SearchType, Model.Type)

    @Html.LabelFor(m => Model.SearchCriteriaAffaire.IdAffaire)
    @Html.TextBoxFor(m => Model.SearchCriteriaAffaire.IdAffaire)


    @Html.LabelFor(m => Model.SearchCriteriaAffaire.IdStatus)
    @Html.DropDownListFor(m => Model.SearchCriteriaAffaire.IdStatus, Model.Status)

    @Html.LabelFor(m => Model.SearchCriteriaAffaire.Title)
    @Html.TextBoxFor(m => Model.SearchCriteriaAffaire.Title)

    <input type="submit" id="buttonSubmit" value="Submit" />
    <input type="button" id="buttonClear" value="Clear" />

}

The first DropDownListFor(...Model.Type) is used to distinguish the search of type "affaire" or "suite". I would like to be able to hide "affaire" criteria fields and show "suite" criteria fields based on the value of this dropdown. What is the best way to achieve this?

Thanks.

Bronzato
  • 9,438
  • 29
  • 120
  • 212
  • Most likely duplicate of [705540](http://stackoverflow.com/questions/705540/asp-net-mvc-cascading-drop-down), [6688639](http://stackoverflow.com/questions/6688639/mvc-3-cascading-dropdownlists) etc. – Andreas Aug 02 '11 at 12:36
  • @egonyx: thank you for your reply. I prefer not using a "cascading dropdown" solution. I prefer keeping simplicity and it is possible that some criteria fields will be different in the future. I'm searching for another solution. – Bronzato Aug 02 '11 at 12:53

1 Answers1

0

I'd probably just use a client-side event handler and toggle the elements' visibility..

$('#searchType').change(function() {
    var value = $('#searchType option:selected').val();
    if (value === 'affaire') {
        $('.affaireCriteria').show();
        $('.suiteCriteria').hide();
    }
    else {
        $('.affaireCriteria').hide();
        $('.suiteCriteria').show();
    }
});

Just sample code.. there's plenty more you can do to make this more elegant.

egoodberry
  • 2,746
  • 2
  • 26
  • 29
  • thank you for your reply. Maybe a little better would be to use 2 separate forms and showing/hiding at "form level" (client-side event handler)? What do you think about that? – Bronzato Aug 02 '11 at 14:03
  • That would work, too.. as long as it makes sense to you and is consistent with the rest of your application, it shouldn't matter too much. – egoodberry Aug 02 '11 at 14:43