18

我仍在学习 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 数据填充选择列表（不是文档）

但我需要帮助把它们放在一起。先感谢您！

4

2 回答 2

39

这是我用来填充选择框的 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取决于您的用户对象。

[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 日 - 代码缺少逗号。

于 2012-04-19T17:47:52.000 回答
5

我会使用 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，演示了如何确定选择列表是否为空。

于 2012-04-19T17:32:40.850 回答