Начать выбор параметров окна при щелчке с помощью Javascript/Jquery с данными Json

Ответ 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: {}
}

Вот несколько причин для этого:

• Не ошибитесь, ваша библиотека методов JSON является протоколом сортировки и, как таковая, выигрывает от стандартного заголовка.
• Обработка ошибок приносит большую пользу из этого. Наличие последовательного метода, позволяющего пользователю узнать, что что-то пошло не так, неоценимо по дороге.
• Очень важно различать ошибки клиента (неверное имя пользователя, неверный пароль и т.д.) и ошибки сервера (база данных в автономном режиме). Один пользователь может исправить, другой он не может.
• Ошибки клиента должны возвращать не только сообщение, но и параметр в методе, который вызывает его (если он применяется), чтобы вы могли легко отображать эти сообщения об ошибках рядом с соответствующими полями ввода.
• Ошибки клиента также должны содержать уникальный номер (по методу), который идентифицирует ошибку. Это позволяет многоязычную поддержку.
• Ошибки сервера должны содержать идентификатор ошибки, которая была зарегистрирована. Таким образом, вы можете разрешить пользователю обращаться в службу поддержки и ссылаться на конкретную ошибку, с которой они работают.
• Loggedin boolean позволяет любой странице, которая использует методы, требующие аутентификации, легко перенаправить пользователя обратно на экран входа в систему, если это необходимо, так как результат действия перенаправления метода JSON не будет иметь эффекта.
• Наконец, поле данных содержит данные, специфичные для метода.

Ни в коем случае не следует рассматривать мою структуру как способ ее выполнения. Очевидно, что ваши приложения могут сильно отличаться от моих. Консистенция, больше, чем любая конкретная структура, является уроком здесь.

EDIT: 06/01/2016 - Видя, как люди все еще смотрят на этот ответ. Что касается заполнения раскрывающегося списка, я бы рекомендовал изучить использование двухсторонней привязки. Лично я предпочитаю Knockout.JS за то, насколько легкий и легкий он, хотя Angular.JS также выполнил бы эту работу. Кроме того, остальная часть этого ответа по-прежнему довольно актуальна.

EDIT: 8/10/2016 - в коде отсутствует запятая.

Ответ 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, который демонстрирует, как определить, пустой ли список выбора.