使用jQuery ajax在母版页中加载后,带有更新面板的aspx页面无效

时间:2014-05-25 06:16:03

标签: c# jquery asp.net ajax updatepanel

我有一个包含更新面板的aspx页面。并在主页面中使用div内部的jquery ajax加载该页面。但是,内容关闭更新面板只是第一次更新而其他时间没有更新。

我的母版页

<head id="Head1" runat="server">
    <script src="Script/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script src="Script/site.js" type="text/javascript"></script>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
    <div id="content">
        <div class="main">
            <asp:ContentPlaceHolder ID="contentMain" runat="server">
            </asp:ContentPlaceHolder>
        </div>
    </div>
</form>
</body>

我的ASPX页面

<head runat="server">
</head>
<body>
    <form id="form2" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel runat="server" ID="UpdatePanel" UpdateMode="Conditional">
        <ContentTemplate>
            <div style="text-align:center; margin:50px">
                <asp:Button ID="btnUpdate" runat="server" Text="update" Width="50px" 
                    onclick="btnUpdate_Click"/>
                <br />
                <asp:Label ID="lblTime" runat="server"></asp:Label>
            </div>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="btnReg" EventName="Click" />
        </Triggers>
    </asp:UpdatePanel>
    </form>
</body>
</html>

我的ASPX页码背后

protected void btnUpdate_Click(object sender, EventArgs e)
{
    lblTime.Text = DateTime.Now.ToString();
}

我的JavaScript

$(document).ready(function () {
    $(window).load(function () {
        loadContent();
    });
});

function loadContent() {
    $.ajax({
        type: 'get',
        url: 'Page.aspx',
        contentType: 'application/html; charset=utf-8',
        dataType: 'html',
        beforeSend: sendContent,
        success: successContent,
        error: errorContent
    });
}
function sendContent() {
    ////loading
}
function successContent(data, status) {
    $("#content .main").html(data);
    $("#content").show();
}
function errorContent(request, status, error) {
    ////error
}

非常感谢

1 个答案:

答案 0 :(得分:0)

在您提供的代码中,您永远不会调用函数loadContent。我将loadContent添加到jQuery ready()并且它可以在我的计算机上运行。

如果页面上有两个表单,则有两个“StateView”变量。当asp.net检查变量时,它会抛出错误,因为状态变量第二次来自Site.Manager而不是来自Page.aspx。我刚删除了母版页上的表单,现在按钮工作正常。

我的母版页

<%@ Master Language="C#" CodeBehind="Site.master.cs" Inherits="WebApplication4.SiteMaster" %>

<!DOCTYPE html>

<html lang="en">
<head id="Head1">
    <script src="Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script src="Scripts/site.js" type="text/javascript"></script>

</head>
<body>

    <div id="content">
        <div class="main">

        </div>
    </div>

</body>
</html>

我的Page.aspx

<%@ Page Language="C#" CodeBehind="Page.aspx.cs" Inherits="WebApplication4.Page" %>

<form id="form2" enableviewstate="false" runat="server">
<asp:ScriptManager ID="ScriptManager1">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:Button ID="btnUpdate" Text="update" Width="50px" 
                onclick="btnUpdate_Click" runat="server"/>
        <asp:Label ID="lblTime" runat="server"></asp:Label>
                //////////// Some Tags ///////////
    </ContentTemplate>

</asp:UpdatePanel>
</form>

我的ASPX页码背后

protected void btnUpdate_Click(object sender, EventArgs e)
{
    lblTime.Text = DateTime.Now.ToString();
}

<强> site.js

function loadContent() {
    $.ajax({
        type: 'get',
        url: 'Page.aspx',
        contentType: 'application/html; charset=utf-8',
        dataType: 'html',
        beforeSend: sendContent,
        success: successContent,
        error: errorContent
    });
}
function sendContent() {
    ////loading
}
function successContent(data, status) {
    $("#content .main").html(data);
    $("#content").show();
}
function errorContent(request, status, error) {
    ////error
}
$(function () {
    loadContent();
});
相关问题