What is the sequence or flow to implement this view in MVC4

Question

I'm still learning about MVC4.

Imagine the following scenario: I've got three dropDownLists and one big div for the content. I don't know how to deal the loading on demand.

The flow is simple, when page is loaded, display the data in the first dropdownlist. When this one has a value, the second one should load the information on demand (using the selected value from ddl1) and so on, until change the value on the ddl3 and displays the data.

Until here I have detected two partial views. I'm not sure if I should create 5 because each ddl must be in one partial view.

Another thing, what would you recomend to maintain the SelectList, should I have to use ViewBag or maintain in a viewModel the collections foreach ddl?

enter image description here

I just one to know if you can clarrify this scenario. I mean, give an idea about how can I start doing this? In fact, I forgot to mention this doubt but I don't if I have to use AJAX.

http://stackoverflow.com/questions/5497524/easiest-way-to-create-a-cascade-dropdown-in-asp-net-mvc-3-with-c-sharp read the first value, then call via ajax and pass it to the child action and repeat for the same. — Ravi Gadag, Feb 22 '13 at 04:14

score 0 · Answer 1 · edited May 23 '17 at 12:06

I got stuck , few weeks back in same kind of stuff:-

Let your MVC calls be like :-

    private void LoadDropdown1()
    {
        var _data;//Your logic to get the data
        ViewData["Dropdown1"] = new SelectList(_data, "Dropdown1Id", "Name");
    }
    private void LoadDropdown2(int dropdownParameterId)
    {
        var _data = "";//Use your ID to get the data
        ViewData["Dropdown2"] = new SelectList(_data, "Dropdown2Id", "Name");
    }

Your .cshtml be :-

@using (Html.BeginForm())
{
    <div>
        <table>
            <tr>
                <td><b>Select a District:</b></td>


                <td>@Html.DropDownListFor(m => m.Dropdown1Id, ViewData["Dropdown1"] as IEnumerable<SelectListItem>, "Select One", new {@id="Dropdown1Id"})</td>
            </tr>
            <tr>
                <td><b>Select:</b></td>

                <td>@Html.DropDownListFor(m => m.Dropdown2Id, ViewData["Dropdown2"] as IEnumerable<SelectListItem>, "Select One")</td>
            </tr>
        </table>
    </div>
}

Now AJAX call is best to load data to your dropdown:-

$(function () {
    $('select#Dropdown1').change(function () {
        var id = $(this).val();


        $.ajax({
            url: 'Bla Bla',
            type: 'POST',
            data: JSON.stringify({ id: id }),
            dataType: 'json',
            contentType: 'application/json',
            success: function (data) {
                $.each(data, function (key, data) {
                    $('select#Dropdown1').append('<option value="0">Select One</option>');
                    // loop through the LoadDropdown1 and fill the dropdown
                    $.each(data, function (index, item) {
                        $('select#Dropdown1').append(
                            '<option value="' + item.Id + '">'
                            + item.Name +
                            '</option>');
                    });
                });
            }
        });
    });
});

What i am trying to say is.. Load your 1st dropdown the way you prefer. Then On change event of 1st dropdown, you can fire an ajax call to fetch data for 2nd dropdown.... Similarly..

Reference:- on select change event - Html.DropDownListFor

What is the sequence or flow to implement this view in MVC4

1 Answers1