What is the best way to include content within an AJAX TabContainer? - asp.net

I didn't want to have a ton of code on one page, but to keep the code modular and simple. So in my TabContainer I have the following where each tab refers to a web page and my code is inside each web page. My TabContainer itself is inside the default.aspx page.
<asp:TabContainer ID="tabTOL" runat="server" ActiveTabIndex="0" CssClass="tol">
<asp:TabPanel ID="tabHome" runat="server" TabIndex="0" HeaderText="Home">
<ContentTemplate>
<iframe src="Home.aspx"></iframe>
</ContentTemplate>
</asp:TabPanel>
...
Of course, the problem is that I cannot refer to other tabs or the TabContainer/default page from within any tab. I'm trying to update a TextBox on the default.aspx page from a tab, but there is no reference to it.
Should I bite the bullet and have one huge web page with all the html and code behind? There are a dozen tabs in my TabContainer. I would think this would slow down processing as well. Or, is there a cleaner way to do this and still retain the ability to reference controls on the main page or other tabs?
I'm working in VS2008 and .Net 3.5 and AJAX 3.5.
Thanks!!
Larry

I would suggest that you change the structure of Home.Aspx into a Web User Control (*.ascx). The advantage is that you are now running within the context of the parent page. Therefore all it's functionality is within reach. For example, to acces a textbox on the parent page, from the Home.Ascx, you would do this:
((Default)this.Parent).txtMyTextBox.Text = "Hello";

Related

Why does my MasterPage UpdatePanel call a Page_Load on my ContentPage?

My code in my MasterPage is causing a full page_load on my content pages every 5 seconds. Sadly, that means it is breaking some of my content pages and how they are programmed. My hope was that a separate UpdatePanel would allow only that region to be updated and not refresh the other UpdatePanels and resources on the content pages.
I've attempted moving the Timer out of the UpdatePanel, changing the UpdatePanel to UpdateMode="Conditional" and even using a third party AjaxPanel (Telerik).
All results are the same, the content page reloads every 5 seconds clearing the title template (Shown below) and sometimes breaking some functions on the site.
Until I can figure out a way to ONLY have the literal update without reloading the other resources I have to leave the Timer disabled.
I'll be happy to post more code if needed, but I didn't want to provide information that may not have any importance.
MasterPage - Site.Master
<title><%: Page.Title %> - My ASP.Net Site</title>
<asp:UpdatePanel ID="UpdatePanelMenu" runat="server">
<ContentTemplate>
<span>Tickets<asp:Literal ID="LiteralUnassignedTickets" runat="server"></asp:Literal></span>
<asp:Timer ID="TimerAutoRefreshMenu" runat="server" Interval="5000" Enabled="true"></asp:Timer>
</ContentTemplate>
</asp:UpdatePanel>
if you have to use update panels make the update panel update conditional and set the timer as an asynchronous trigger(very important).
update panels are even worse when they are on master pages then when they are on the content page
a better option for minimal change is setTimeout to a function that does an ajax call to update the number of unassigned tickets. you can grow this to update a whole bunch of fields/elements using a json object. Plus the techniques can be very useful if you move to MVC.

Disable page refresh after button click ASP.NET

I have an asp button that looks like this:
Default.aspx
<asp:button id="button1" runat="server" Text="clickme" onclick="function" />
Default.aspx.cs
protected void function(object sender EventArgs e)
{
// Do some calculation
}
However, whenever I press the button, the entire page gets refreshed. I have looked on this site and found many solutions, but none of them really works for my project. Here are some of the suggested solutions:
set onclick="return false;" // but then how do I run the function in the code-behind?
use !IsPostBack in Page_Load // but the page still refreshes completely. I don't want Page_Load to be called at all.
Disable AutoEventWireup. // making this true or false doesn't make a difference.
Does anyone have a solution to this, or is it really impossible?
I would place the control inside of an Update panel.
To do so, you would also need a script manager above it, so something like this:
<asp:ScriptManager runat="server" ID="sm">
</asp:ScriptManager>
<asp:updatepanel runat="server">
<ContentTemplate>
<asp:button id="button1" runat="server" Text="clickme" onclick="function" />
</ContentTemplate>
</asp:updatepanel>
if a control inside the update panel does a postback, it will only reload the part of the page inside of the upate panel.Here is a link you may find useful from the MSDN site.
I think there is a fundamental misunderstanding here of how ASP.Net works.
When a user first requests your page, an instance of your Page class is created. The ASP.Net framework runs through the page lifecycle with this page instance in order to generate html. The html response is then sent to the user's browser. When the browser receives the response it renders the page for the user. Here's the key: by the time rendering is complete, your page class instance was probably already collected by the .Net garbage collector. It's gone, never to be seen again.
From here on out, everything your page does that needs to run on the server, including your method, is the result of an entirely new http request from the browser. The user clicks the button, a new http request is posted to the web server, the entire page lifecycle runs again, from beginning to end, with a brand new instance of the page class, and an entirely new response is sent to the browser to be re-rendered from scratch. That's how ASP.Net (and pretty much any other web-based technology) works at its core.
Fortunately, there are some things you can do to get around this. One option is to put most of your current Page_Load code into an if (!IsPostBack) { } block. Another option is to set up your method with the [WebMethod] attribute and make an ajax request to the method from the button. Other options include calling web services from custom javascript and ASP.Net UpdatePanel controls.
What works best will depend on what other things are on the page that user might have changed.
That is normal behavior for asp.net, you are actually causing a postback of the the page in order for the associated event to be called on the server.
I would suggest working with update panels but if you just need something to happen on the backend without it causing any major change on the web page, I would use jquery and a web service. The main reason for me is that update panels create huge viewstate objects.
Have a look here for asp.net ajax : http://www.asp.net/ajax
And here for an example of jquery and wcf : http://www.codeproject.com/Articles/132809/Calling-WCF-Services-using-jQuery
I have a similar problem. this answer helps me a lot. in your asp button.<asp:button id="button1" runat="server" Text="clickme" OnClientClick="return SomeMethod();" /> and in the SomeMethod which is a js method do your logic like manipulating your page then return false as the mentioned answer suggest.

Page postback with web service when used with master page?

I have a question for web service. I have been testing but not sure what is causing this. I am trying to prevent my web page from flickering when there is a post back. So I used web service. It is working fine without any noticeable flickering when I put my dropdownlist on a normal page (without Master page). However, when I moved the same code to page with master page, then the flickering happens. Anyone has any ideas how to fix this please? My html mark up is as below:
<div>
<div>
<asp:DropDownList ID="ddlState" runat="server" AutoPostBack="True"></asp:DropDownList>
</div>
<div>
<asp:DropDownList ID="ddlCity" runat="server" DataTextField="city_name" DataValueField="city_id"></asp:DropDownList>
</div>
</div>
I am trying to avoid using update panel. Thanks
You will get the flikering as long as you have postback, you can use ajax call to refresh only part of page for instance drop down. One of easiest solution is to use UpdatePanel or you can use jQuery ajax. This article explains how you can make cascading dropdowns using jquery ajax with asp.net.

How can I refresh a dropdownlist during an event of another dropdownlist without refreshing whole web page?

I am developing my first asp.net website, my requirement is to refresh DropDownListB at SelectedIndexChanged event of DropDownListA, I have set AutoPostBack="True" for DropDownListA. Now the problem is whole web page gets refreshed, its unnecessary for me, is there any other technique that i can use to refresh only that control or only that panel rather than refreshing whole page?
Put the dropdowns inside
<asp:UpdatePanel ID="up1" runat="server">
<ContentTemplate>
// Dropdowns
</ContentTemplate>
</asp:UpdatePanel>
and include <asp:ScriptManager ID="sm" runat="server"></asp:ScriptManager> at the top
1- You can simply place the dropdown in an UpdatePanel, this will avoid a complete post back.
You can get more details on UpdatePanel here
2- You can use jQuery AJAX to fetch the data in JSON format and bind it to the dropdown list, this approach is more efficient but little complex in comparison to UpdatePanel
You can find so many articles on this if you search this on google , like
[EDIT]
You can find a similar implementation here

Trying to self contain pop ups which use the AjaxToolkit ModalPopUpExtender

I have 3 different kinds of ajax popups that need to exist across my site. I was hoping that I could simply create a user control for each one and place the panel and modal popup extender inside each one but this doesn't seem to be working. Has anyone tried this before or do you have a recommendation as to how I can avoid duplicate code for each pop up on different pages? Thanks!
Ah I figured out my issue with the User Control I believe.
The ModalPopUpExtender requires the TargetID property to be set otherwise an error occurs. Since this is sitting in a UserControl I just created a dummy link button that doesn't do anything and I set the property visible to false.
<asp:LinkButton ID="lnkBlank" runat="server" Visible="false" />
<asp:Panel ID="plContainer" style="display: none;" runat="server">
Hello?
</asp:Panel>
<cc1:ModalPopupExtender ID="mpe" runat="server"
BehaviorID="test"
TargetControlID="lnkBlank"
PopupControlID="plContainer" />
Apparently it doesn't appreciate that and the moment I set the visible property to true it started working. Not sure what the reasoning is for a TargetID since, I would think, most pop ups could be called from multiple links about the page. Perhaps I'm still not entirely clear on how this control is supposed to be used.
One option would be to write the popups in a asp.net user control (a .ascx page) and include that on the pages you need the popups. Have a public method in the ascx page that will show the popup, and call it from the parent page when you need to. If you already have a script manager on the parent page, you can't have a second one in the ascx page, but other then that there shouldn't be anything that would stop this from working. Hope this helps!
edit: here's what my modal popup extender control looks like...
<cc1:ModalPopupExtender
ID="mpeClassroom"
BackgroundCssCLass="modalBackground"
runat="server"
CancelControlID="lbClose"
OnOkScript="onOk()"
TargetControlID="Button1"
PopupControlID="pnlClassroom">
</cc1:ModalPopupExtender>
in my code behind page, my method just calls mpeClassroom.Show();
The problem with hidden link as TrgetControlID is that; when u set its visibility as false, server doesn't render it as well. PopExtender then cannot find control on the page.
Instead of setting its visibility to false, try to apply a style with display:none. This should work !

Resources