無法使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

您的代碼非常接近，但是問題在於您試圖從客戶端訪問ServerSide對象（例如Label和DropDownList）。

例如，一個asp：Label控件在呈現到客戶端的Web瀏覽器時實際上是HTML div。 Visual Studio中標簽的ID可能是“ LabelMessage”，但是根據頁面和控件的布局，可以在客戶端（即，對於單擊了FireFox或IE中的視圖源的用戶）生成ID。 “ 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!";
}

瞧！ 這對我有用-

我希望它也對您有用，希望問題出在哪里； 您的大多數示例都可以正常工作/設置。