Question

目标：通过更改下拉列表来异步调用服务器端方法以获取数据，并使用UpdatePanels填充单独的列表框而不是。

目前我正在使用static ASP.NET页面方法异步使用jQuery和ajax调用，如此帖（How to wire up a DropDownList to make AJAX calls to the server?）和它运作良好。

整个目的是为了防止使用前几年发生的UpdatePanel纠结的混乱，这似乎是一个不错的选择。我没有意识到的是，页面方法必须是static，而您无法访问任何页面控件或上下文。因此，尝试从下拉列表选择中进行此调用以填充另一个控件的数据是不可能的。我无法看到其他控件。

所以，在我放弃并返回更新面板之前，我想做的是尝试执行以下操作之一：

让我的静态页面方法返回一个带有我的集合数据的json字符串，然后我将其用于连接到下拉列表的change方法的原始jQuery方法，以填充单独的列表框。
与上面相同，但返回一个.NET IList<>或类似的，如果返回json不是一个好主意。

要点是我希望该静态方法返回所需数据以绑定到我的列表框控件。但是，我不知道该怎么做。这是我目前的jQuery方法：

<script type="text/javascript">
      $(document).ready(function () {
         // Add the page method call as an onclick handler for the control.
         $("<%= MyDDL.ClientID %>").click(function () {
               $.ajax({
                  type: "POST",
                  url: "Default.aspx/MyDDL_SelectedIndexChanged",
                  data: "{}",
                  contentType: "application/json; charset=utf-8",
                  dataType: "json"
               });
            });
            });
</script>

以下是原始下拉列表：

<asp:DropDownList ID="MyDDL" runat="server" Width="340px" />

以下是在调用名为MyDDL_SelectedIndexChanged的静态方法后根据下拉列表的选择填充的控件：

<asp:ListBox ID="ListBox2" runat="server" Width="340px" SelectionMode="Multiple" />

这是我当前的静态页面方法：

[WebMethod]
public static string MyDDL_SelectedIndexChanged()
{
    var myClass = new MyClass()
    var data = myClass.GetDataCollection()
    JavaScriptSerializer serializer = new JavaScriptSerializer();
    string jsonString = serializer.Serialize(data);
}

有没有办法获取这个返回的数据并将其绑定在上面的jQuery方法中？我的救助是回到使用UpdatePanel我的服务器端方法可以访问其他控件，但我真的不想这样做。

Answer 1

有一个名为jsRender的javascript项目可能就是您所需要的：

http://weblogs.asp.net/stevewellens/archive/2011/12/01/goodby-jquery-templates-hello-jsrender.aspx

Answer 2

我实际上是在寻找一个更完整的示例，并让解决方案使用以下代码：

  $(document).ready(function () {
     MyDDL_OnChangeHandler();
  });

  function MyDDL_OnChangeHandler() {
     // Add the page method call as an change handler for the MyDDL DropDownList.
     // This will call the static page method, and use the returned results to populate the 'MyListBox' listbox control.
     $('#<%=MyDDL.ClientID %>').change(function () {
                 var val = $(this).val();
                 var text = $(this).children("option:selected").text();
                 var $lbxCtrl = $('#<%=MyListBox.ClientID %>');
           $lbxCtrl.attr('disabled', 'disabled');
           $lbxCtrl.empty();
           $lbxCtrl.append('<option value="0">< Loading Please Wait... ></option>');
           $.ajax({
              type: "POST",
              url: "Default.aspx/MyDDL_SelectedIndexChanged",
              contentType: "application/json; charset=utf-8",
              dataType: "json",
              data: "{'ID':'" + val + "', 'Name':'" + text + "'}",
              success: function (data) {
                 $lbxCtrl.removeAttr('disabled');
                 $lbxCtrl.empty();
                 if (data.d == null) {
                    return;
                 }
                 $.each(data.d, function (i, data) {
                    $users.append('<option value="' + data.Value + '">' + data.FullName + ' (' +  adUser.data+ ')' +'</option>');
                 });
              },
              error: function () {
                 $lbxCtrl.empty();
                 $lbxCtrl.append('<option value="0">< Error Loading Data ></option>');
                 alert('Failed to retrieve data.');
              }
           });
     });

Answer 3

正如Michael B在评论中提到的，您可以使用success:

处理从ajax调用返回的任何数据

<script type="text/javascript">
      $(document).ready(function () {
         // Add the page method call as an onclick handler for the control.
         $("#<%= MyDDL.ClientID %>").click(function () {
               $.ajax({
                  type: "POST",
                  url: "Default.aspx/MyDDL_SelectedIndexChanged",
                  data: "{}",
                  contentType: "application/json; charset=utf-8",
                  dataType: "json",
                  success: function(data) {
                       // do stuff with the "data" that is returned
                  },
                  error: function(data) {
                       // handle any errors here
                  }
               });
            });
            });
</script>

如何使用jQuery和静态页面方法绑定控件数据？

3 个答案: