单击时使用Javason / Jquery和Json数据填充选择框选项

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

但是，我需要帮助，将所有内容放在一起。先感谢您！

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控制器方法更加简单，因为它们不需要相应的视图。它还允许您使用匿名数据结构，这使方法特定的投影更加简单。

编辑 这是返回上面的jQuery代码将理解的JSON结构的基本方法。请注意，属性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也能做到，但它是如此的轻巧和轻便。除此之外，此答案的其余部分仍然是最新的。

编辑：2016 年8月10日-代码缺少逗号。