1
$("#result").load("Child.aspx");
The Child.aspx consists of an asp:Button.
Problem - OnClick of asp:Button is causing Child.aspx to be opened instead of being embedded in Parent.aspx as before the click event.
Expected - Child.aspx should remain embedded in Parent.aspx onClick of the Asp:Button
What we tried: Added an UpdatePanel & ContentTemplate but the Child.aspx page is still getting refreshed.
Parent.aspx:-
onClick of Button will load another page i.e Child.aspx page within the <div id="result"></div> of the Parent page itself using
$("#result").load("Child.aspx");
The Child.aspx page gets loaded inside the Parent.aspx page. The Child.aspx page consists of an Asp.net button named "ChildPageButton". onClick of ChildPageButton reloads the page and causes the Parent.aspx page to dissapear.
The Child.aspx page appears as an individual page, rather it should remain embedded inside the Parent.aspx
Parent.aspx -
Expand|Select|Wrap|Line Numbers
- <%@ 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");
- $("#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>
- Parent.aspx.cs -
- 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)
- {
- if (!ClientScript.IsStartupScriptRegistered("openSection"))
- {
- Page.ClientScript.RegisterStartupScript(this.GetType(),
- "openSection", "openSection();", true);
- }
- }
- }
- }
- Child.aspx -
- <%@ 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:UpdatePanel>
- <ContentTemplate>
- <asp:Button ID="Button1" runat="server" Text="AspPageButton"/>
- </ContentTemplate>
- </asp:UpdatePanel>
- </div>
- </form>
- </body>
- </html>
- Child.aspx.cs -
- 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 Child : System.Web.UI.Page
- {
- protected void Page_Load(object sender, EventArgs e)
- {
- }
- }
- }
Thanx in advance
