Question

我设法通过jquery ajax调用webmethod添加recrod，但是我想在添加记录后更新下拉列表。我不想使用更新面板。什么是最好的方式。感谢

Answer 1

最好的方法是在知道AJAX回调成功时更新下拉列表。您已经知道要添加的选项的名称，因此该部分很简单，但是如果您需要一些.NET逻辑，例如，对于新创建的记录的ID，您需要让您的webmethod返回该信息

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中无法复制的内容进行排序），您将必须返回所有信息，在Web方法中看起来像这样：

[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>'));
        }

    }
});

Answer 2

您可以看到my answer其他问题。如果您的用户使用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>

在AJAX调用返回新响应后，<span id="select_container">内的所有内容都将被替换。

如果目标用户仅使用Firefox，则使用任何方法将option添加到select元素都可以。

通过jquery ajax调用webmethod和更新下拉列表添加记录

2 个答案: