Question

I have the following ajax request that creates a link that, when clicked, replaces my div labeled “testDiv” with some information I have returned from my controller via the method “ControllerMethod”:

<div class ="editor-field" id ="clickableAjax">
    @Ajax.ActionLink("Click Here to replace testDiv", "ControllerMethod", new AjaxOptions
                                                    {
                                                        UpdateTargetId = "testDiv",
                                                        HttpMethod="GET",
                                                        InsertionMode= InsertionMode.Replace,
                                                    }))
</div>
<div id="testDiv">
</div>

How would I make the web-page reply in the same manner as above when a user selects anything in the below drop-down list:

<div>
        @Html.DropDownListFor(x => x.Selected, Model.MyModel, "Custom")
        @Html.ValidationMessageFor(model => model.Courses)
</div>

I have tried something along the lines of:

$(document).ready(function () {
    $("Selected").change(function () {
        $("testDiv").replaceWith('<h2>test text</h2>');
    });
});

. . . just to try to get the page to do anything when a user makes a selection in the dropdown, but it is as if nothing is happening – the user can select anything in the dropdown and nothing changes.

note: I am using the id “Selected” in my jquery to try to select my dropdown list, is this incorrect? What would my dropdown’s id be if I create my dropdown using the above method?

Answer 1

$(document).ready(function () {
    $("#Selected").change(function () {
        $("#testDiv").html('<h2>test text</h2>');
    });
});