CODEWITHSUNDEEP
asp.net-mvc-3razor
imak
imak

Reputation: 6699

How to design this page in razor world

In MVC-3/Razor, I need to create a page which will have five set of controls. Each set will have a drop-down and a text box. User will select an option from drop-down and then provide some feedback on text box.

When the view is shown very first time, I only have to enable controls in first set. Whereas all controls in 4 other sets should be disabled. Once user perform action in first set of controls (select optino from drop-down and enter in text box), the second set should become enable now, whereas other set of controls should still be disbaled. The data shown in this second drop-down is dependent upon what user has selected in first drop-down. Once user complete action in this second set, the data in third drop-down will depend upon whatever user selected in first and second drop-down etc.

I am a web-form aspx developer and not sure what will be the best way of designing this in MVC-razor world (because there is not view state etc).

Upvotes: 0

Views: 367

Answers (1)

Vlince
Vlince

Reputation: 6011

Step 1)

What needs to be clarified is what will cause the other “sets” to be enabled?

  • Is it after the user has selected an item in the dropdown

OR

  • Is it after they have entered some text in the textbox?

What also needs to be clarified is if you have a dropdown AND a textbox are they both enabled at the same time or is the textbox only enabled after you’ve selected an item in the dropdown?

Once you’ve got that figured out, move on to the next step.

Step 2)

Do the users need to visually see the 4 sets from the beginning (disabling the 3 other sets) or can you simply show the other sets (on the fly) once the previous one has been successfully filled?

Depending on the answers, this may vary your approach.

As for me, the way I’d do it is simply have/show one set that loads at the beginning. Once the user has selected an item from the dropdown, I would make an AJAX call passing along the selected item and get back a list of values for the second dropdown. Then, using jQuery, I would duplicate the row (or div) of the first set all while changing the values in the second dropdown box.

Repeat process for when an item is selected in the second dropdown.

But wait! There’s more!!!

Let’s assume you’ve reached the third set. What if the user decides to change the value in the first dropdown? What are your requirements if that happens? Should you remove all other sets and start back at square one? I guess so…

Since we are not aware of the full set of specs for your tasks, we can only assume stuff and this may (or not) be the best path to take.

Duplicating a row (or a div) using jQuery is quite fun and performance wise, it’s nice.

Keep in mind, you will have to give a different ID to your controls (dropdown + textbox) so when you submit the form, you could use the FormCollection to get those dynamically generated controls.

Upvotes: 1

Related Questions