Question

我们正在父页面parent.aspx中加载子页面，如下所示 -

$("#result").load("Child.aspx");

Child.aspx由一个asp：Button组成。

问题 - 单击asp：Button导致打开Child.aspx，而不是像Click事件之前那样嵌入Parent.aspx。

预计 - Child.aspx应该保留在Asp：Button

的Parent.aspx onClick中

我们尝试了什么：添加了UpdatePanel＆amp; ContentTemplate但Child.aspx页面仍在刷新。

[Snap1] Parent.aspx：

注意：onClick按钮将使用

加载另一个页面，即父页面本身的<div id="result"></div>内的Child.aspx页面

 $("#result").load("Child.aspx");

[Snap2] Parent.aspx：

Parent.aspx Snap2

注意：Child.aspx页面在Parent.aspx页面中加载。 Child.aspx页面包含名为＆＃34; ChildPageButton＆＃34;的Asp.net按钮。 onClick of ChildPageButton重新加载页面并导致Parent.aspx页面消失。

[Snap3] Child.aspx：

[Snap3]

代码 -

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Parent.aspx.cs" Inherits="NewLab.Parent" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/redmond/jquery-ui.css" type="text/css" media="all" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js" type="text/javascript"></script>
    <script src="/js/jquery.mousewheel.js" type="text/javascript"></script>
    <script src="/js/jquery.colorbox.js"></script>
    <title></title>

     <script type="text/javascript">
         function openSection() {
             alert("openSection");
             //Loads the Child.aspx page inside the Parent.aspx result div. 
             $("#result").load("Child.aspx");
         }
    </script>

</head>
<body>
    <form id="form1" runat="server">
         <asp:ScriptManager       
            runat="server">
        </asp:ScriptManager>
        <h1>Parent Page</h1>
     <asp:Button ID="lnkbtn" runat="server" Text="Button" OnClick="Button1_Click" Height="51px" Width="218px" />
       <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                     <ContentTemplate>
        <div id="result"></div>
                </ContentTemplate>
            </asp:UpdatePanel>
    </form>
</body>
</html>


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace NewLab
{
    public partial class Parent : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            //This invokes the javascript function openSection
            if (!ClientScript.IsStartupScriptRegistered("openSection"))
            {
                Page.ClientScript.RegisterStartupScript(this.GetType(),
                    "openSection", "openSection();", true);
            }
        }
    }
}



<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Child.aspx.cs" Inherits="NewLab.Child" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js" type="text/javascript"></script>
   <script type="text/javascript">
       function calljs() {

           alert("click");
           event.preventDefault();
       }
   </script>
</head>
<body>
    <form id="form1" runat="server">
   <div style="background-color:blue; height:400px">
            <h1>CHILD PAGE LOADED!</h1>
        <input type="button" value="htmlbutton" />
            <asp:Button ID="Button1" runat="server" Text="AspPageButton"/>
        </div>
    </form>
</body>
</html>**/

上面的代码有助于重现问题。可以观察到onClick of ChildPageButton重新加载页面并导致Parent.aspx页面消失。 Child.aspx页面显示为单独的页面，而应该保留在Parent.aspx页面中，如Snap2所示。

提前致谢。

Answer 1

问题是，当您的子按钮导致回发时，它是子页面的回发，因此子页面将被重新加载。我建议您考虑使用ASP.NET User Controls而不是JQuery来实现您的目标。

asp.net使用jQuery Ajax - 父页面消息onClick在父页面内动态加载的子页面中的按钮

1 个答案: