MVC Dynamic content onchange of dropdownlist

Question

I have a question on how to achieve the following:

I have a dropdownlist with activities and I want on the onchange event of an activity, that my list would be fetched with the id that is set in my model with ajax

example of my code is as following

Ajax Method to set The ID

 function GetSelectedValue(DropDownID, HiddenFieldID) {

    $('#' + HiddenFieldID).val($('#' + DropDownID + ' option:selected').val());

    $('#' + DropDownID).change(function () {
        $('#' + HiddenFieldID).val($('#' + DropDownID + ' option:selected').val());

        $.ajax({
            url: 'Afmeldingen',
            type: "POST",
            data: JSON.stringify({ 'ActiviteitenID': $('#' + DropDownID + ' option:selected').val() }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                jQuery.globalEval(data.Callback);
            },
            error: function (error) {
                //alert(error);
            }
        });
    });
}
$(document).bind('pageinit', function () {
    GetSelectedValue('details', 'act_id');
});

The Form element

@using (Html.BeginForm())
{
    <div data-role="collapsible" data-inline="true" data-content-theme="b" data-collapsed="false">
        <h3>@DateTime.Today.ToShortDateString()</h3>
        <div data-role="collapsible-set" data-inline="true" data-content-theme="b" data-collapsed="true">
            <select id="details">
                @foreach (var item in Models.Taken.ActivityList)
                {
                    <option value="@item.ID">@item.Comments</option>
                }
            </select>
            @Html.Hidden("act_id")
            @foreach (var item in Talent.Subscription.Fetch(null, Models.Taken.ActID ?? 1L, null, null))
            {
                <div data-role="collapsible" data-content-theme="b" data-collapsed="true">
                    <h3>
                        @Html.Label("", item.Participant.CompleteName)
                    </h3>
                    @Html.CheckBoxFor(m => m.DeelnemerActive.HasValue, htmlAttributes: new { data_role = "CheckBox" })
                    @foreach (var af in Talent.Afmelding.Fetch(null, Models.Tasks.ActID ?? 1L, null, null))
                    {
                        @Html.Label("", "Comments")
                        @Html.TextBox("Reason", af.Reason);
                    }
                </div>
            }
        </div>
    </div>
}

I hope you can help me to achieve this, or that you have an idea how to do this

Solution

This is probably the best example I can find that would help you.

http://blog.krisvandermast.com/CommentView,guid,b1a264ac-c48f-463e-9f55-db24e2a9b635.aspx

He loads data from a partial view dynamically on the onclick of a button. You could use your onchange here.

-

Have a look at this example to see how cascading dropdowns work:

http://www.c-sharpcorner.com/UploadFile/abhikumarvatsa/cascading-dropdownlist-in-Asp-Net-mvc/

-

You could also consider using knockout js, like described here:

http://www.dotnetexpertguide.com/2012/06/cascading-dropdown-knockoutjs-aspnet.html