ASP.NET MVC View dynamically changes according to dropdownlist selection

Question

_{Saturday, December 3, 2016 8:38 PM}

Hi, 

I am new to MVC 5 and I have a scenario that requires me to develop a registration form that changes according to the selected dropdownlist value. For example, if i select Admin from the dropdownlist, the view will display 3 fields for registration such as username, password and email. Subsequently, if i select "Normal User" from the dropdownlist, the view will change to display 5 fields for registration such as username, password, email, age and address. After filling up the fields, I can then press the submit button and save the data to the corresponding table accordingly.

I've tried implementing this by having 3 <div> classes for each user roles. And having Javascript to hide and show the <div> classes acccoridng to the dropdownlist changes. However, it does not work. Is there any great way to implement this?

Any comments and feedbacks are much appreciated!

All replies (3)

_{Saturday, December 3, 2016 10:12 PM}

your approach is correct, but without code its hard to tell whats wrong, nor do you say whats doesn't work.

1) if only one of 3 div should show, then each div should have a form in it:

<label>type of user:</label>
<select onchange="$('div.login').hide();$('div.login .'+this.value).show();">
   <option></option>
   <option>normal</option>
   <option>admin</option>
   <option>advanced</option>
</select>
<div class="login normal">
  @using (Html.BeginForm() {
     ....
  }
</div>
<div class="login admin">
  @using (Html.BeginForm() {
     ....
  }
</div>
<div class="login advanced">
  @using (Html.BeginForm() {
     ....
  }
</div>

_{Sunday, December 4, 2016 2:39 AM}

Dear joeassault,

I suggest you to use JQuery for this. Set a variable on the field which you wants to hide or show and set these variable values by model values(value of model property role). Let me know if this wil helped you.

_{Monday, December 5, 2016 6:09 AM}

Hi joeassault,

Welcome to asp.net forum.

ASP.NET MVC View dynamically changes according to dropdownlist selection

Based on bruce's code, I suggest you could refer to the following code:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('div.login').hide();
            $('div.normal').show();//by default, display the normal div
            $("#ddl_select").change(function () {
                var currentdiv = $("div." + $(this).val());
                currentdiv.show(); //based on the selected value to show the relevant div.

                $('div.login').not(currentdiv).hide(); //hide other div
            });
        })
    </script>

        <div>
            <label>type of user:</label>
            <select id="ddl_select" >
                <option>normal</option>
                <option>admin</option>
                <option>advanced</option>
            </select>
            <div class="login normal">
                normal view
            </div>
            <div class="login admin">
               admin view
            </div>
            <div class="login advanced">
               advanced view
            </div>
        </div>

Best regards,
Dillion