Best Practice for handling cascading dropdowns other postback scenarios in ASP.NET MVC

Question

I have seen a few examples of handling cascading dropdowns in ASP.NET MVC using jQuery and Ajax. Of course, this requires javascript to be enabled. Assuming javascript is disabled what would be a best practice for handling cascading dropdowns.

Here is a real-world scenario of a asp.net web form I develop for a inventory app for th company I work. On the web page I have cascading dropdowns. For this example, say a dropdown of Car Makes and a Car Model which depends on the selected Car Make. Also, on this form I have a user control which implements a search feature so the user can enter the city and or state, select search, and select the customer from a gridview, which triggers an event to store the Customer ID in a field for the current order on the web page. I'm not using javascript on this page. The dropdown triggers a postback and reloads the dropdown values in the 2nd dropwdown. The search user control causes postbacks when the user clicks the Find button and when the user chooses the customer from the gridview.

How would this be handled in MVC? Would the postbacks in my example equate to actions in MVC? Would there be an action for the changing of Car Make? An action for the search? An action for the selection from the gridview?

Answer 1

Unless it's an significant amount of data, you should consider using <optgroup> tags to show your grouping. It's also a nicer thing to do from an accessibility point of view.

Though it's worth noting that optgroups only work for one level of a hierarchy.

Answer 2

I am with a scenario where I have three dropdowns and value of each is dependent on the value of previous one.

I know whenever the form gets posted it goes to a particular ActionName and by default it will be the same as the aspx page name, so if it is Index.aspx, when posted it call the method Index() sitting in its controller.

The above behaviour was causing a bit problem so

From:<%=Html.DropDownList("From", (SelectList)ViewData["From"], new { onchange = "this.form.action='Index'; this.form.submit();" })%>
To :<%=Html.DropDownList("To", (SelectList)ViewData["To"], new { onchange = "this.form.action='GetTo'; this.form.submit();" })%>

I changed the action name to 'GetTo' first and then posting the data, so it will go to GetTo method of the controller rather than Index().

Over here I am using javascript to change the action name and then submitting the form.

Hope this might help.