I want to enable a pair of cascading dropdown lists within a form in an ASP.NET MVC3 / Razor2 application. Ideally the solution will meet the following goals:
Child list populated simply by changing the selection of the parent list
Both dropdown lists contained within the form as they need to post information on submit
Uses Ajax to avoid whole page round-trip
Uses Ajax Html helper for easy integration
Works even if javascript is not enabled
So, from a user point of view, when an item in the parent dropdown is selected, the contents of the child dropdown is refreshed to display items related to it.
Can anyone please suggest the best way to do this?
EDIT.
No takers ... suggests to me that there may be conflicting requirements in the above list of goals. The closest I got to the above was this article, which met all the goals except that it doesn't work nested within an Html form.
So, I will restate the problem in a different way: how can I make an AJAX call from a dropdown list within an Html form so that I can populated another dropdown list with related items?
Took some time to find a reasonable solution to this, although so far I still don't have a no-jquery fallback. This article shows you how to use AjaxHelper extensions to create your own Ajax-enabled controls. Works a treat, and very reusable.
Related
Can anyone give me an idea about how to do this? My goal is to build a multi step claim submission form where user need to provide information for different sections. I am using VS2015 and Umbraco 7. Thanks.
In my opinion if you want to do it all from one template, it would be best to use a javascript/jquery solution that hides and shows different sections/divs as needed. These divs can be rendered from the partial views. I'm not sure if this works but maybe if you have one Form and all of these divs underneath it, you only need one form button and just submit at the end (I'm pretty positive this would work as the partial view elements would just be rendered as elements inside the form). But if not the values can be stored either in Jquery Data, or just using hidden variables, etc.
I have a bit of a unique challenge today. I have a client that wants to be able to search for multiple items based on inserts into a cfgrid. Suppose we have the following web form:
A Country selection dropdown
A State Selection dependent AJAX dropdown
A city Selection dependent AJAX dropdown
An ADD Button
----------------------------------------------------
A CFGRID that will populate a row with selections when the user clicks the add button
----------------------------------------------------
And finally, a CLEAR button, and a GO button on the bottom.
The resulting page will then query the database and get some statistics about the cities selected. So, suppose an individual picks USA > Arizona > Scottsdale and USA > Arizona > Flagstaff. The grid below the options will 'save' each selection and reset to their default options, waiting for a user to pick additional options or click on 'GO'.
The resulting page will then generate columns that list some statistics about the communities and highlight the 'best of' between each selected community.
Each time a user selects the ADD button (assuming three criteria are selected) I want the information to be added into a CFGRID that displays the options selected. Then, After the user selects at least one country/city/state option, have all of the data in the CFGRID get passed to another page that does a query from the data selected. In theory, the user could pick as many communities as they want, assuming they are willing to let the database sludge through enough data to get what they want and wait through a 'loading' screen to get it.
I'm having these challenges, in no particular order:
- I have an HTML grid that I must use per client spec (No Java or Flash, must be HTML)
- I have no idea how to get the selected options into the CFGRID. I assume there is some JavaScript I can write that uses some sort of AddRow function to add data into the grid with the add button but cannot seem to find how to it on the interwebs
- After we conquer the above challenge, how do I pass the data from the grid into the results page? I thought about passing one big string or a structure, but I'm not sure how to do that through the URL or posting, nor how to get the data out of the grid. I wonder if I am better off coding some sort of string that gets passed from the options page to the results page with a get method instead of dealing with the stuff in the CFGRID and have the CFGRID serve only as a 'dummy' display container.
- Finally, after the pass is complete, I would need to loop through through the structure and perform a CFQUERY or CFSTOREDPROC on each row of data, then get the statistics I need to display on the results page. I assume this would depend on how I am getting the data from the options selection page to the results page.
THANK YOU ALL!
CFGRID is great to start, but it can be b*tch to customize and extend... Have you tried editable CFGRID with bind? See how far off it is from what you want first. If it turns out to be very far, then you might want to go for a jqGrid and code up some jQuery.
To start, read Using HTML grids and make the cfgrid editable.
http://help.adobe.com/en_US/ColdFusion/9.0/Developing/WSc3ff6d0ea77859461172e0811cbec22c24-7a01.html#WSc3ff6d0ea77859461172e0811cbec22c24-72e0
Once you got that working, look at these provided JS functions that you can use with CFGRID
http://help.adobe.com/en_US/ColdFusion/9.0/CFMLRef/WS0ef8c004658c1089-6262c847120f1a3b244-8000.html
http://help.adobe.com/en_US/ColdFusion/9.0/CFMLRef/WSd160b5fdf5100e8f-4439fdac128193edfd6-7f5f.html
If you still demand a bit more, you might need to dig into the underlying ExtJS component. At that point I would rather use jqGrid
I found out that the best way to handle this was by using a SerializeJSON call and a Deserialize JSON call back and forth. By using JavaScript notation we are able to pass a complex JavaScript object (array) between one page and another. This has the value add of not having to worry about sessions timing out and making URLs clickable from one solution to the next.
I'm coming from a WebForms environment. When I wanted values from a radiobutton, the form simply got ajax reposted or I got it thru javascript.
I've searched the web, but can't seem to find an equivalent for MVC 3 Razor.
I'm not posting the form, so I can't use the FormCollection object in the ActionResult.
I simply want to get the value of which option in the RadioButton is checked when a user checks one of them.
I assume I would do this thru an Action method in a Controller once a user checks one of the values.
Note also, that this radiobutton list is in a partial view and is available to the entire website (because it is in my _Layout.cshtml view).
Can someone please help me out with what I think should be a simple task?
You need to use javascript. See this post. MVC does not have the concept of an Auto-Postback like in Webforms. This is an optimization in the page loading time (no self-managed viewstate). This means you need to manage the statefulness of controls yourself.
In short, if you're not posting (or "getting") the form then the value won't be available in the controller...more specifically, neither the controller nor it's actions will be called at all.
If you're trying to do something strictly UI related, then you may want to consider jQuery.
If you're trying to do some sort of model validation inside of the view, you may want to reconsider your approach and usage of the MVC pattern.
I'm trying to build a fairly complex form which as a couple of cascading selects - i.e. the user selects a value in one combo and the other combo is populated according to their first selection.
I've followed a tutorial on how to handle the cascading but the problem I have is that I now have nested forms (the code in the tutorial uses forms inside partial views to POST to a controller action to load the 2nd combo). I have my main form on which I want to collect the input values but also the nexted forms for the cascading select boxes. The problem I have is that the cascading selection doesn't post to the correct controller action, but instead posts to my main (outer) form's action.
I understand this is the correct behaviour for a browser (as nested forms apparently aren't supported) but what's the correct way to implement this?
The correct way is to only have one form. Then use AJAX to populate the cascading drop down list. The are 100s of examples online how to do this with JSON
use this to have multiple submit buttons on one form which each have different controller actions to post to:
http://iwayneo.blogspot.co.uk/2013/10/aspnet-mvc-action-selector-with-list.html
as for cascading stuff - i would focus on populating these without Ajax 1st - then you can worry about adding this sort of flare - if it doesn't work without JS anyway you're in a bad place.
I would have the 1st dropdown populated when you initially load the form and have a "next" button to populate the next dropdown in the cascade. this submit can use the method above to post to an action which then populates the second data set based on the selection of the 1st dropdown.
make sense?
Then how you ajax that after the point is up to you but you'll have a very solid foundation to build up stuff like that as you will have it working in the minimal tech scenario.
w://
i am asking myself if it is possible to somehow create a dynamic gui in jsp. So that i could have something like a dropdown menue for the country and based on what i have selected in that window a dropdown menue for cities, without reloading the jsp page. Or, in a dialog with multiple input lines, to be able to add an additional line with a button, again without reloading the whole page. In the first case the cities information would be in a database, in the second the information provided would be stored at the end in a database, so i cant just use java script (and don't really want to).
At a minimum, you would need to utilize JavaScript to implement what you want. Most would implement it the way Tim describes in his first paragraph.
Set up two .JSP's:
The first contains your main form with the country drop-down menu. Some JavaScript on the first .JSP triggers an AJAX request to a second .JSP. The second .JSP accepts a country-ID parameter and uses a servlet to query your DB for a list of cities, then renders that data. Once the request returns, the JavaScript in your first .JSP inserts the list of cities into a new drop-down menu.
This may seem complex, but several JavaScript libraries exist to assist you with this task. Look into jQuery or Dojo.
To update the page without posting back the whole page, the browser would use ajax. Using a database does not eliminate ajax. Ajax calls server code that digs your data out of the database.
Regardless, to do what you want, without writing your own javascript, look at GWT (Google Web Toolkit). You right ajax applications in Java that generates the javascript for you.