填充使用带有Json数据的Javascript/Jquery单击选择框选项

Question

我还在学习Jquery,并且对我手上的任务感到困惑.

看起来像一个简单的任务...我有一个盒子,我想用点击选项填充.我不希望它在页面加载时填充,只有当有人实际请求查看列表时.它也必须只填充一次.我真的不希望每次有人扩展列表时请求都会出去.

我想我可能在我的Select元素中有一个函数调用

<select id="usersList" name="usersList" onclick="getUsers()">

然后让一个Javascript getUsers()函数调用我的Json GetUsers()ActionMethod来获取该列表.怎么样 ？

就像是...？

function getUsers()
{
 getJSON("/Users/GetUsers", null, function (data){}
}

还是JQuery？...

$("usersList").click(
  $.getJSON("/Users/GetUsers", null, function (data) {}
  )

我应该提一下,我看到这篇文章: 当加载选择列表时(不是文档),在JQuery中用json数据填充selectlist

但是我需要帮助把它们放在一起.先感谢您!

Answer 1

这是我用来填充选择框的javascript.

$.getJSON("/Users/GetUsers", null, function(data) {
    $("#UsersList option").remove(); // Remove all <option> child tags.
    $.each(data.Users, function(index, item) { // Iterates through a collection
        $("#UsersList").append( // Append an object to the inside of the select box
            $("<option></option>") // Yes you can do this.
                .text(item.Description)
                .val(item.Id)
        );
    });
});

我建议您在页面加载时触发此操作,而不是在用户单击选择框时触发.jQuery AJAX默认是异步的(因为它应该是这样)所以有一两个选择框将为空,这可能会极大地混淆用户.

这是你的问题的范围,还是你需要MVC方面的帮助？如果你正在使用ASP.Net MVC,实际上有一个特定的结果类型JsonResult,这使得创建JSON控制器方法更简单,因为它们不需要相应的视图.它还允许您使用匿名数据结构,这使得特定于方法的投影更简单一些.

编辑这是返回JSON结构的基本方法,上面的jQuery代码将理解.请注意属性u.Username并u.ID取决于您的Users对象.

[HttpPost] 
public JsonResult GetUsers() { 
    return Json(new {
        Users = from u in _usersRepository.Get()
                select new { Description = u.Username, ID = u.ID }
    }); 
}

但我建议你尽快放弃这种方法并使用标准的JSON消息结构.我使用的是这样的:

{
    Success: bool,
    LoggedIn: bool,
    ClientErrors: [
        { Number: int, Description: string, Parameter: string },
        { Number: int, Description: string, Parameter: string }...
    ],
    ServerErrors: [
        { Id: int, Message: string },
        { Id: int, Message: string }...
    ],
    Data: {}
}

以下是执行此操作的几个原因:

1. 毫无疑问,您的JSON方法库是一种各种协议,因此它受益于标准头.
2. 错误处理从中受益最多.拥有一种让用户知道出错的一致方法是非常宝贵的.
3. 区分客户端错误(错误的用户名,错误的密码等)和服务器错误(数据库脱机)非常重要.一个用户可以修复,另一个他们不能修复.
4. 客户端错误不仅应返回消息,还应返回导致它的方法中的参数(如果适用),以便您可以在相应的输入字段旁边轻松显示这些错误消息.
5. 客户端错误还应提供标识错误的唯一编号(每种方法).这允许多语言支持.
6. 服务器错误应提供记录的错误的ID.这样,您可以允许用户联系支持人员并引用他们遇到的特定错误.
7. 登录布尔值允许任何使用需要身份验证的方法的页面在必要时轻松地将用户重定向回登录屏幕,因为JSON方法的重定向操作结果将不起作用.
8. 最后,数据字段是应该提供方法特定数据的位置.

绝不应该将我的结构视为实现它的方式.显然,您的应用需求可能与我的有很大不同.一致性,比任何特定结构更重要的是这里的教训.

编辑:06/01/2016 - 看到人们仍然在看这个答案.关于填充下拉列表,我建议使用双向绑定框架.就个人而言,我更喜欢Knockout.JS,虽然Angular.JS也可以完成这项工作.除此之外,这个答案的其余部分仍然是最新的.

编辑:8/10/2016 - 代码缺少逗号.

Answer 2

我会使用jQuery选项.

// You are missing the new anonymous function call
$("#usersList").click(function() {
    // If the select list is empty:
    if ($(this).find("option").size() > 0) {
        // Documentation on getJSON: http://api.jquery.com/jQuery.getJSON/
        $.getJSON("/Users/GetUsers.php", null, function (data) {
            $.each(data.items, function(i,item){
                // Create and append the new options into the select list
                $("#usersList").append("<option value="+item.id+">"+item.yourName+"</option>");
            });
        });
    }
});

由于append()操作相对"昂贵",您还可以构建一个包含信息的字符串,并将其附加一次,如下所示:

var collaboration = "";
$.each(data.items, function(i,item){
    collaboration += "<option value="+item.id+">"+item.yourName+"</option>";
});
$("#usersList").append(collaboration);
...

这是一个jsfiddle,演示如何确定选择列表是否为空.