0

当在另一个下拉列表中选择一个值时，我正在尝试进行 AJAX 调用以填充下拉列表。目前，我收到 SyntaxError: Invalid Character 错误，但如果我删除“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 行的 JavaScript 严重错误，第 1 列 Web 服务脚本 1002 语法错误。我更愿意在 WebService 中执行此操作，但我愿意接受任何我可以开始工作的事情。

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

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

4

2 回答 2

0

First off, you do not need to serialize the data coming back from your ASP.NET AJAX Page Method, as it JSON serializes the data by default.

Second, why are you not returning a type from you method? It is a Function and there is no return type declared. It appears you want to return a List(Of T) so that you can loop through the results client-side.

Here is an example page method that returns the current time as a String:

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

Please read this to become more familiar with Using jQuery to directly call ASP.NET AJAX page methods

于 2013-07-17T19:10:44.147 回答
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

编辑以利用本文

于 2013-07-18T13:26:48.077 回答