jquery - 使用 Javascript/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) {}
  )

我应该提到我看到了这篇文章: populate selectlist with json data in JQuery when the selectlist is loaded (not the document)

但是我需要帮助将它们整合在一起。预先感谢您!

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

<小时/>

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

<小时/>

您决不应该将我的结构视为实现此目的的方式。显然，您的应用程序需求可能与我的有很大不同。这里的教训是一致性，而不是任何特定的结构。

编辑:06/01/2016 - 人们仍在查看这个答案。关于填充下拉列表，我建议考虑使用双向绑定(bind)框架。就我个人而言，我更喜欢 Knockout.JS，因为它非常简单和轻量级，尽管 Angular.JS 也可以完成这项工作。除此之外，这个答案的其余部分仍然是最新的。

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