C# MVC4: Replace <div> when selection is made from a Html.DropDownList using jQuery

Question

I need to be able to populate data into a <div> or some other sort of section from an object after the corresponding string has been selected from a drop down list (lazy loading).

When a chnage is made in the dropdownlist, I want the method in my controller to be called which will fill in <div id=result></div> with the output from the method.

Perhaps I am approaching this problem wrong. I suspect the problem is in my JavaScript. Here is my approach:

View:

    <div>@Html.DropDownList("MyDDL") </div>
    <br>
    <div id="result"></div>

JavaScript:

<script type ="text/javascript">
    $(document).ready(function () {
        $("#MyDDL").change(function () {
            var strSelected = "";
            $("#MyDDL option:selected").each(function () {
                strSelected += $(this)[0].value;
            });
            var url = "HomeController/showInfo";

            //I suspect this is not completely correct:
            $.post(url, {str: strSelected},function (result) {
                $("result").html(result);
            }); 
        });
    });
</script>

Controller (Perhaps I shouldn't be using PartialViewResult ):

public ActionResult Index()
    {
        List<string> myList = new List<string>();
        List<SelectListItem> MyDDL = new List<SelectListItem>();
        myList.Add("Tim");
        myList.Add("Joe");
        myList.Add("Jim");

        //fill MyDDL with items from myList
        MyDDL = myList
             .Select(x => new SelectListItem { Text = x, Value = x })
             .ToList();

        ViewData["MyDDL"] = MyDDL;

        return View();
    }

    [HttpPost]
    public PartialViewResult showInfo(string str)
    {
        Person p = new Person(str); //name is passed to constructor
        p.LoadInfo();     //database access in Person Model
        ViewBag.Info = p.Info;
        return PartialView("_result");
    }

_result.cshtml:

<p>
@ViewBag.Info
</p>

Thanks You.

Answer 1

Change your script a little bit. Missing a # in the jQuery selecter for result div . Use the code given below

$.post(url, {str: strSelected},function (result) {
                $("#result").html(result);
            }); 

Answer 2

In my opinion if the javascript are in local don't need put $.post(url, {str: strSelected},function (result) {

You can use

        //I suspect this is not completely correct:
                       $("#result").html(result);

try it

Answer 3

Did you try debugging p.LoadInfo() if it has any value? I also have some suggestions for your script:

Try adding keyup in your event so you can get the value in cases when the arrow keypad is used insted of clicking:

$("#MyDDL").on("change keyup", function () {
            // you can get the dropdown value with this
            var strSelected = $(this).val();

Answer 4

So I made the following changes and it worked:

View:

<div><%= Html.DropDownList("MyDDL") %> </div>
<br>
<span></span>

JavaScript:

<script type ="text/javascript">
$(document).ready(function () {
    $("#MyDDL").change(function () {
        var strSelected = $("#MyDDL option:selected").text();
        var url = "/Home/showInfo";
        $.post(url, {str: strSelected},function (result) {
            $("span").html(result);
        }); 
    });
});

_result.cshtml:

@ViewBag.Info

The Controller was left unchanged.