0

I'm new to MVC, converting an existing WPF application to an MVC web site. One common function that we use across the application multi-stage dropdown selection. By that I mean:

  • Dropdown A is a list from the database
  • After selecting A, Dropdown B is populated based on that selection
  • After selecting B, Dropdown C is populated based on that selection

In WPF I could make a custom control that made it easy to drop this in wherever I needed it, but I'm not sure the MVC partial views will give me the power I need to do it, since it seems that putting javascript in a partial view is not recommended or is not even possible. I'd like to do ajax calls back to the controller to load the data for each dropdown as they are selected, which would require javascript.

One idea I've tossed around is to have a partial view that takes a model to load Dropdown A, and then do a @Scripts.Render('multiDropdown.js' right below the Partial(). I don't love this idea because instead of just rendering the partial, I now have to ensure that I'm also including the scripts. I also dislike this because if there was some way to put the javascript into a partial i could also provide ViewData to give the dropdowns ID names to use in the javascript, so I could have more than one of the partials on the same page. If the javascript is kept separate I'd have to hard-code IDs on the elements in the partial and the javascript.

Another thought I had was to use the @Ajax helper to try and load them "without" javascript, but I'm not sure if, because of the javascript limitations in partials, if the @Ajax methods will work properly in partial views either.

Are the other techniques that I could use to solve this problem? This sort of filtering seems like a common type of functionality, but I couldn't find any resources that would help me achieve it, especially in a re-usable manner.

Community
  • 1
  • 1
DLeh
  • 23,806
  • 16
  • 84
  • 128
  • You can most certaintly put JS in partial views and I think it's perfectly fine to do so. Just remember where you render that Partial View so you don't run into script errors if it is rendered twice. – CSharper Sep 18 '14 at 14:01
  • I had issues trying to do so, primarily because it couldn't find jQuery inside the partial view. I'll have to do some experimentation to find where the limitations are – DLeh Sep 18 '14 at 14:44

1 Answers1

1

You need to search cascading dropdown there are tons of examples how to do this. You're also going to need to use AJAX to do this. I'll show you my AJAX to get you going in the right direction. Inside the success function of this AJAX call, I am clearing the previous contents of Dropdown B and repopulating with what the server returns. 

               $.ajax({
                    url: "/Home/GetDivisions", //will return JsonResult
                    type: "GET",
                    data: { leagueId: value },
                    success: function (data) {

                        var ddlDivision = $('#ddlDivision'); 
                        ddlDivision.html(''); //clear previous contents.

                        $.each(data, function (index, item) {

                         ddlDivision.append($('<option></option>')
                        .val(item.Value)
                        .html(item.Text));
                        });
                     },
CSharper
  • 5,420
  • 6
  • 28
  • 54
  • I was trying to do this via model binding, but since all i really need to send is an ID and return a list of `value` and `text` i suppose it does make more sense to use `JsonResult` instead for this kind of thing. Now I want to try and find a way that I can standardize this for use across the application. Thanks! – DLeh Sep 18 '14 at 14:14
  • All of the references I've found use `JSON` and handle it in a similar fashion. I would love a way to do this through Model Binding, but as it is AJAX I'm not sure if it is possible. I don't know how you would trigger the dropdown to "rebind" – CSharper Sep 18 '14 at 14:40