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

How to bind a controls data using jQuery and Static Page Method?

本文关键字：方法 绑定 控件 数据 静态 何使用 jQuery      更新时间：2023-09-26

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

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

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

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

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

关键是我希望该静态方法返回要绑定到我的列表框控件所需的数据。但是我不知道该怎么做。这是我目前的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，但我真的不想这样做。

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

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

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

  $(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.');
              }
           });
     });

正如 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>
相关文章：