problem with jqmodal inside an update panel - updatepanel

I have a control that I need to display as a page or as a modal dialog.
In the page_load event I look to see if the modal property is set and if so, I register a script to invoke jqmodal. Here is the code:
protected void Page_Load(object sender, EventArgs e)
{
if (this.Modal) // Show as a modal dialog
{
selector.Attributes.Add("class", "jqmWindow");
selector.Attributes.Add("style", "width:1100px;height:600px;");
string script = "<script type=\"text/javascript\">$().ready(function() { $(" + "'#" + selector.ClientID + "').jqm({ modal: true }).jqmShow();});</script>";
//script = "<script type=\"text/javascript\">confirm('hello');</script>";
ScriptManager.RegisterStartupScript(this,this.GetType(),"duh",script,false);
}
}
This control is used on a page that has an update panel.
This all works well in Firefox and IE for the INITAL page load and any refreshes. However when I postback I get problems in IE and FF:
In IE, the div that represents the modal (in this case, selector) is shifted down and to the right about 500 px.
In firefox, the darkened area around the div becomes progressively darker with each postback.
If I remove the update panel from the host page (it's actually in the master page) this code works.
I have tried not executing the above code on postback but that simply disables jqmodal. I'm really stumped If anyone can help with this I would appreciate it.

The problem is that on PostBack, the jQuery div is moved down and to the right. The div after page load looks like this (renders correctly):
DIV class="jqmWindow jqmID1" id=selector style="DISPLAY: block; Z-INDEX: 3000; WIDTH: 1100px; HEIGHT: 600px" _jqm="1" jQuery1238701349279="3">
After Async PostBack it looks like this (renders incorrectly):
DIV class="jqmWindow jqmID2" id=selector style="DISPLAY: block; Z-INDEX: 3000; WIDTH: 1100px; TOP: 146px; HEIGHT: 600px" _jqm="2" jQuery1238701490978="5">
Removing the update panel solves this problem......I don't know that it is the problem.
I created a project with some pages with the just relevent code. The pages are site.master, List.aspx/cs and PartSelector.ascx/cs
// site.master - nothing in codebehind
<%# Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="Site" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="http://localhost/Scripts/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="http://localhost/Scripts/jqueryUI/ui/ui.core.js" type="text/javascript"></script>
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" > </asp:ScriptManager>
<div>
<asp:updatepanel id="upmaincontent" runat="server" updatemode="conditional">
<contenttemplate>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
// list.aspx
<%# Page Language="C#" MasterPageFile="~/Site.master" CodeFile="List.aspx.cs" Inherits="List" Title="Parts Master List" %>
<%# Register Assembly="System.Web.Entity, Version=3.5.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" Namespace="System.Web.UI.WebControls" tagprefix="asp" %>
<%# Register Src="~/Controls/PartSelector.ascx" TagName="PartSelector" TagPrefix="sam" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server" />
<center>
<div><center><h3><%= "Part Selector" %></h3></center></div>
<div>
<center>
<sam:PartSelector ID="PartSelector1" runat="server" Modal="true" ActiveOnly="false" />
</center>
</div>
</center>
</asp:Content>
// list.aspx.cs
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Xml.Linq;
using System.Web.DynamicData;
using System.Linq.Expressions;
public partial class List : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
PartSelector1.ActivateSelector("");
}
}
}
// PartSelector.ascx
<%# Control Language="C#" AutoEventWireup="true" CodeFile="PartSelector.ascx.cs" Inherits="PartSelector" %>
<link href="http://localhost/Scripts/jqModal/jqModal.css" rel="stylesheet" type="text/css" />
<script src="http://localhost/Scripts/jqModal/jqModal.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
var IsModal = false; // Initialize a variable to indicate if the page is to be displayed inside a jqModal dialaog
$().ready(function() { displayPage(); }); // Execute dispalyPage when the dom is ready
function displayPage() {
confirm('displaypage');
IsModal = <%= this.Modal ? "true" : "false" %> // Set IsModal based on a property in codebehind
if(IsModal)
{
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(displayPageAsync); // handle async postbacks
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequestHandler); // clean up before starting an async postback
$("#selector").addClass("jqmWindow"); // add some css to resize the display to fit the modal dialog
$("#selector").css({width:"1100px", height: "600px"});
$("#selector").jqm({ modal: true, onHide: hidejqm }).jqmShow();
}
}
function displayPageAsync(sender, args)
{
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm.get_isInAsyncPostBack() ) { // Prevent displayPage from being called twice on the initial page load
confirm('page loaded, async postback.');
displayPage();
}
}
function beginRequestHandler(sender, args) {
confirm('begin async postback');
$("#selector").jqmHide(); // Hide a dialog from last postback
}
function hidejqm(hash) {
confirm('hidejqm');
hash.w.fadeOut('2000', function() { hash.o.remove(); });
}
</script>
<div id="selector">
<center>
<asp:LinkButton ID="LinkButton1" runat="server" Text="Click here to postback" OnClick="Postback_Click"></asp:LinkButton><br /><br />
<asp:LinkButton ID="CancelButton" runat="server" Text="Cancel" OnClick="CancelButton_Click" CssClass="CommandButton"></asp:LinkButton>
</center>
</div>
// PartSelector.ascx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Linq.Expressions;
public partial class PartSelector : System.Web.UI.UserControl
{
public bool Modal { get; set; }
public void ActivateSelector(string searchString)
{
this.Visible = true;
}
protected void CancelButton_Click(object sender, EventArgs e)
{
this.Visible = false;
}
protected void Postback_Click(object sender, EventArgs e)
{
int x = 1;
}
}

Related

SSRS report server Data issue

I have deployed SSRS report on Production environment. When 3 or more user run the same report on production then report server load other user requested data.
For Example-
Below 3 request-
User A requested Report X with Paremeter A
User B requested Report X with Paremeter B
User C requested Report X with Paremeter C
Output from SSRS server -
User A requested Report X with Paremeter A
User B requested Report X with Paremeter A
User C requested Report X with Paremeter C
Note- This problem occur when all the users request report in same time.
We had same issue, if you are using ReportViewerForMVC from NuGet Package manager which is third party control may cause problem, follow below points
we will re-use code from ReportViewerForMvc and modify as per our need
1
Install-package ReportViewerForMvc and press enter. After few minutes the package will be installed
2
This installation will add to the project: 2 assemblies (Microsoft.ReportViewer.WebForms & ReportViewerForMvc)to references an .aspx page (ReportViewerWebForm.aspx) and httphandlers settings in the web.config file.
Note: the .aspx page added does not have a .cs file.
You can now use this .aspx page and code everything in controller, but I am using a slightly different path for code reusability and consistency)
Add a new folder ‘Reports” to the project, and then add a new webform .aspx page (ReportTemplate.aspx to the Reports folder
3
Copy the contents (as shown in fig) from ReportViewerWebForm.aspx and replace the content of ReportTemplate.aspx with this.
Note: Please do not copy #page directive, copy only the highlighted section.
4
<%# Register Assembly="Microsoft.ReportViewer.WebForms, Version=11.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91"
Namespace="Microsoft.Reporting.WebForms" TagPrefix="rsweb" %>
<%--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">--%>
<!doctype html>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE11">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="scriptManagerReport" runat="server">
</asp:ScriptManager>
<rsweb:ReportViewer runat ="server" ShowPrintButton="false" Width="99.9%" Height="100%" AsyncRendering="true" ZoomMode="Percent" KeepSessionAlive="true" id="rvSiteMapping" SizeToReportContent="false" >
</rsweb:ReportViewer>
</div>
</form>
</body>
</html>
5
The ReportTemplate.aspx will change to this
6
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="ReportTemplate.aspx.cs" Inherits="ASPNETMVC_SSRS_Demo.Reports.ReportTemplate" %>
<%# Register Assembly="Microsoft.ReportViewer.WebForms, Version=11.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91"
Namespace="Microsoft.Reporting.WebForms" TagPrefix="rsweb" %>
<%--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">--%>
<!doctype html>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE11">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="scriptManagerReport" runat="server">
<Scripts>
<asp:ScriptReference Assembly="ReportViewerForMvc" Name="ReportViewerForMvc.Scripts.PostMessage.js" />
</Scripts>
</asp:ScriptManager>
<rsweb:ReportViewer runat ="server" ShowPrintButton="false" Width="99.9%" Height="100%" AsyncRendering="true" ZoomMode="Percent" KeepSessionAlive="true" id="rvSiteMapping" SizeToReportContent="false" >
</rsweb:ReportViewer>
</div>
</form>
</body>
</html>
7
Next delete the below scripts tag from ReportTemplate.aspx page
<Scripts>
<asp:ScriptReference Assembly="ReportViewerForMvc" Name="ReportViewerForMvc.Scripts.PostMessage.js" />
</Scripts>
8
Add additional attributes to the ReportViewercontrol as below
<rsweb:ReportViewer id="rvSiteMapping"runat ="server"ShowPrintButton="false"Width="99.9%"Height="100%"AsyncRendering="true"ZoomMode="Percent"KeepSessionAlive="true"SizeToReportContent="false"></rsweb:ReportViewer>
9
Now open ReportTemplate.aspx.cs file and add below code to the Page_load event, you need to the SSRS Server URL and SSRS report Folder path.
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace ASPNETMVC_SSRS_Demo.Reports
{
public partial class ReportTemplate : System.Web.UI.Page
{
protectedvoid Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
try
{
String reportFolder = System.Configuration.ConfigurationManager
.AppSettings["SSRSReportsFolder"].ToString();
rvSiteMapping.Height =
Unit.Pixel(Convert.ToInt32(Request["Height"]) - 58);
rvSiteMapping.ProcessingMode =
Microsoft.Reporting.WebForms.ProcessingMode.Remote;
rvSiteMapping.ServerReport.ReportServerUrl = new Uri("SSRS
URL"); // Add the Reporting Server URL
rvSiteMapping.ServerReport.ReportPath =
String.Format("/{0}/{1}", reportFolder, Request["ReportName"].ToString());
rvSiteMapping.ServerReport.Refresh();
}
catch (Exception ex)
{
}
}
}
}
}
10
Add the SSRSReportFolder path to the app settings in the web.config file.
<add key="SSRSReportsFolder" value="BIC_Reports"/>
11
Next, create an entity class ReportInfo.cs under Models folder
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace ASPNETMVC_SSRS_Demo.Models
{
public class ReportInfo
{
public int ReportId { get; set; }
public string ReportName { get; set; }
public string ReportDescription { get; set; }
public string ReportURL { get; set; }
public int Width { get; set; }
public int Height { get; set; }
public string ReportSummary { get; set; }
}
}
12
Next, we will add code to the Controller and the View Pages. There is no
change to the HomeController.cs. Add the following code to Home/Index view
page.
#{
ViewBag.Title = "Index";
}
<h2>Reports List</h2>
<a id="ReportUrl_Performance" href="#Url.Action("ReportTemplate", "Report", new { ReportName = "Performance", ReportDescription = "Performance Report", Width = 100, Height = 650 })">
Performance Report</a>
13 Next
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using ASPNETMVC_SSRS_Demo.Models;
namespace ASPNETMVC_SSRS_Demo.Controllers
{
public class ReportController : Controller
{
//
// GET: /Report/
public ActionResult ReportTemplate(string ReportName, string
ReportDescription, int Width, int Height)
{
var rptInfo = new ReportInfo
{
ReportName = ReportName,
ReportDescription = ReportDescription,
ReportURL = String.Format("../../Reports/ReportTemplate.aspx?
ReportName={0}&Height={1}", ReportName, Height),
Width = Width,
Height = Height
};
return View(rptInfo);
}
}
}
14
Final Step is to open the ReportTemplate view page under Report and add the following code.
#model ASPNETMVC_SSRS_Demo.Models.ReportInfo
<H1>
#Model.ReportDescription
</H1>
<iframe id="frmReport" src="#Model.ReportURL" frameborder="0" style="#String.Format("width:{0}%; height: {1}px;", Model.Width, Model.Height)" scrolling="no">
</iframe>

HTML onload script triggered too many times?

I created a simple ASP.Net html page. I would like to put a password check, ONLY when the page is initially loaded, I did it with a script and assigned the tag onload to the body. The problem is, that the password check is triggered every time I press a button. Why does this happens? How can I execute that password check ONLY when you open the page?
Thanks in advance.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="FotoDiClasse.aspx.cs" Inherits="FotoDiClasse" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Choose your sweatshirt</title>
<!-- password control -->
<script>
var password;
var pass1 = "1234";
var firstTime = true;
function checkPassword()
{
if (firstTime)
firstTime = false;
password = prompt("Enter password to access the site", '');
if (password != pass1) window.location = "http://www.google.com";
}
</script>
</head>
<body onload="checkPassword()">
<form id="form1" runat="server">
<div>
<asp:Button ID="CreateButton" runat="server" Text="Create" Width="240px" OnClick="CreateButton_Click" />
<asp:Button ID="SendButton" runat="server" Text="Send" Width="240px" OnClick="SendButton_Click" />
</div>
</form>
</body>
</html>
This "first time" flag doesn't work
It is called PostBack. Every time a Button is pressed the Page performs a Form Post (PostBack). That means the page is reloaded.
With the snippet below you can call a JavaScript function only when the page is first loaded.
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "runScript", "alert('This is not a PostBack');", true);
}
}
It happens because every time you press a button your page is loaded and onload() method is called and hence every time that method is called.
To overcome this problem you need to set some sort of function that check whether your page is loaded first time or not to do this you can use cookie to store that session.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="FotoDiClasse.aspx.cs" Inherits="FotoDiClasse" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Choose your sweatshirt</title>
<!-- password control -->
<script>
var password;
var pass1 = "1234";
var firstTime = true;
function checkPassword()
{
if (firstTime)
firstTime = false;
password = prompt("Enter password to access the site", '');
if (password != pass1) window.location = "http://www.google.com";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="CreateButton" runat="server" Text="Create" Width="240px" OnClick="CreateButton_Click" />
<asp:Button ID="SendButton" runat="server" Text="Send" Width="240px" OnClick="SendButton_Click" onblur="checkPassword()"/>
</div>
</form>
</body>
</html>

Read data from a text box in asp.net and display it in another web page

I am new to ASP.net . I am trying to work with basic web forms.
I created code to take first name and last name from user. When user clicks on submit, I need the data to be displayed on another page. Can someone make the code for me that should be written on the output web page?
My Code is :
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>My First web page</title>
</head>
<body>
<form id="form1" runat="server" action="WebFormOutput.aspx" >
<div style="position:absolute">
<input type="text" name="txtFirstName" placeholder="Enter Your First Name" />
<input type="text" name="txtLastName" placeholder="Enter Your Last Name"/>
<input id="Submit1" type="submit" value="submit" />
</div>
</form>
</body>
</html>
Thank You
consider the following example...
1.Create a web page named default.aspx(say)like following,
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="HP_Master_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Text="First Name"></asp:Label>
<asp:TextBox ID="txtFN" runat="server"></asp:TextBox>
<asp:Label ID="Label2" runat="server" Text="Last Name"></asp:Label>
<asp:TextBox ID="txtLN" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="SUBMIT" onclick="Button1_Click" />
</div>
</form>
</body>
</html>
and in Default.aspx.cs,like following
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
public partial class HP_Master_Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
Session["FN"] = txtFN.Text;
Session["LN"] = txtLN.Text;
Response.Redirect("Default2.aspx");
}
}
what i have done is
1.Created a page,and added server controls from tool bar,Label1,Label2,txtFN,txtLN, and a Button
2.Added onclick event to button,and in code behind created two sessions to carry the values entered in the two text boxes,Session["FN"],and Session["LN"],then the page is redirected to another page "Default2.aspx" on button click
3.Default two cantains two server controls LblFN,andlblLN that contain no values initially
4.When the page is loaded as soon as the button in previous page is clicked,in the current pages page load event,the text property of labels lblFN,and lblLN are set with the values stored in the Session variables.the code for this is as per following
default2.aspx:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="HP_Master_Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="lblFN" runat="server" Text=""></asp:Label>
<asp:Label ID="lblLN" runat="server" Text=""></asp:Label>
</div>
</form>
</body>
</html>
default2.aspx.cs:
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
public partial class HP_Master_Default2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
lblFN.Text = Session["FN"].ToString();
lblLN.Text = Session["LN"].ToString();
}
}

Google visualization is small inside AJAX Control Toolkit Tab Control

I'm trying to use a google visualisation, the column chart, inside an asp.net AJAX Toolkit Tab Control, but I'm having small (literally) problems.
If I add the visualisation to the tab that's displayed by default when the page loads, the bar chart displays correctly, however, if I add the same control to another tab and reload the page, when I click on the other tab, the control is displayed, but its tiny and unusable.
Here's some code for a test.aspx page that illustrates the problem:
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="TestProject._Default" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', { packages: ['columnchart'] });
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Height');
data.addRows(3);
data.setCell(0, 0, 'Tong Ning mu');
data.setCell(1, 0, 'Huang Ang fa');
data.setCell(2, 0, 'Teng nu');
data.setCell(0, 1, 174);
data.setCell(1, 1, 523);
data.setCell(2, 1, 86);
// Create and draw the visualizations.
new google.visualization.ColumnChart(document.getElementById('visualization1')).
draw(data, null);
new google.visualization.ColumnChart(document.getElementById('visualization2')).
draw(data, null);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<cc1:TabContainer ID="TabContainer1" runat="server">
<cc1:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel1">
<ContentTemplate>
<div id="visualization1" style="width: 300px; height: 300px;">
</div>
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel2">
<ContentTemplate>
<div id="visualization2" style="width: 300px; height: 300px;">
</div>
</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer>
</div>
</form>
</body>
</html>
Ok, I didn't get a single response to this post so here is how I worked around the problem, hope it helps someone.
I never actually got the the root of this problem but I found that if I delayed the loading of the Visualisations till the tab that contains it is clicked then the problem goes away.
In the TabControl I call a JavaScript function to load the tabs visualisation when clicked:
<cc1:TabContainer ID="TabContainer1" runat="server" OnClientActiveTabChanged="tabChanged">
<cc1:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel1">
<ContentTemplate>
<div id="visualization1" style="width: 300px; height: 300px;"></div>
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel2">
<ContentTemplate>
<div id="visualization2" style="width: 300px; height: 300px;"></div>
</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer>
The JavaScript function
function tabChanged(sender, args) {
var ActiveTab = sender.get_activeTabIndex();
if (sender.get_activeTabIndex() == 0) {
if (tab0Loaded != true) {
//load the visualisation
new google.visualization.ColumnChart(document.getElementById('visualization2')).draw(data, null);
tab0Loaded = true
}
}
if (sender.get_activeTabIndex() == 1) {
if (tab1Loaded != true) {
//load the visualisation
new google.visualization.ColumnChart(document.getElementById('visualization2')).draw(data, null);
tab1Loaded = true
}
}
}
During postback the active tab could change, to cope with this I have a JavaScript function that executes when the page loads, if the current active tab is one containing a visualisation then I load it.

How to make an iframe which displays the parent page

I want to display an iframe in a .aspx page, and the iframes source should be the same page.
I need to use a relative uri.
What value should I give the 'src' attribute?
I realise this is a little unusual - the page will be displayed in different states depending on parameters passed in, so the iframe won't be displayed within itself.
If you do this you will get an endless loop... the processsing will "never end". maybe thats why it is white? it is really processing pages..
- is that what you want ? if you for example want just 2-3 pages in depth, you can youse querystring and for example disable the iframe when the querystrings are incremented to 3.
MyPage.aspx?depth=1 --MyPage.aspx?depth=2 --MyPage.aspx?depth=3 etc
The literal relative path should work. IE: MyPage.aspx
Here is an ASP.NET Example...
Seemed to work fine for me with the following...
Markup:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication2._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<iframe runat="server" id="myFrame" src="Default.aspx?message=Hello%20World"></iframe>
<div id="myDiv" runat="server"></div>
</div>
</form>
</body>
</html>
Code Behind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebApplication2
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string message = Request.QueryString["message"];
if (null != message)
{
myDiv.InnerText = message;
myFrame.Visible = false;
}
else
{
myDiv.Visible = false;
}
}
}
}
The short answer is src="localfilename.aspx" within the iframe tag. The web standard, loosely applied, says anything not proceeded by a '/' is relative to the location of the current page. Sometimes src="" might even work for substituting the current file name (at the browser level)