Добавить запись через jquery ajax вызов в webmethod и обновить выпадающий список

Question

Мне удается добавить запись через вызов jquery ajax в webmethod, но я хочу обновить раскрывающийся список после добавления записи. Я не хочу использовать панель обновления. что было бы лучшим способом сделать это. спасибо

Answer 1

Вы можете увидеть мой ответ для другого вопроса. Если ваш пользователь использует IE или Safari, то лучше вернуть полный элемент <select>, а затем заменить существующий элемент <select> новым. Вот пример кода для этого:

var loading_image = '<img src="<?php echo FULL_PATH_TO_loading.gif'; ?>" alt="loading..." id="loading-image" />';
//load new select via AJAX
function do_update_time($){
  $("#select_container").after(loading_image);
  var url = 'URL_TO_LOAD_NEW_SELECT';
  $.get(url,
    {},
    function(data){
      $("#loading-image").hide().remove();
      $("#select_container").html(data);
    });
};

Для этого кода структура HTML должна иметь как минимум следующее:

<span id="select_container">
  <select>
    <option></option>
  </select>
</span>

Все содержимое внутри <span id="select_container"> будет заменено после того, как AJAX-вызов вернет новый ответ.

Если целевой пользователь использует только Firefox, то с помощью любого метода добавления элемента option к select будет работать.

Answer 2

Лучший способ - обновить выпадающий список, если вы знаете, что обратный вызов AJAX прошел успешно. Вы уже знаете название добавляемой опции, поэтому эта часть проста, но если вам требуется некоторая логика .NET, скажем, для идентификатора вновь созданной записи, вам потребуется, чтобы ваш веб-метод возвратил эту информацию .

var name = 'new option';
$.ajax({
    url: '/MyWebService.asmx/MyWebMethod',
    data: '{"name":"'+name+'"}',
    etc...,
    success: function(result) { 

        // this assumes you're returning the ID of the newly created option
        // .net webmethod wrap the responses in a 'd' property of the returned object
        var id = result.d; 

        // simply build the string to create the option to add to the select
        $('#mySelect').append($('<option value="' + id + '">' + name + '</option>'));

    }
});

Если вы делаете что-то более сложное на стороне сервера, что требует от вас выборки всего содержимого списка выбора с нуля (скажем, происходит какой-то хитрый перевод или просто сортировка по чему-то, что не может быть реплицировано в JavaScript ), вам придется возвращать всю информацию в веб-методе, который будет выглядеть примерно так:

[WebMethod]
public object[] MyWebMethod(string name) {
    InsertIntoDb(name);

    // something like this, to represent your collection of dropdown items
    // in a list that is similar to [ { id: 1, name: 'abc' }, { id: 2, ...}, ... ]

    return AllItems.Select(i => new {
        id: i.Id,
        name. i.Name
    }).ToArray();
}

Ваш JavaScript будет изменен на следующее:

var name = 'new option';
$.ajax({
    url: '/MyWebService.asmx/MyWebMethod',
    data: '{"name":"'+name+'"}',
    etc...,
    success: function(result) { 

        var sel = $('#mySelect');
        var options = result.d;

        sel.html('');

        for(var i = 0; i < options.length; i++) {
            var opt = options[i];
            sel.append($('<option value="' + opt.id + '">' + opt.name + '</option>'));
        }

    }
});