Hidden panel doesn't center correctly when displayed - asp.net

I've got a simple AlwaysVisibleControlExtender that extends a small Panel containing a "Loading..." message and animated GIF. The whole thing is inside an UpdateProgress control, so it only displays when my app is processing. I've got it set to display at the top center. It works fine, but I've noticed that it displays slightly to the right of where it should be. If I resize the window slightly, the panel snaps to the correct position.
My guess is that it's calculating where the center is before the UpdateProgress control allows the Panel to be rendered, thus the Panel has a width of zero. Only after the Panel is displayed does it correctly calculate the center. Is there a workaround for this?
Update: Here's the markup:
<%# Page Language="VB" MasterPageFile="~/Compass.master" AutoEventWireup="false" CodeFile="SubmissionPrep.aspx.vb" Inherits="SubmissionPrep" Title="Untitled Page" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<asp:UpdatePanel ID="UpdatePanel" runat="server" UpdateMode="Always">
<ContentTemplate>
<%-- Data and Controls here --%>
<asp:UpdateProgress ID="ProcessingUpdateProgress" runat="server">
<ProgressTemplate>
<asp:Panel ID="ProcessingPanel" runat="server" CssClass="loading">
Processing...
<img src="images/ajax-loader.gif" alt="" />
</asp:Panel>
<ajax:AlwaysVisibleControlExtender ID="ProcessingAlwaysVisibleControlExtender" runat="server"
TargetControlID="ProcessingPanel" VerticalSide="Top" HorizontalSide="Center">
</ajax:AlwaysVisibleControlExtender>
</ProgressTemplate>
</asp:UpdateProgress>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>

I have implemented Progressbar with the help of this article, so I have not get any issue
this is great article..... and explaining setp by step, plz check
http://www.codedigest.com/Articles/ASPNETAJAX/125_Using_UpdateProgress_Control_Effectively.aspx

Related

Dynamically Loaded Existing Panel cause issue of PostBack

At first See the Code below.
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="test.aspx.vb" Inherits="BLL.test" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Panel ID="pnlCustom" runat="server"></asp:Panel>
<asp:Panel ID="pnlDiv1" runat="server">
<asp:DropDownList ID="ddl_Status" runat="server"></asp:DropDownList>
</asp:Panel>
<asp:Panel ID="pnlDiv2" runat="server">
<asp:DropDownList ID="ddlImg1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlImg1_SelectedIndexChanged"></asp:DropDownList>
</asp:Panel>
<asp:Panel ID="pnlDiv3" runat="server">
<asp:DropDownList ID="ddlImg2" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlImg2_SelectedIndexChanged"></asp:DropDownList>
</asp:Panel>
</div>
</form>
</body>
</html>
I want to hide and show the panel in different order as per the requirement. i don't want to change the content of the panel. pnlDiv1,pnlDiv2,pnlDiv3 will bind in pnlCustom.
Now, In Page_Load Event i am setting all panel style to "display:none" except "pnlCustom" and dynamically adding pnlDiv1/pnlDiv2/pnlDiv3 in "pnlCustom" and set its style to "display:inline".
In my application problem is If i change the value of "ddlImg1" the page gets postback and all the value reset. this is same for the "ddlImg2".
Note:Values are bind in dropdown in Page_Load if its not postback.. so, anyone can explain what's an issue?
This could be a possible issue with the ViewState.
The following link might be helpful to you:
ASP.NET DropDownList not retaining selected item on postback

Button in UpdatePanel not firing Click event: RequiredFieldValidator the cause

I'm working on a page that consists of Telerik RadToolTip, an UpdatePanel that contains a Button, and a few user controls. There is also a Master Page, which is where the ScriptManager is located.
Previously, I had a RadAjaxManager on the Master Page and RadAjaxProxyManager. I removed them and began to implement standard Update Panels because of complexities within the User Controls.
Now, however, I can't seem to get any of this page to behave as expected. When I place a Button in the UpdatePanel, I expect a Partial Postback and I expect the Button's OnClick event to be fired. However, when I run this code with a breakpoint in the btnPostBack_Click event code, the breakpoint never gets hit.
If I cut and paste the same controls with the same settings into a new project, the breakpoint gets hit. Is there something in the environment of the site or could Telerik be interfering with the Button's Click event? I've removed all RadAjaxManager/Proxies.
<%# Page Title="" Language="C#" MasterPageFile="~/AV.Master" AutoEventWireup="true"
CodeBehind="AssetView.aspx.cs" Inherits="AV_ASP_UI.AssetPages.AssetView" %>
<%# Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%# Register TagPrefix="uc" TagName="AssetDiagram" Src="~/Controls/AssetDiagram.ascx" %>
<%# Register TagPrefix="uc" TagName="AssetInfo" Src="~/Controls/AssetInfo.ascx" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<script type="text/javascript">
function DoPartialPostBack(command, id) {
document.getElementById("<%= hfldId.ClientID %>").value = id;
document.getElementById("<%= btnPostBack.ClientID %>").click();
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:HiddenField ID="hfldId" runat="server" />
<telerik:RadToolTip ID="RadToolTip1" runat="server" Modal="true" ShowEvent="FromCode"
Position="Center" RelativeTo="BrowserWindow" HideEvent="FromCode" TargetControlID="hfldFireToolTip">
</telerik:RadToolTip>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" >
<ContentTemplate>
<asp:Button ID="btnPostBack" runat="server" Text="Button" style="visibility: hidden" OnClick="btnPostBack_Click"/>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Panel ID="pnlWorkArea" CssClass="pnlWorkArea" runat="server" Height="770px" onMouseDown="hideSVGTtip(event);">
<uc:AssetDiagram ID="ucAssetDiagram" runat="server" CanvasHeight="720" CanvasWidth="276" />
<uc:AssetInfo ID="ucAssetInfo" runat="server"/>
</asp:Panel>
</asp:Content>

Intellisense not showing up for some controls in code behind

i'm kind of an asp.net beginner and i'm trying just to set the visible attribute dynamically but i can't access "TestLinkBox" nor the "TestLink" id in the code behind. Ive tried to rebuild the solution, to delete the designer.cs file and let it be recreated and tried a few solutions I found on stackOverflow as you can see in the code behind but i always get the "Object reference not set to an instance of an object." error. What am I doing wrong?
PART OF THE ASP.NET CODE
<%# Page Title="" Language="C#" MasterPageFile="~/Public/Main.Master"
AutoEventWireup="true" CodeBehind="SpecifikacijaDetails.aspx.cs" Inherits="web.Public.SpecifikacijaDetails"
%>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"></asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<mc:VijestiTraka ID="vijestitraka" runat="server"></mc:VijestiTraka>
<div class="middle_content_box">
<asp:ListView ID="ListView1" runat="server" DataKeyNames="SpecifikacijaID"
DataSourceID="SqlDataSource1">
<AlternatingItemTemplate>
<div class="details_title_box">
<p class="title"><strong><%# Eval("Brand") %></strong>
<%# Eval( "Model") %>
</p>
</div>
<div class="left_column">
<div class="pregled_modela_slika margb30">
<img src='<%# Eval("SlikaMobitela") %>' />
</div>
<div id="TestLinkBox" class="testLink" runat="server" visible="false">
<asp:HyperLink runat="server" ID="TestLink" NavigateUrl='<%#"~/Public/TestSpecifikacije.aspx?SpecifikacijaID=" + Eval("SpecifikacijaID")%>'
Text="Pogledajte kompletan test"></asp:HyperLink>
</div>
CODE BEHIND
using (MobBL temp = new MobBL())
{
if (temp.ProvjeriImalTest(Int32.Parse(Request.QueryString["SpecifikacijaID"])) > 0)
{
//ListView1.FindControl("link_za_test").Visible = true;
//HtmlControl htmlDivControl = (HtmlControl)Page.FindControl("link_za_tet");
//htmlDivControl.Visible = true;
}
}
The controls your are trying to access in code behind are inside an item template. For this reason, you cannot access them via intellisense because they are not actually on the form - they will be added when the parent control (ListView1) is bound.
Subscribe the the item databound event of the listview control. In there, you can access the child controls for each item in the listview. Something like this would get you the control:
e.Item.FindControl("TestLinkBox");

Repeater ItemCommand doesn't work when linked to the page

EDIT: I've found what's causing the issue, but I don't know why and I don't know how to fix it. I'm using JQuery Mobile to theme my site and when I remove this line:
<div data-role="page" data-theme="a">
I can get the repeater to work properly. Does anyone know how I can keep my theme and get this repeater to work?
Alright I have a repeater like this:
<asp:Repeater ID="Repeater1" runat="server" onitemcommand="Repeater1_ItemCommand" EnableViewState="true">
<ItemTemplate>
<li>
<asp:LinkButton ID="Button1" runat="server" Text='<%# Container.DataItem %>' CommandName="Redirect" />
</li>
</ItemTemplate>
</asp:Repeater>
And the code behind it looks like this
protected void Repeater1_ItemCommand(object source, RepeaterCommandEventArgs e)
{
if (e.CommandName == "Redirect")
{
Session["contact"] = ((LinkButton)e.CommandSource).Text;
Response.Redirect("Contact_Details.aspx");
}
}
And if I navigate directly to this page (without being linked to it from another page) the repeater will fire the ItemCommand. But, if I have my login page redirect back to this page or just click on a link to this page from another page, the itemcommand is never triggered when clicking on the link buttons. Any clues as to why this is?
EDIT: The full code for this page is:
<%# Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="Contacts.aspx.cs" Inherits="WebApplication3.Contacts" %>
<%# MasterType VirtualPath = "~/Site1.Master" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:Repeater ID="Repeater1" runat="server" onitemcommand="Repeater1_ItemCommand" EnableViewState="true">
<HeaderTemplate> <ul data-role='listview' data-theme='c' data-inset='true'>
<li data-role="list-divider"><center><h1>Contacts</h1></center></li></HeaderTemplate>
<ItemTemplate>
<li>
<asp:LinkButton ID="Button1" runat="server" Text='<%# Container.DataItem %>' CommandName="Redirect" />
</li>
</ItemTemplate>
<FooterTemplate></ul></FooterTemplate>
</asp:Repeater>
</asp:Content>
In page load I connect to a webservice that connects to exchange and returns an array out. I do a quick array conversion to an arraylist then the rest of the code is:
//Converts the array grabbed from the webservice to an arraylist
ArrayList testList = ArrayList.Adapter(contactsList);
Repeater1.DataSource = testList;
Repeater1.DataBind();
Repeater1.ItemCommand += new RepeaterCommandEventHandler(Repeater1_ItemCommand);
}
So I figured out the line that was giving me an issue.
In my master page I had:
<div data-role="page" data-theme="a">
This line is for my JQuery Mobile Theme. When I commented it out, it broke the theme but the repeater worked. So I took a look into the JQuery Mobile docs and found that I could put rel="external" as an attribute to the link that links to this page. This removes the AJAX transitions and forces the page to refresh when clicked.
Not sure exactly why this was an issue, any gurus have an idea?

Remembering active tab on refresh of ASPX page

I've got an ASPX page set up that loads and displays dynamic data from a local SQLite database. Since the data is being written to the database from a separate C# application, I've set up my ASPX page to refresh every 30 seconds when the database has flagged itself as actively receiving new data.
On my ASPX page, I've got a TabContainer with several different TabPanels that each represent a different view of the data. Now, when my page is being refreshed, the active tab panel is being reset to the one set in my ASPX page as the ActiveTabIndex.
I was wondering if there is an easy way to persist which tab is being remembered.
Thanks!
Edited to add code sample
MyPage.aspx
<%# Page Title="" Language="C#" MasterPageFile="~/MasterPageFile.master" AutoEventWireup="true" CodeFile="MyPage.aspx.cs" Inherits="MyPage" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="content" Runat="Server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager" runat="server" />
<asp:TabContainer ID="tabContainer" runat="server" ActiveTabIndex="1" CssClass="myTabStyle" Visible="true">
<asp:TabPanel ID="tab1" runat="server" HeaderText="Tab 1">
<ContentTemplate>
<p>Hello</p>
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel ID="tab2" runat="server" HeaderText="Tab 2">
<ContentTemplate>
<asp:PlaceHolder ID="tab2placeholder" runat="server" />
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel ID="tab3" runat="server" HeaderText="Tab 3">
<ContentTemplate>
<asp:TabContainer ID="tab3content" runat="server" ActiveTabIndex="0" CssClass="myTabeStyle" />
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel ID="tab4" runat="server" HeaderText="Tab 4">
<ContentTemplate>
<p>Blah.</p>
</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>
</asp:Content>
MyPage.aspx.cs
public partial class MyPage : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
...
if (isInProgress)
{
Response.AddHeader("Refresh", "30");
}
LoadTab1();
LoadTab2();
LoadTab3();
LoadTab4();
...
}
}
Try putting UpdatePanels within in the TabPanels. If you post a code sample of your ASPX it would be easier to help.
If you are doing full postbacks all the time then save it in your ASP.NET session. e.g.
Session["ActiveTab"] = index;
Then to retrieve it:
int? activeTab = Session["ActiveTab"] as int?;
Otherwise using jQuery ajax to refresh the data, is in my experience a much better way to go than using UpdatePanels. But it looks like you are already committed to MS Ajax so go with Mike's recommendation to use an ajax timer instead of a refresh header.

Resources