ASPX中简单的jQuery Hello World

时间:2013-02-09 03:24:59

标签: c# javascript jquery asp.net

我真的不明白为什么这个简单的例子不起作用:S 我有一个WebApplication,我有一个脚本:

function myAlert() {    
    $("#Button1").click(function () {
        alert("Hello world!");
    });
}

在我的asp页面中,我有这个简单的代码

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Graph.aspx.cs" Inherits="WebApplication.Graph" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">  
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:Button ID="Button1" runat="server" Text="Button" Width="100px"/>
</asp:Content>

最后我在cs中注册了脚本:

   protected override void OnPreLoad(EventArgs e)
   {
        Page.ClientScript.RegisterClientScriptInclude("jQuery",
                        ResolveUrl(@"Scripts\jquery-1.4.1.js"));
        Page.ClientScript.RegisterClientScriptInclude("jMyAlert",
            ResolveUrl(@"Scripts\MyAlert.js"));
        // check if the start up script is already registered with a key
        if(!Master.Page.ClientScript.IsStartupScriptRegistered("jMyAlert"))
        {
            // since it is not registered, register the script
            Master.Page.ClientScript.RegisterStartupScript
                (this.GetType(), "jMyAlert", "myAlert();", true);
        }
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        ScriptManager.RegisterStartupScript(this, this.GetType(), "jMyAlert", "myAlert()", true);
    }

我不明白这有什么问题。我试图将scrit直接包含在aspx中,但没有。然后我尝试一个简单的html页面,它工作正常。

我想在我的页面中使用一个使用jQuery的绘图库,所以如果这样一个简单的例子让我遇到这么多问题,我很难成功... lol

2 个答案:

答案 0 :(得分:1)

尝试在您使用的任何浏览器中检查调试控制台,以查看“$”是否未定义。听起来你在使用完整的ASP.NET方法时缺少jquery。

答案 1 :(得分:0)

由于使用母版页,该按钮的ID不会是#Button1。尝试查看来源以了解我的意思。

要解决此问题,您需要能够在JavaScript中查看实际ID。

Page_Load方法中的类似内容:

ScriptManager.RegisterClientScriptBlock(this, this.GetType(),
    "Button1Id", string.Format("var Button1Id = '{0}';", Button1.ClientID), true);

将在您的页面中创建以下内容:

<script type="text/javascript">
//<![CDATA[
var Button1Id = 'Button1';//]]>
</script>

这意味着您的myAlert方法需要如下所示:

function myAlert() {
    $("#" + Button1Id).click(function () {
        alert("Hello world!");
    });
}