ASP.NET MVC Empty Select when Fill a Select/Option from Json with jQuery

Question

Needed help here

This is my Model

public class SelectOption
{
    public String Value { get; set; }
    public String Text { get; set; }
}

Sample Method

public JsonResult GetJson()
{
    var list = new List<SelectOption>
                   {
                       new SelectOption { Value = "1", Text = "Aron" },
                       new SelectOption { Value = "2", Text = "Bob" },
                       new SelectOption { Value = "3", Text = "Charlie" },
                       new SelectOption { Value = "4", Text = "David" }
                   };
    return Json(list);
}

View

<script type="text/javascript">

    $(document).ready(function() {
        $.getJSON("/Json/GetJson", null, function(data) {
            $("#MyList").addItems(data);
        });
    });

    $.fn.addItems = function(data) {
        return this.each(function() {
            var list = this;
            $.each(data, function(index, itemData) {
                var option = new Option(itemData.Text, itemData.Value);
                list.add(option);
            });
        });
    };

    $("#MyList").change(function() {
        alert('you selected ' + $(this).val());
    });

</script>

The above code doesnt have any error it's just that when everything is loaded, the Select/Dropdownlist will have 4 Empty Values, meaning that I can click on the DDL and there's 4 values, however it is empty string for all fours.

Anyone know why?

Thanks

Answer 1

Here is another way to implement:

1. Sample Index View and Complete JQuery:

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>


<select id="MyList">

</select>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>

 $(function () {

        LoadList();

    });

function LoadList() {

        var procemessage = "<option value=''> Please wait...</option>";

        $("#MyList").html(procemessage).show();


        $.ajax(

                   {
                       url: "@Url.Action("GetJson", "Test")" ,
                    type: "GET",

                    success: function (data) {

                    var markup = "<option value=''>-Select Option-</option>";

                    for (var x = 0; x < data.length; x++) {

                    markup += "<option value=" + data[x].Value + ">" +
                        data[x].Text + "</option>";

                    }

                    $("#MyList").html(markup).show();

                    },

                    error: function (reponse) {
                    alert("error : " + reponse);
                    }

                    });

                    }

</script>

2. Controller:

   using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc;

   namespace stackoverflow.Controllers
   {
       public class TestController : Controller
       {
           // GET: Test
           public ActionResult Index()
           {
               return View();
           }
   
   
           [HttpGet]
           public JsonResult GetJson()
           {
               var list = new List<SelectOption>
                      {
                          new SelectOption { Value = "1", Text = "Aron" },
                          new SelectOption { Value = "2", Text = "Bob" },
                          new SelectOption { Value = "3", Text = "Charlie" },
                          new SelectOption { Value = "4", Text = "David" }
                      };
   
               return Json(list, JsonRequestBehavior.AllowGet);
   
           }
       }
   }
   

3. Select Option Model:

   public class SelectOption { public string Text { get; set; } public string Value { get; set; } }