使用 jQuery 从 Json 填充选择/选项时，ASP.NET MVC 空选择

Question

这里需要帮助

这是我的模特

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

样本方法

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);
}

查看

<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>

上面的代码没有任何错误，只是加载完所有内容后，Select/Dropdownlist 将有 4 个 Empty Values，这意味着我可以点击 DDL 并且有 4 个值，但它是空字符串。

有人知道为什么吗？

谢谢

Answer 1

这是另一种实现方式：

1. 示例索引视图和完整的 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>

1. 控制器：

   使用系统； 使用 System.Collections.Generic； 使用 System.Linq； 使用 System.Web； 使用 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);
   
           }
       }
   }
   

2. 选择选项模型：

   公共类 SelectOption { 公共字符串文本 { 获取；放; } 公共字符串值 { 获取；放; } }