Question

I am developing an application in which i have a dropdownlist and i want that whenever there is any change in selection of dropdownlist the partial view for the same must be selected accordingly.

I am using dropdownlist as

 @Html.DropDownListFor(x => x.ID,
              new SelectList(new List<Object>{ new { value = 0 , text = "MCQ"  },new { value = 1 , text = "Rating Scale" },
                           new { value = 2 , text = "Comment Box"}}, "Value", "Text"),
            "Select Answer Type",
            new
            {
                id = "myddl",
                data_url = Url.Action("GetHtml", "Question")
            })

and jQuery code to track selection change event

 $(function () {
        $('#myddl').change(function () {
            var url = $(this).data('url');
            var value = $(this).val();
            $('#result').load(url)
        });
    });

And i am using action named GetHTML as

public ActionResult GetHtml(string value)
        {

            if (value== "0")
           {
             return PartialView("_OAns");
           }
            else if (value== "1")
           {
               return PartialView("_RScale");
           }
            else if (value== "2")
           {
               return PartialView("_Comments");
           }
           else
           {                   
               return View("Index");
           }
        }

The above code is working fine but when i select a value in dropdown box then its always returning this View("Index") i.e. may be its never taking a value which matches to value 1, 2 or 3

What’s the reason ? I want to apply selection change but its not happening here. Is there any problem with action or passing value ?

Please help

Answer 1

You’ve declared this value variable inside your change callback but you don’t seem to be doing anything with it. So do something, like for example sending it to the server:

$(function () {
    $('#myddl').change(function () {
        var url = $(this).data('url');
        var value = $(this).val();
        $('#result').load(url, { value: value });
    });
});

Notice the second argument of the .load() function. It allows you to pass data to the server during the AJAX request.