0

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

目前我正在使用staticASP.NET 页面方法异步使用jQuery和ajax调用，如本文所示（如何连接 DropDownList 以对服务器进行 AJAX 调用？），它运行良好。

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

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

  1. 让我的静态页面方法返回一个json包含我的集合数据的字符串，然后在连接到change下拉列表方法的原始 jQuery 方法中使用该字符串来填充单独的列表框。
  2. IList<>与上面相同，但如果返回 json 不是一个好主意，则返回.NET或可比较的。

重点是我希望该静态方法返回绑定到我的列表框控件所需的数据。但是我不知道该怎么做。这是我当前的 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我的服务器端方法可以访问其他控件的地方，但我真的不想这样做。

4

3 回答 3

0

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

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

于 2013-09-09T02:12:22.280 回答
0

我实际上正在寻找一个更完整的例子，并让解决方案与下面的代码一起工作：

  $(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.');
              }
           });
     });
于 2013-09-11T14:23:36.447 回答
-1

正如评论中提到的迈克尔 B，您可以使用以下方法处理从 ajax 调用返回的任何数据success:

<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>
于 2013-09-09T03:03:38.563 回答