Different WebForm layout based on ddl selection

Question

0.00/5 (No votes)

See more:

Hello,

I have a question about webforms.
What is the best way to show different form fields based on a dropdownlist selection?
For example:
DDL1 value=1 --> show txtfield1, txtfield5
DDL1 value=2 --> show txtfield1, txtfield3, txtfield5
etc

I have 20 options in a dropdownlist and approximately 10 different forms layout.
I thought of using panels for the fields (make them visible/invisible in a switch statement) but I'm not sure if that's the best way.

Thank you in advance.

Posted 3-Sep-15 23:36pm

Chriz12

Updated 3-Sep-15 23:37pm

v2

Add a Solution

Comments

Sinisa Hajnal 4-Sep-15 6:04am

1. Have different forms with different URLs if the layouts are sufficiently different. simply redirect to different forms (or load via ajax)
2. Have slightly more complex ajax that will load only particular items one by one depending on the selection
3. have CSS class .hidden (or something) and toggle it using javascript (easiest with jQuery)

this last one requires no server round trip and is fastest of all. First one is all-server solution.

Chriz12 4-Sep-15 7:00am

First of all,thank you for you answer.

I don't think it's worth to load different pages , so I'm considering solution 3.

I'm not sure I understood though what I should do.

I added a class in td as following:
<td class="hidden" >
<div class="label"><asp:Label ID="Label26" runat="server" Text="Label:"></div>
<asp:TextBox ID="field1Txt" runat="server">

Adding .hidden class makes all td invisible. How can I enable those I need in ddl_SelectedIndexChanged property since every textfield is in the same class?

Thank you again for the help.

Palash Mondal_ 4-Sep-15 9:12am

I think you can do this on client w/ no server round trip. Just on dropdown on change event hide all the text fields and only show the required fields based on dropdown selected option.

Chriz12 7-Sep-15 0:48am

That' s the first thing that came to my mind but then I thought it has to be an easier way to display on/off the textfields without repeating the same code.
It's my backup solution though, thank you!:)

j snooze 4-Sep-15 17:38pm

One idea you could try is making your drop down list value a comma delimited list of the textbox id's to make visible. Then on change grab the selected value do a split() which would put the id's in an array that you could loop through and make visible. You could maybe make a quick function to hide all textboxes before making the selcted ones visible. Just a thought, it would be a very long value...won't work if you need that value or its coming from a database through binding. Another option might be to add a fake css class to the textboxes for the options it would be visible for i.e. <asp:Textbox CssClass="option1 option3 option4"> then use a jquery selector to grab the ones that correspond to the option selected. So many crazy ways to do it that I didn't mention. Probably more elegant solutions. Thats just some weird ones I thought of.

Chriz12 7-Sep-15 0:49am

Thank you for your answer!

I do need the value through database binding, I will the consider your second suggestion.

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)