使用AJAX动态填充下拉列表VB.Net JQuery

时间：2013-07-17 19:05:44

标签： vb.net jquery

我正在尝试进行AJAX调用以在另一个下拉列表中选择值时填充下拉列表。目前，我收到一个SyntaxError：无效的字符错误，但如果我删除“dataType：json”，我得到这看起来像HTML代码的混乱。必须使用值和文本对绑定下拉列表。这是与下拉列表相关的ASPX代码：

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master"      CodeBehind="Request.aspx.vb" Inherits="NDBEDP.Request" MaintainScrollPositionOnPostback="true" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="FeaturedContent" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
    <script type="text/javascript">
        $('.entityDrop').live('change', function (event) {
            loadStateDrop()
        });

        var loadStateDrop = function () {
            var data = "{'entity':'"+ $('#<%=ddlEntity.ClientID%> option:selected').val()+"'}"
            alert("before ajax(), val: " + $('#<%=ddlEntity.ClientID%> option:selected').val());
            $.ajax({
                type: "POST",
                url: "Request.aspx/loadStates",
                datatype: "JSON",
                data: data,
                contentType: "application/json; charset=utf-8",
                success: function (list) {
                    alert(list);
                    $('.stateDrop').empty()
                    $.each(list, function (element) {
                        var optn = document.createElement("OPTION");
                        optn.text = element.StateAbbr;
                        optn.value = element.StateID;
                        $('.stateDrop').append(optn);
                    });
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert("Error updating dropdowns: " + errorThrown);
                }
            });
        };
    </script>
    <asp:panel ID="userInput" runat="server">
        <asp:panel id="userInformation" runat="server" BorderStyle="None" style="margin-bottom: 0px">
            <asp:DropdownList cssClass="entryField, entityDrop" ID="ddlEntity" runat="server" Width="95%"></asp:DropdownList>
            <asp:DropDownList cssClass="entryField, stateDrop" ID="ddlExpenseState" runat="server" Width="18%"></asp:DropDownList>
            <asp:DropDownList ID="ddlExpensePeriod" runat="server" cssClass="entryField" Width="50%"></asp:DropDownList>
            <asp:DropDownList ID="ddlExpenseYear" runat="server" cssClass="entryField" Width="20%"></asp:DropDownList>
        </asp:panel>
    </asp:panel>
</asp:Content>

这是我的VB.Net代码：

Imports NDBEDP.StringExtensions
Imports NDBEDP.DropdownExtensions
Imports NDBEDP.GridViewExtensions
Imports System.IO
Imports System.Web.Services
Imports System.Web.Script.Services
Imports System.Web.Script.Serialization

Public Class Request
    Inherits System.Web.UI.Page

    <WebMethod()> _
    Public Shared Function loadStates(entity As Integer) As Dictionary(Of String, Integer)
        Dim expenseStates As DataSet = (New RequestBus).getExpenseStates(entity)
        Dim returnStates As New Dictionary(Of String, Integer)
        For i As Integer = 0 To expenseStates.Tables(0).Rows.Count - 1
            returnStates.Add(expenseStates.Tables(0).Rows(i).Item("StateAbbr"), expenseStates.Tables(0).Rows(i).Item("StateID"))
        Next
        Return returnStates
    End Function
End Class

如果您需要查看任何其他代码来帮助我，请告诉我们。

我试过通过WebServices做到这一点，但也无法让它工作。一旦我包含了一个WebService并正确地连接它，在添加任何我自己的代码之前，我得到：第3行的第1列，第1列Web服务脚本1002语法错误的JavaScript严重错误。我更愿意在WebService中执行此操作，但我对可以开始工作的任何事情持开放态度。

有谁知道我在这里做错了什么？

编辑：已更改为与当前代码匹配

2 个答案:

答案 0 :(得分：0)

首先，您不需要序列化从ASP.NET AJAX页面方法返回的数据，因为它默认情况下JSON序列化数据。

其次，你为什么不从你的方法返回一个类型？它是Function并且没有声明返回类型。您似乎想要返回List(Of T)，以便您可以遍历结果客户端。

以下是一个示例页面方法，它将当前时间返回为String：

<WebMethod> _
Public Shared Function GetDate() As String
    Return DateTime.Now.ToString()
End Function

请阅读此内容以更加熟悉Using jQuery to directly call ASP.NET AJAX page methods

答案 1 :(得分：0)

这是最终的jQuery代码：

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master"      CodeBehind="Request.aspx.vb" Inherits="NDBEDP.Request" MaintainScrollPositionOnPostback="true" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="FeaturedContent" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
    <script type="text/javascript">
        $('.entityDrop').live('change', function (event) {
            loadStateDrop()
        });

        var loadStateDrop = function () {
            var data = "{'entity':'"+ $('#<%=ddlEntity.ClientID%> option:selected').val()+"'}"
            $.ajax({
                type: "POST",
                url: "Request.aspx/loadStates",
                datatype: "JSON",
                data: data,
                contentType: "application/json; charset=utf-8",
                success: function (list) {
                    $('.stateDrop').empty();
                    if (list.hasOwnProperty("d")) {
                         $.each(list.d, function (key, value) {
                             var optn = document.createElement("OPTION");
                             optn.text = key;
                             optn.value = value;
                             $('.stateDrop').append(optn);
                         });
                     }
                     else {
                         $.each(list, function (key, value) {
                             var optn = document.createElement("OPTION");
                             optn.text = key;
                             optn.value = value;
                             $('.stateDrop').append(optn);
                         });
                     }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert("Error updating dropdowns: " + errorThrown);
                }
            });
        };
    </script>
    <asp:panel ID="userInput" runat="server">
        <asp:panel id="userInformation" runat="server" BorderStyle="None" style="margin-bottom: 0px">
            <asp:DropdownList cssClass="entryField, entityDrop" ID="ddlEntity" runat="server" Width="95%"></asp:DropdownList>
            <asp:DropDownList cssClass="entryField, stateDrop" ID="ddlExpenseState" runat="server" Width="18%"></asp:DropDownList>
            <asp:DropDownList ID="ddlExpensePeriod" runat="server" cssClass="entryField" Width="50%"></asp:DropDownList>
            <asp:DropDownList ID="ddlExpenseYear" runat="server" cssClass="entryField" Width="20%"></asp:DropDownList>
        </asp:panel>
    </asp:panel>
</asp:Content>

这是我的VB.Net代码（我可能不需要所有的包含）：

Imports NDBEDP.StringExtensions
Imports NDBEDP.DropdownExtensions
Imports NDBEDP.GridViewExtensions
Imports System.IO
Imports System.Web.Services
Imports System.Web.Script.Services
Imports System.Web.Script.Serialization

Public Class Request
    Inherits System.Web.UI.Page

    <WebMethod()> _
    Public Shared Function loadStates(entity As Integer) As Dictionary(Of String, Integer)
        Dim expenseStates As DataSet = (New RequestBus).getExpenseStates(entity)
        Dim returnStates As New Dictionary(Of String, Integer)
        For i As Integer = 0 To expenseStates.Tables(0).Rows.Count - 1
            returnStates.Add(expenseStates.Tables(0).Rows(i).Item("StateAbbr"), expenseStates.Tables(0).Rows(i).Item("StateID"))
        Next
        Return returnStates
    End Function
End Class

已编辑以利用this article

相关问题
最新问题