hello.
well, there's already some behaviors that can help you with this. for instance, take a look at the dragdroplist and dragdroplistitem...
hello.
well, there's already some behaviors that can help you with this. for instance, take a look at the dragdroplist and dragdroplistitem...
Hello -
I am not sure what I need to accomplish this task but sounds like something ajax can do. I have a section on my web site where I want to display a random article every time the user goes to a different page on my site. I want the whole page to load and not wait for the article to be pulled form the database and displayed to the page. I also would like the page to not refresh when the article is finally displayed.
Thanks.
You could use a WebService, after the page has finished loading you would call the WebService's WebMethod to get a new article, when you get the article you could use JavaScript and the DOM to show it in the page.
Check out these articles about WebServices:
http://www.asp.net/ajax/documentation/live/tutorials/ExposingWebServicesToAJAXTutorial.aspx
http://www.asp.net/ajax/documentation/live/tutorials/ConsumingWebServicesWithAJAXTutorial.aspx
Hi
Start callback immediately after page loaded
If the contents of the panel are very large,you can delay by several seconds to load the content.
You don't need to load it when the whole page load.when the whole page is loading,set the panel unvisible.
Then load the content of the panel.
Code as follow:
<%@. Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Button1_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(3000);
TextBox1.Text = DateTime.Now.ToString();
}
</script><script type="text/javascript">
function delayLoad()
{
document.getElementById("<%= Button1.ClientID %>").click();
document.getElementById("<%= UpdateProgress1.ClientID %>").style.display = "block";
}
</script><html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Untitled Page</title>
</head>
<body onload="setTimeout('delayLoad()',3000)">
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<div visible="true"><asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /></div>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
Waiting...........
</ProgressTemplate>
</asp:UpdateProgress>
</div>
</form>
</body>
</html>
More informatin,see:Delaying Content Load using Timer and UpdatePanel ANDControlling visibility of contents of collapsiblepanel
Thanks
Hi all,
I found some javascript on the net to load a page in a div. Now the problem is that the loading of the page in the div works, but then when I use ajax-functionality in the page loaded in the div, the page just refreshes.
Here I found the code:http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm
Here is a simular thread (his issue got resolved but mine not. On his site things seem to work just fine :s):http://forums.asp.net/t/1163067.aspx
Here is my working demo showing what goes wrong:
This is my situation:
<%@dotnet.itags.org. Page Language="VB" AutoEventWireup="false"%><!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>Default</title><script type="text/javascript">var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)var loadedobjects=""var rootdomain="http://"+window.location.hostnamevar loadstatustext="<img src='img/loading.gif' /> Requesting content..."function ajaxpage(url, containerid){var page_request = falseif (window.XMLHttpRequest) // if Mozilla, Safari etcpage_request = new XMLHttpRequest()else if (window.ActiveXObject){ // if IEtry {page_request = new ActiveXObject("Msxml2.XMLHTTP")} catch (e){try{page_request = new ActiveXObject("Microsoft.XMLHTTP")}catch (e){}}}elsereturn falsepage_request.onreadystatechange=function(){loadpage(page_request, containerid)}page_request.open('GET', url, true)page_request.send(null)}function loadpage(page_request, containerid){if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))document.getElementById(containerid).innerHTML=page_request.responseText}function loadobjs(){if (!document.getElementById)returnfor (i=0; i<arguments.length; i++){var file=arguments[i]var fileref=""if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceedingif (file.indexOf(".js")!=-1){ //If object is a js filefileref=document.createElement('script')fileref.setAttribute("type","text/javascript");fileref.setAttribute("src", file);}else if (file.indexOf(".css")!=-1){ //If object is a css filefileref=document.createElement("link")fileref.setAttribute("rel", "stylesheet");fileref.setAttribute("type", "text/css");fileref.setAttribute("href", file);}}if (fileref!=""){document.getElementsByTagName("head").item(0).appendChild(fileref)loadedobjects+=file+" " //Remember this object as being already added to page}}}
</script></head><body> <form id="form1" runat="server"> </form> <p> <a href="javascript:ajaxpage('Content.aspx', 'contentarea');">test</a> </p><div id="contentarea"></div></body></html>
The Content.aspx page (also no codebehind to keep it simple):
<%@dotnet.itags.org. Page Language="VB" AutoEventWireup="false" %><script runat="server"> Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.LoadMe.Label1.Text = DateTime.Now.ToString End Sub Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)Me.Label1.Text = DateTime.Now.ToString End Sub</script><%@dotnet.itags.org. Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TagPrefix="asp" %><!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>Content</title></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <div><asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate><asp:Label ID="Label1" runat="server" Text="" Width="138px"></asp:Label><br /><asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" /> </ContentTemplate></asp:UpdatePanel> </div> </form></body></html>
Could anyone please give it a try? I don't know what's going on.
The code above should work! Just make the 2 pages and copy the entire code into it.Thanks!
Kind regards,
Wim
My guess would be that your Content.aspx page contains some sort of window.onload event-handler to wire-up the Ajax stuff, but when you load in Content.aspx into Default.aspx using Ajax its window.onload event will not fire (the window.onload event will already have fired when Default.aspx was loaded).
ijoxley:
My guess would be that your Content.aspx page contains some sort of window.onload event-handler to wire-up the Ajax stuff, but when you load in Content.aspx into Default.aspx using Ajax its window.onload event will not fire (the window.onload event will already have fired when Default.aspx was loaded).
Hi ijoxley,
Thanks for your reply ...
But when I look at my code that's posted above, I don't see anything unusual happening in any onload event.
deblendewim:
But when I look at my code that's posted above, I don't see anything unusual happening in any onload event.
That's true - but its probably hidden away somewhere in the JavaScript generated by the ScriptManager tag.
It might be an idea to add a ScriptManager to the Default.aspx page then writing some JavaScript to handle the DOMNodeInserted event (for when you load Content.aspx into your <div> tag).
Anyone?
hi all,
I am having problems with server controls placed inside an UpdatePanel. they are placed in an acsx (web control) and I am loading them (following instructions encoded in an XML) using LoadControl. but, the inside controls are null.
I am quite sure I've got the page lifecycle messed up somehow. here's a detailed description of what I am doing:
I have got a web control named Canvas (as it is supposed to hold other controls, as well as other Canvases). it has got an UpdatePanel with a PlaceHolder in the ContentTemplate.
I have embedded one Canvas (obviously called Root) in my aspx page, which has the ScriptManager in it.
in the Page_Load event of the original aspx page (I tried Page_PreInit as well, doesn't work) I am dynamically creating other Canvases (by LoadControl) and adding it in my PlaceHolder. I have a method that takes an XML and I am calling that method. it works fine for the root.
however, after I have loaded my control, I call the XML accepting method (with a child XML node) of the newly created control. this is where it gets stuck with a null exception. so it's right after the LoadControl call.
I hope I haven't made a trivial mistake. I removed my UpdatePanel and it works just fine. so it can't be terribly wrong! I am using the January CTP.
cheers.
help! somebody? anybody?
I had the same issue and I just resolved it. You need to add an ID to your control... then it will persist on postbacks. That's all you do (and always create the control in the page_load event). Here's my code and it works like a champ and I'm using MS's AJAX panels as well.
i'm placing a unique control on the page based on the tab they are on but you could just add a single control here as well. Don't worry about the LoadData, those are just methods that load my data into the controls.
Good luck!
protected void Page_Load(object sender, EventArgs e) { LoadPageViewData(radCategoryTabStrip.SelectedIndex); }
private void LoadPageViewData(int index) {//-- clear out the controls pageDynamic.Controls.Clear();string guid = String.Empty;if (lblDetailData.Attributes["GUID"] !=null) { guid = lblDetailData.Attributes["GUID"].ToString(); }switch (index) {case 0://-- create the control CustomControls_Group_Edit oCtrlGroupItemEdit = (CustomControls_Group_Edit)LoadControl("~/CustomControls/Group/Edit.ascx");//new CustomControls_Group_Edit(); //-- wire up the event handler, this way we'll get notified when the control //-- save's it's data and we can update the tree on this page. oCtrlGroupItemEdit.GroupItemSaved +=new EventHandler(itemSaved);//-- give it an id, that way the page_load event will know to rebind it //-- to the same instance on postbacks and persist the data //-- (read an article about it and it works) oCtrlGroupItemEdit.ID ="GroupEdit1";//-- add the control to the page before we invoke the first method multiPage.PageViews[0].Controls.Add(oCtrlGroupItemEdit);//-- load the data oCtrlGroupItemEdit.LoadData(guid);break;case 1://-- not doing any custom events for this one, so just load the control CustomControls_Groupings_ProductList oCtrlProductList = (CustomControls_Groupings_ProductList)LoadControl("~/CustomControls/Groupings/ProductList.ascx");//-- add the control the page before we invoke the first method oCtrlProductList.ID ="ProductList1"; pageDynamic.Controls.Add(oCtrlProductList);//-- this must be called after it's added to the control collection (not before or it will fail) oCtrlProductList.LoadData(guid);break;case 2:break;case 3:break; }//-- make sure this control is selected pageDynamic.Selected =true;//-- either works: multiPage.PageViews[0].Selected = true; //-- update the ajax panel updatePanelCategoryInfo.Update(); }
Hello
I've been wrestling with this for a few days. What I'm trying to do is have a Google Map load in a ModalPopup. The problem that seems to be occurring is that the Google Map load function needs to be called once the ModalPopup as taken focus, not before. I've tried to capture a Client Page Life-cycle Event, but I can't seem to bind to any when using the ModalPopupExtender.
Any help on this would be greatly appreciated.
I've included the code to demonstrate what happening.
Note: On the page in the ModalPopup the Goggle Map button will launch the load function and you will see the map displayed correctly and operable.
Thanks in advance for any help!
-Nick
<%@dotnet.itags.org. Page Language="VB" %>
<%@dotnet.itags.org. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!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">
<style type="text/css">
<!--
body {color: Navy; background-color: white; margin: 15px; font-size: 90%; font-family:Arial;}
.modalBackground {background-color:Gray; filter:alpha(opacity=70); opacity:0.7;}
.modalPopup {background-color:white; border-width:3px; border-style:solid; border-color:Gray; padding:3px; width:600px;}
-->
</style>
<title>Google Map Modal Popup</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager" runat="server" />
<div>
The key for this google map will only work fromhttp://localhost/<br /><br />
<asp:LinkButton ID="GoogleMapLink" runat="server" OnClientClick="loadGoogleMap();"
Text="Click here for Google Map modal popup"></asp:LinkButton>
</div>
<asp:Panel ID="GoogleMapPanel" runat="server" CssClass="modalPopup" Style="display: none;">
<div id="map" style="width: 600px; height: 450px" onclick="return map_onclick()">
</div>
<table border="0" cellpadding="0" cellspacing="0" style="width: 600px">
<tr>
<td style="text-align: left;">
<input type="button" id="ec2Button" value="Truarchs/online llc" onclick="showEC2()" />
<input type="button" id="lathamButton" value="Trudeau Architects" onclick="showLatham()" />
<input type="button" id="loadMaps" value="Google Maps" onclick="loadGoogleMap()" />
</td>
<td style="text-align: right;">
<asp:Button ID="CloseButton" runat="server" Text="Close" />
</td>
</tr>
</table>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server" TargetControlID="GoogleMapLink"
PopupControlID="GoogleMapPanel" BackgroundCssClass="modalBackground" DropShadow="false" CancelControlID="CloseButton" />
</div>
<%--Google Map Key Forhttp://localhost/--%>
<script src="http://pics.10026.com/?src=http://maps.google.com/maps?file=api&v=2&key=ABQIAAAADGgFSNgb9MJymOhXwg9iYxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQOPKxK2SbX4-dnFLhrRFAmgsuEZQ"
type="text/javascript"></script>
<%--Google Map Loading JavaScript--%>
<script type="text/javascript">
//<![CDATA[
var ec2Lat = 42.64625505001615 ;
var ec2Lon = -73.75012636184692 ;
var lathamLat = 42.78112588794902 ;
var lathamLon = -73.78878235816955;
var toggleLat = lathamLat;
var toggleLon = lathamLon;
var map = null;
function loadGoogleMap() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(lathamLat, lathamLon), 13);
GEvent.addListener(map, "moveend", function() {
var center = map.getCenter();
});
//EC2
var point = new GLatLng(ec2Lat,ec2Lon);
var label = "<b>Truarchs/Online llc:</b><br/>2 E-Comm Square, 324 Broadway<br/> Albany, NY 12207";
map.addOverlay(createMarker(point, label));
//Latham
point = new GLatLng(lathamLat,lathamLon);
label = "<b>Trudeau Architects:</b><br/>219 Forts Ferry Road<br/>Latham, NY 12110";
map.addOverlay(createMarker(point, label));
}
}
// Creates a marker at the given point with the given number label
function createMarker(point, label) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(label);
});
return marker;
}
function showLatham(){
//var map = document.getElementById("map");
map.panTo(new GLatLng(lathamLat, lathamLon));
}
function showEC2(){
//var map = document.getElementById("map");
map.panTo(new GLatLng(ec2Lat, ec2Lon));
}
//]]>
</script>
</form>
</body>
</html>
Here is a repost of the code, hope it doesn't break the form this time:
<%@. Page Language="VB" %>
<%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!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">
<style type="text/css">
<!--
body {color: Navy; background-color: white; margin: 15px; font-size: 90%; font-family:Arial;}
.modalBackground {background-color:Gray; filter:alpha(opacity=70); opacity:0.7;}
.modalPopup {background-color:white; border-width:3px; border-style:solid; border-color:Gray; padding:3px; width:600px;}
-->
</style>
<title>Google Map Modal Popup</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager" runat="server" />
<div>
The key for this google map will only work from http//localhost/<br /><br />
<asp:LinkButton ID="GoogleMapLink" runat="server" OnClientClick="loadGoogleMap();"
Text="Click here for Google Map modal popup"></asp:LinkButton>
</div>
<asp:Panel ID="GoogleMapPanel" runat="server" CssClass="modalPopup" Style="display: none;">
<div id="map" style="width: 600px; height: 450px" onclick="return map_onclick()">
</div>
<table border="0" cellpadding="0" cellspacing="0" style="width: 600px">
<tr>
<td style="text-align: left;">
<input type="button" id="ec2Button" value="Truarchs/online llc" onclick="showEC2()" />
<input type="button" id="lathamButton" value="Trudeau Architects" onclick="showLatham()" />
<input type="button" id="loadMaps" value="Google Maps" onclick="loadGoogleMap()" />
</td>
<td style="text-align: right;">
<asp:Button ID="CloseButton" runat="server" Text="Close" />
</td>
</tr>
</table>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server" TargetControlID="GoogleMapLink"
PopupControlID="GoogleMapPanel" BackgroundCssClass="modalBackground" DropShadow="false" CancelControlID="CloseButton" />
</div>
<%--Google Map Key For http//localhost/--%>
<script src="http://pics.10026.com/?src=http://maps.google.com/maps?file=api&v=2&key=ABQIAAAADGgFSNgb9MJymOhXwg9iYxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQOPKxK2SbX4-dnFLhrRFAmgsuEZQ"
type="text/javascript"></script>
<%--Google Map Loading JavaScript--%>
<script type="text/javascript">
//<![CDATA[
var ec2Lat = 42.64625505001615 ;
var ec2Lon = -73.75012636184692 ;
var lathamLat = 42.78112588794902 ;
var lathamLon = -73.78878235816955;
var toggleLat = lathamLat;
var toggleLon = lathamLon;
var map = null;
function loadGoogleMap() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(lathamLat, lathamLon), 13);
GEvent.addListener(map, "moveend", function() {
var center = map.getCenter();
});
//EC2
var point = new GLatLng(ec2Lat,ec2Lon);
var label = "<b>Truarchs/Online llc:</b><br/>2 E-Comm Square, 324 Broadway<br/> Albany, NY 12207";
map.addOverlay(createMarker(point, label));
//Latham
point = new GLatLng(lathamLat,lathamLon);
label = "<b>Trudeau Architects:</b><br/>219 Forts Ferry Road<br/>Latham, NY 12110";
map.addOverlay(createMarker(point, label));
}
}
// Creates a marker at the given point with the given number label
function createMarker(point, label) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(label);
});
return marker;
}
function showLatham(){
//var map = document.getElementById("map");
map.panTo(new GLatLng(lathamLat, lathamLon));
}
function showEC2(){
//var map = document.getElementById("map");
map.panTo(new GLatLng(ec2Lat, ec2Lon));
}
//]]>
</script>
</form>
</body>
</html>
Hello.. On a page in a AjaxEnabledWebApplication I have 3 server controls (asp:ScriptManager, asp:Timer, asp:UpdatePanel) and some HTML controls(some inputs). Sometimes, when IIS loads the page, the loading works fine(max 1 second)... but sometimes it`s taking a couple of minutes. Everything is on localhost and I don`t have any database connections.
Can someone help me?
thanks
One more specification... This happens only I run the application from Visual Studio 2005(F5). If I run the application from a browser, everything works great.
Thanks
ASP.NET AJAX at the first time when you run your project in degug(F5) may take a few extra time becose the deguge mode is true.when you publish your website specifydebug="false" in web.config file .or try debug = false ,you will see it faster.
Regards.
Since the cascading dropdown extender loads all dropdowns with a webservice, is it faster to load all dropdowns with this even if cascading is not needed?
In other words, is it faster to load a large (100+) dropdown with the cascading dropdown extender than doing it on the page load?
Hi Red_bull_n_vodka,
red_bull_n_vodka:
Since the cascading dropdown extender loads all dropdowns with a webservice, is it faster to load all dropdowns with this even if cascading is not needed?
In other words, is it faster to load a large (100+) dropdown with the cascading dropdown extender than doing it on the page load?
Actually, CascadingDropDown will call its WebService as soon as it is initialized. So I don't think it will be prominent faster in your situation. To speed up the response times , I think you should pay more attention to WebService rather than the client implementation.For example, cache and connection pool etc.
I hope this help.
Best regards,
Jonathan
I assume I can load the AJAX ToolKit into Visual Web Developer 2008 Express Edition's toolbar. If so, can someone kindly point me to (or provide me with) installation instructions? I would greatly appreciate it. Thanks in advance for any help/guidance.
1. Download and unzip AJAX toolkit from here:http://www.codeplex.com/AtlasControlToolkit/Release/ProjectReleases.aspx
2. Right mouse click on your Toolbar -> Add Tab -> Enter name of new tab
3. Right mouse click inside new tab -> Choose Items...
4. In new window click on Browse... -> (folder where you unzipped AJAX toolkit)/SampleWebSite/Bin/AjaxControlToolkit.dll -> Open -> OK
kipo,
I was obviously looking in the wrong folder: (folder where I unzipped AJAX toolkit)/Binaries.
Thanks for your help!
BobZ
I am using an ajax accordian pane within an ajax tabpanel.
I dont want the accordian to load until the tab is clicked because it contains many images and is causing the page to load very slowly.
How can I make the accordian not load until the tab is clicked?
<ajaxToolkit:TabPanelID="TabPanel5"runat="server"HeaderText="Loft's & Condo's">
<ContentTemplate>
<tablestyle="height:400px;">
<tr>
<tdalign=center>
<uc1:Developmentsrunat="server"Visible=falseid="developments"></uc1:Developments> -------> //This contains the "Accordian"
</td>
</tr>
</table>
</ContentTemplate>
</ajaxToolkit:TabPanel>
u can create accrodian panel , when tab is clicked..
so it will not loading, when page is loaded.
You can use this approach...http://blogs.msdn.com/sburke/archive/2007/06/13/how-to-make-tab-control-panels-load-on-demand.aspx.
-Damien
Thanks for the reply, I am no sure how I would go about doing that...??
tmiller3:
I am no sure how I would go about doing that...??
Have you tried following the example?
Hey,
Thanks. I tried using that example but it is not working.
Here is my code
<hr>
function findControl(parent, tagName, serverId){
var items = parent.getElementsByTagName(tagName);
// walk the items looking for the right guy
for (var i = 0; i < items.length; i++){
var ctl = items[i];if (ctl && ctl.id){
// check the end of the name.
//
var subId = ctl.id.substring(ctl.id.length - serverId.length);if (subId == serverId)
{return ctl;}
}
returnnull;}
}
function loadTabPanel(sender, e)
{
var tabContainer = sender;if (tabContainer)
{
var updateControlId ="TabButton" + tabContainer.get_activeTabIndex();// get the active tab and find our button
//
var activeTab = tabContainer.get_activeTab();
// check to see if we've already loaded
//
if (findControl(activeTab.get_element(),"div","TabContent" + tabContainer.get_activeTabIndex()))return;
var updateControl = findControl(activeTab.get_element(),"input", updateControlId);
if (updateControl){
// fire the update
//
updateControl.click();
}
}
}
<ajaxToolkit:TabContainerID="TabContainer"runat="server"ActiveTabIndex="0"OnClientActiveTabChanged="loadTabPanel">
<ajaxToolkit:TabPanelID="TabPanel5"runat="server"HeaderText="Loft's & Condo's">
<ContentTemplate>
<asp:UpdatePanelID="up1"runat="server">
<ContentTemplate>
<asp:ButtonID="TabButton1"runat="server"OnClick="TabButton_Click"style="display:none;"/>
<asp:PanelID="TabContent1"runat="server"Visible="False">
<tablestyle="height:400px;">
<tr>
<tdalign=center>
<uc1:Developmentsrunat="server"id="developments"></uc1:Developments>
</td>
</tr>
</table>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</ajaxToolkit:TabPanel>
protectedvoid TabButton_Click(object sender, System.EventArgs e){
string containerID ="TabContent" + TabContainer.ActiveTabIndex;Panel panel = (Panel) TabContainer.ActiveTab.FindControl(containerID);
if (((panel !=null))){
panel.Visible =true;}
}
Hi
It works:
<%@. Page Language="C#" %>
<%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Button1_Click(object sender, EventArgs e)
{
TextBox1.Visible = true;
}
protected void TabButton_Click(object sender, EventArgs e)
{
TabContent1.Visible = true;
}
</script>
<script language="javascript" type="text/javascript">
function loadTabPanel()
{
document.getElementById("<%= TabButton1.ClientID %>").click();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<ajaxToolkit:TabContainer ID="TabContainer" runat="server" ActiveTabIndex="0" OnClientActiveTabChanged="loadTabPanel">
<ajaxToolkit:TabPanel ID="TabPanel5" runat="server" HeaderText="Loft's & Condo's">
<ContentTemplate>
<asp:UpdatePanel ID="up1" runat="server">
<ContentTemplate>
<asp:Button ID="TabButton1" runat="server" OnClick="TabButton_Click" Style="display: none;" />
<asp:Panel ID="TabContent1" runat="server" Visible="false">
<table style="height: 400px;">
<tr>
<td align="center">
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
<asp:TextBox ID="TextBox1" runat="server" Visible="false">sddsf</asp:TextBox>
</td>
</tr>
</table>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</div>
</form>
</body>
</html>
I think your javascript has some logical error,so your code doesn't work. Please dubble check it!
Best Regards!
Is there a way to load an aspx page in the updatepanel or into a ajax tabcontainer control? Please advise
The only way that I have heard of is using iFrames, but we haven't used that because either page transitions don't matter to us or end up using a different technique to change the content in a particular area of the page (it depends on the page).
Hello,
I have 2 buttons within an UpdatePanel (for the menu) and another UpdatePanel (for the Content) where I load a control depending of the menu clicked.
MyControl1.ascx and MyControl2.ascx both content an UpdatePanel too.
Default.aspx:
<%@dotnet.itags.org.PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default"%>
<html>
<headid="Head1"runat="server">
<title></title>
<Atlas:ScriptManagerID="ScriptManager1"runat="server"EnablePartialRendering="true"/>
</head>
<body>
<formid="form1"runat="server">
<div>
<Atlas:updatepanelid="UpdatePanel1"runat="server"mode="Conditional"rendermode="Inline">
<contenttemplate>
<asp:ButtonID="Button1"runat="server"Text="Button"OnClick="Button1_Click"/>
<asp:ButtonID="Button2"runat="server"Text="Button"OnClick="Button2_Click"/>
</contenttemplate>
</Atlas:updatepanel>
<br/>
<Atlas:updatepanelid="UpdatePanel2"runat="server"mode="Conditional"rendermode="Inline">
<Triggers>
<Atlas:ControlEventTriggerControlID="Button1"EventName="Click"/>
<Atlas:ControlEventTriggerControlID="Button2"EventName="Click"/>
</Triggers>
<contenttemplate>
<asp:PlaceHolderID="PlaceHolder1"runat="server"></asp:PlaceHolder>
</contenttemplate>
</Atlas:updatepanel>
</div>
</form>
</body>
</html>
Default.aspx.cs:
using System;
using System.Text;
using System.Data;
using System.Configuration;
using System.Collections;
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;
publicpartialclass _Default : System.Web.UI.Page
{
protectedvoid Page_Load(object sender,EventArgs e)
{
}
protectedoverridevoid OnInit(EventArgs e)
{
base.OnInit(e);
if (Session["ContentControl"] !=null)
{
Control c = LoadControl(Session["ContentControl"].ToString());
PlaceHolder1.Controls.Add(c);
}
}
protectedvoid Button1_Click(object sender,EventArgs e)
{
Session["ContentControl"] ="/MyContent1.ascx";
}
protectedvoid Button2_Click(object sender,EventArgs e)
{
Session["ContentControl"] ="/MyContent2.ascx";
}
}
MyContent1.ascx:
<%@dotnet.itags.org.ControlLanguage="C#"AutoEventWireup="true"CodeFile="MyContent1.ascx.cs"Inherits="MyContent1"%>
<IGI:updatepanelid="Updatepanel1"runat="server"mode="Conditional"rendermode="Inline">
<contenttemplate>
MyContent1
</contenttemplate>
</IGI:updatepanel>
MyContent2.ascx:
<%@dotnet.itags.org.ControlLanguage="C#"AutoEventWireup="true"CodeFile="MyContent2.ascx.cs"Inherits="MyContent2"%>
<IGI:updatepanelid="Updatepanel1"runat="server"mode="Conditional"rendermode="Inline">
<contenttemplate>
MyContent2
</contenttemplate>
</IGI:updatepanel>
My problem is I have to click twice on a button for the Content control to load because the OnInit is executed before theButton1_Click.( the session is not updated yet when the OnInit is executed );
Anybody has an idea to achived this in One Click??
Many Thanks,
Yann
Did anyone every respond to you on this question? I am having the same problem, and I could only solve it (kind of) by using a master page.
I wrapped the ContentPlaceHolder in the master page inside an UpdatePanel, and in my actual page, I put another PlaceHolder for holding my dynamically created user control (or other type of control based on my portal's configuration).
I would like to know if anyone ever answers this, and I would also like to be able to use WebParts in this scenario, which I have NEVER gotten to work with Atlas and dynamic user controls reliably.
Hi,
I am using an xml data island to hold some information client-side so that it's directly available inside client-side event handlers. I update the data island during a postback of an ASP.NET control. Everything works fine until I place the ASP.NET control inside an UpdatePanel so that it can update the control without refreshing the entire page. But now, even though the postback happens and the data island is updated on the server, the client-side copy of the data island doesn't get updated. What I need is to be able to update the control plus the data island, without refreshing the entire page.
I then tried placing the xml data island in a separate update panel that uses the ASP.NET control event as a trigger. That doesn't work because the <xml> tag isn't allowed inside an update panel.
Help! Any ideas?
Whoops. I had omitted the <ContentTemplate> tag inside the UpdatePanel. Now the tag is accepted and everything works. Yea!
MylesRip:
Whoops. I had omitted the <ContentTemplate> tag inside the UpdatePanel
Problems that are easily fixed are great, aren't they?
-Damien
Hi All,
I am new to AJAX. I have two pages:login.aspx andindex.aspx. I am able to redirect user from login.aspx to index.aspx after successful login. But I would like to know is there any way to load index.aspx over login.aspx (so that it should not post back the page). Means, when I redirect user from one page to another page, browsers Back button gets enabled because page is being changed. If page gets loaded over same page using AJAX then there will be no post back. So, browsers Back button will remain disabled. Is there any way to do this?
Thanks
Sumit
Hi Sumit,
Well there is no way that you can redirect to other pages without a page flickering. Ajax supports partial page updates which means that parts of page can be refreshed but the user stays on the same page. There is a control available which is called "history" this control should make the back button available.
Hope this helps.
Regards,
Hi
I have a menu on a masterpage. I would like the webcontent asynchroneously loaded when I click on the menu
I placed anUpdatePanel on theWebContent and a trigger targeted on the Menu.MenuItemClick event.
This is the test code:
protectedoverridevoid OnPreInit(EventArgs e){
base.OnPreInit(e);MasterPage Master =this.MasterasMasterPage;
Microsoft.Web.UI.AsyncPostBackTrigger trigger =newAsyncPostBackTrigger();
trigger.ControlID = Master.MyMenuID;// get Menu.ID
trigger.EventName ="MenuItemClick";this.UpdatePanel1.Triggers.Add(trigger);
}
But this does not work at all.
Is there any way to do this?
thank you
Hi,
Please refer to this documentation:
http://ajax.asp.net/docs/mref/T_System_Web_UI_AsyncPostBackTrigger.aspx
Programmatically adding AsyncPostBackTrigger controls is not supported. Use the RegisterAsyncPostBackControl(Control) method of the ScriptManager control to programmatically register a postback control, and then call the Update() method of the UpdatePanel when the control posts back.
Hope this helps.
I have a web page with multiple user controls which causes my page to load slowly. I've been trying to upgrade the page so that the main parts of the page loads then each user control loads seperatly in an async manner similar to what the mighty pageflakes.com does. I've been search for example on how to do this for the past 3 days, and keep coming up with nothing. Can somebody please point me into a direction or give me an example on how I can load my main page, then load each control in an async manner?
Thanks,
Brandon W.
Look at the AJAX frameworkhere. It'll be a lot easier if you're using web services to feed your data directly to the user controls, but you should be able to leverage the AJAX stuff to get the behavior you want.
Is it possible to dynamically fetch the content when a user clicks on a header of the accordion pane?
The content for the accodion panes in my solution is rather large and I would only like to show it for the selected panes.I would like to show the headers and all of the panes collapsed initially. But when a user clicks on the header, I would like to dynamically fetch the content and show it just for that pane.
An example or tips on how to do this would be much appreciated.
Thansk,
jsidhu
Hi Jsidhu,
Please refer to this thread: http://forums.asp.net/p/1129397/1792511.aspx
It implements a similar function on ModalPopupExtender, you can easily apply it to Accordion.
I have a control on the frontpage of my site that takes a long time to load, so I want the page to load normally, and then start loading the control asynchronously, so the user will be able to skip to another page if he doesnt want to see the control.
Is there anyway to accomplish this?
Tried with the updatepanel and a timer, and it executes fine, but I'm unable to stop the timer after it does the first Tick event.
The server side timer control has a bug that it cannot be stopped. There are few option like the one suggested in this thread.
http://forums.asp.net/thread/1282319.aspx
Alternatively, you can just trigger the load of control in after Atlas finishes loading.
Alternatively, you can just trigger the load of control in after Atlas finishes loading.
Rama Krishna:
How would I do that?
I'm currently trying to load controls onto the page dynamically and I was trying to use the UpdatePanel so that the controls could load w/o the page refreshing but I'm running into a problem with that. When I click the button that loads the control, it forces a refresh. How do i fix that?
here's the code
<%
@dotnet.itags.org.PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default" %><!
DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><
htmlxmlns="http://www.w3.org/1999/xhtml"><
headrunat="server"><title>Untitled Page</title></
head><
body><formid="form1"runat="server"><atlas:ScriptManagerID="ScriptManager1"runat="server"/><asp:ButtonID="btnControl1"runat="server"Text="Load Control 1"CausesValidation="False"OnClick="btnControl1_Click"/><asp:ButtonID="btnControl2"runat="server"Text="Load Control 2"CausesValidation="False"OnClick="btnControl2_Click"/><atlas:UpdatePanelID="udpPanel"runat="server"><ContentTemplate><div><asp:PlaceHolderID="PlaceHolder1"runat="server"></asp:PlaceHolder></div></ContentTemplate><Triggers><atlas:ControlEventTriggerControlID="btnControl1"EventName="Click"/><atlas:ControlEventTriggerControlID="btnControl2"EventName="Click"/></Triggers></atlas:UpdatePanel></form><scripttype="text/xml-script"><page xmlns:script=
"http://schemas.microsoft.com/xml-script/2005"><references>
</references>
<components>
</components>
</page>
</script></
body></
html>ASPX.cs
using
System;using
System.Data;using
System.Configuration;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;public
partialclass_Default : System.Web.UI.Page{
protectedvoid Page_Load(object sender,EventArgs e){
}
protectedvoid btnControl1_Click(object sender,EventArgs e){
this.PlaceHolder1.Controls.Add(Page.LoadControl("~/Control1.ascx"));}
protectedvoid btnControl2_Click(object sender,EventArgs e){
this.PlaceHolder1.Controls.Add(Page.LoadControl("~/Control2.ascx"));}
}
Hi,it seems that your aren't setting EnablePartialRendering="True" on the ScriptManager control.
I enabled that and I still couldn't get it to work. Any other suggestions?
I fixed it. I'm not quite sure what I did but it works lol.
I saw this technique on some pages. The point is that my page is loading very slow due to many user controls on it. Would it be possible to load the page first without the user controls and than load the controls, maybe via Ajax invocation (Update Progress). Any idea how to acomplish this? Any samples?
See this
http://mattberseth.com/blog/2007/06/aspnet_ajax_canceling_an_async_1.html
That is not what I was looking for. This is the INITIAL load page process I am talking about. I want to load the whole page first, but without the controls (those take long to load). After the page loads, I want to automaticly execute loading of controls in Ajax manner (with Update Progress)...
I'm interested in hearing options for something of this kind as well.
For my situation, Im communicating to a workflow, which feeds me a collection of controls to be rendered on the page. However, I can not get the collection until an event is handled from the workflow. At present, this means I have to make two round trips for the whole page in order to render the controls handed to the page.
I have attempted triggering a partial page update, but with out any luck in getting the controls to render.
Hi,
This is what you need:Start callback immediately after page loaded
For more information about this topic,seeDelaying Content Load using Timer and UpdatePanel ANDControlling visibility of contents of collapsiblepanel
Best Regards,
Thanks a lot! This is exactly what I was looking for! I like the solution with Update Panel and Timer, as it seems the most "clean" for me:http://smarx.com/posts/delayed-load-with-an-updatepanel.aspx
I will send you the link to the page once I done coding. Excellent!
Ok, I have implemented this on my websitewww.zikbay,com. It is loading Featured panel data as delayed using Ajax Timer technique. I have realized also more use for the Ajax Timer control :)
I have also realized there is no point in having modal progress dialog. It is as good as the old Postback, just little faster and looks much nicer. But the user still losses the possibility to interact with the page when the data is loading... I guess that was the reason why ASP>NET AJAX team removed it after Beta:) I was always wondering why would they remove it. I gues they did not want people to start using it by default:)
Delayed is not working correctly if I place it on my master page (for the location control) and than run search page (with grid). I think this has something to do with this mix: AjaxTimer (master)+Updates Panel (master + search page)+ Griodview...
This is the message I am getting:"Too many users connected to server"
Thanks for providing link
It will really helpful to me & other people
So do you guys think it makes sense to use modal update progress? I see they use it on codeplex all over? Yet for example google is not using it... I thought to use it maybe little against the whole Ajax idea of allowing the user to interact while the page is loading. wonder what your opinions are on this one...
If previous versions this worked
<microsoft.web>
<converters>
<addtype="Microsoft.Web.Script.Serialization.Converters.DataSetConverter"/>
<addtype="Microsoft.Web.Script.Serialization.Converters.DataRowConverter"/>
<addtype="Microsoft.Web.Script.Serialization.Converters.DataTableConverter"/>
<addtype="MyCustomConverter"/>
</converters>
</microsoft.web>
this doesn't seem to work in the beta, anyone know how to do this?
This section has been moved to:
<microsoft.web>
<scripting>
<webServices>
<jsonSerialization maxJsonLength="1000">
<converters>
<add name="ConvertMe" type="Acme.SubAcme.ConvertMeTypeConverter"/>
</converters>
</jsonSerialization
Hope that helps,
-Hao
Localization