无法使 AJAX 代码工作

Question

刚开始使用 AJAX 并尝试了 microsoft 70515 书中的一个简单示例。但是，代码似乎不起作用，我不知道为什么不能 - 因为它似乎没问题。

• 编辑：由于某种原因，部分代码没有发布，（即使我现在正在写这个代码看起来很奇怪，好像我不能发布我的所有代码？？）我已经修复了现在-但是反对票是怎么回事？我真的看不出我的问题有什么愚蠢的。请解释一下。

希望有人能发现问题并在这里帮助我:)

标记.aspx：

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="AjasxTest._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> 


<br /><br />

<script type="text/javascript">
    function ClientCallbackFunction(args) {
        window.LabelMessage.innerText = args;
    }
</script>

</asp:Content>
<asp:Content ID="Content1" runat="server" ContentPlaceHolderID="FooterContent">
<asp:DropDownList ID="DropDownListChoice" runat="server" OnChange="MyServerCall(DropDownListChoice.value)">
<asp:ListItem>Choice 1</asp:ListItem>
<asp:ListItem>Choice 2</asp:ListItem>
<asp:ListItem>Choice 3</asp:ListItem>
</asp:DropDownList>
<asp:Label ID="LabelMessage" runat="server"></asp:Label>
</asp:Content>

代码隐藏：

namespace AjasxTest
{
    public partial class _Default : System.Web.UI.Page, System.Web.UI.ICallbackEventHandler
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            string callbackRef = Page.ClientScript.GetCallbackEventReference(this, "args", "ClientCallbackFunction", "");

            string callbackScript = String.Format("function MyServerCall(args) {{{0};}}", callbackRef);

            Page.ClientScript.RegisterClientScriptBlock(this.GetType(),"MyServerCall", callbackScript, true);
        }

        public string GetCallbackResult()
        {
            return _callbackArgs;
        }

        string _callbackArgs;

        public void RaiseCallbackEvent(string eventArgument)
        {
            _callbackArgs = eventArgument;
        }
    }
}

Answer 1

您的 JS 函数称为 ClientCallbackFunction，但您在 DropDownList OnChange 事件中将其称为 MyServerCall。

<script type="text/javascript">
    function ClientCallbackFunction(args) {
        window.LabelMessage.innerText = args;
    }
</script>

...

<!-- Call correct JS function in OnChange -->
<asp:DropDownList ID="DropDownListChoice" runat="server" OnChange="ClientCallbackFunction(DropDownListChoice.value)"> 

...

Answer 2

您的代码非常接近，但问题在于您试图从客户端访问服务器端对象（例如 Label 和 DropDownList）。

例如，一个 asp:Label 控件，当呈现给客户端的 Web 浏览器时，实际上是一个 HTML div。 Visual Studio 中标签的 ID 可能是“LabelMessage”，但根据页面和控件的布局，客户端的 ID（即，对于在 FireFox 或 IE 中单击查看源代码的用户）可以生成为“FooterContent_LabelMessage1”或类似的东西。

ASP.net 控件确实带有一个属性，可用于访问 JavaScript 中生成的 ID，可通过 YourControl.ClientID 访问。

我已对您的代码进行了这些更改，并且能够使其正常工作。我还在 JavaScript 中添加了一些空引用检查，以确保我们尝试引用的对象确实存在。请注意，我已经在一个空白的全新 ASP.net 表单应用程序中对此进行了测试。

这是默认页面（前端）的更新代码：

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="TheAnswer._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <br />
    <br />
    <script type="text/javascript">
        function ClientCallbackFunction(args) {
            var labelMessage = $get("<%= LabelMessage.ClientID %>");
            if (labelMessage) {
                labelMessage.innerText = args;
            }
        }
        function MyServerCallWrapper() {
            var dropDown = $get("<%= DropDownListChoice.ClientID %>");
            if (dropDown) {
                MyServerCall(dropDown.value);
            }
        }
    </script>
</asp:Content>
<asp:Content ID="Content1" runat="server" ContentPlaceHolderID="FooterContent">
    <asp:DropDownList ID="DropDownListChoice" runat="server" onchange="javascript:MyServerCallWrapper();">
        <asp:ListItem>Choice 1</asp:ListItem>
        <asp:ListItem>Choice 2</asp:ListItem>
        <asp:ListItem>Choice 3</asp:ListItem>
    </asp:DropDownList>
    <asp:Label ID="LabelMessage" runat="server"></asp:Label>
</asp:Content>

注意 $get() 函数是一个内置的 ASP.net（不是 JQuery）函数，它是 document.getElementById() 的简写——它们是可互换的并且做同样的事情。您需要将带引号的 ClientID 传递给 JavaScript 中的这些方法，它会返回对您尝试访问的对象的引用。

只是为了好玩，我修改了一个后端函数，以便您知道回调是在服务器上处理的：

public string GetCallbackResult()
{
    return _callbackArgs + " from the server!";
}

瞧！这对我有用-

我希望它也对你有用，我希望问题出在哪里很清楚；您的大部分示例都可以正常工作/设置。