i'm facing a problem, currently i'm having a update panel in my master page and in one of my child page i'm having a asp fileupload control.
My update Panel in master p[age:
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:updateprogress associatedupdatepanelid="UpdatePanel1"
id="updateProgress" runat="server">
<progresstemplate>
<div id="processMessage" style=" background-image:url('../../Styles/ajax-loader3.gif'); width:100px; height:100px; background-repeat:no-repeat; background-position:center;">
</div>
</progresstemplate>
</asp:updateprogress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
..
</ContentTemplate>
</asp:UpdatePanel>
</form>
My Child page which needs a fileupload:
<div id="Annoucments" class="ContentDIV">
<h2 class="Tabheader">Annoucments</h2>
<p class="tabdescription">Here you will be able to upload announcements and pictures to be displayed in the login page, below is the current announcement click on update to save the changes that you have made.</p>
<table width = "100%">
<tr>
<td class="Tablabel">Annoucment title:</td> <td class="tableInput" align="left"><asp:TextBox ID="Announcement_TB" runat="server" CssClass="textboxTabs"></asp:TextBox></td>
<td class="Tablabel">Picture/Poster:</td> <td class="tableInput" align="left"><asp:FileUpload ID="Announcement_PIC" runat="server" CssClass="textboxTabsFiles"/></td>
</tr>
<tr>
<td class="Tablabel">Description:</td> <td class="tableInput" align="left"><asp:TextBox ID="Announcement_Desc" CssClass="textboxTabs" runat="server" Rows="3" TextMode="MultiLine"></asp:TextBox></td>
</tr>
<tr><td colspan="4" style="height:10px" id ="BLANK">
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</td></tr>
<tr>
<td colspan="2" align="right"><input type="button" id="Announcement_Update" runat="server" value="Update" class="TabButton" onserverclick="ANNOUNCEMENT_UPDATE_Click" style=" font-size:smaller"/></td><td colspan="2"> <input type="button" ID="ANNOUNCEMENT_Cancel" runat="server" value="Cancel" class="TabButton" style=" font-size:smaller"/></td>
</tr>
</table>
</div>
*When i click the button Announcement_Update backend codes will be triggered to get my filename, the file name returned will always be "" found out while debugging.*
Put this code in child page, to pass PostBackTrigger for file upload.
protected void Page_Load(object sender, EventArgs e)
{
UpdatePanel updatePanel = Page.Master.FindControl("UpdatePanel1") as UpdatePanel;
UpdatePanelControlTrigger trigger = new PostBackTrigger();
trigger.ControlID = Announcement_Update.UniqueID;
updatePanel.Triggers.Add(trigger);
}
enjoy coding :)
You can't get filename inside that UpdatePanel
either remove that UpdatePanel from your code or use Asynchronous File Uploader,
Alternatively you could use Ajax File Uploading techniques this is a little tricky though.
Asp UpdatePanel not work inside a update panel duw to postback issue.
You can add trigger with the button assosiated with uploader like
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Click" />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="Button1" />
</Triggers>
</asp:UpdatePanel>
It works for me if you add the Trigger, but also make sure to edit to form tag to include:
<form runat="server" enctype="multipart/form-data">
Related
I am used a RadioButtonList in my Page. also I used updatepanel on this Page.My problem is RadionButtonList display only item name no roundclick in the time of Page load . it will show with round after cliking one of the any control in the page,means after a postback .this RadiobuttonList am using in another pages but it works properly.
my code is below:
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</ajaxToolkit:ToolkitScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server"><ContentTemplate>
<fieldset>
<table class="ui-accordion" >
<tr>
<td align="left" colspan="2"class="style2">
<asp:RadioButtonList ID="RbSelection" style="margin-left:120px;" runat="server" RepeatDirection="Horizontal" CellPadding="12" CellSpacing="1" onselectedindexchanged="RbSelection_SelectedIndexChanged" AutoPostBack="True">
<asp:ListItem Value="1">Department</asp:ListItem>
<asp:ListItem Value="2">Section</asp:ListItem>
</asp:RadioButtonList>
</td>
</tr>
</table>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
</form>
Below is the markup page
<asp:UpdatePanel runat="server" UpdateMode="Conditional">
<ContentTemplate>
<table>
<tr>
<td>
<label>File name<label>
</td>
</tr>
<tr>
<td>
<asp:TextBox runat="server" ID="txtName" Width="150%"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<label>File</label>
</td>
<td>
<asp:FileUpload runat="server" ID="fileUpload" />
</td>
</tr>
</table>
<asp:Button runat="server" ID="btnUpload" Text="Upload file" OnClick="btnUpload_Click" />
</div>
<div class="panel-heading">File display</div>
<div class="panel-body">
<asp:GridView runat="server">
</asp:GridView>
<asp:Button runat="server" ID="btnRefresh" Text="Refresh" OnClick="btnRefresh_Click" />
</div>
</div>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnUpload" />
</Triggers>
</asp:UpdatePanel>
With the above code, whenever the user clicks "btnUpload", there'll be a post back, but there is an update panel to prevent the post back, when I change the PostBackTrigger to AsyncPostBackTrigger, the page didn't post back but the fileUpload.HasFile will be false and was unable to get the file.
What's wrong with the above code?Why the postBackTrigger triggers a post back?
File upload will not work with AsyncPostBackTrigger. It will only work with PostBackTrigger.
SOLUTION : If You want to upload file with AsyncPostBackTrigger than you have to use ajaxtoolkit. And in AjaxToolkit their is Control name with "AsyncFileUpload".
Hope You know how to add AjaxToolkit to your Toolbox. If you dont know than tell me i will guide you.
You have not defined event of control, you have to tell that trigger on which event of control:
<asp:AsyncPostBackTrigger ControlID="btnUpload" EventName="Click" />
UPDATE:
you have to use async postback trigger:
AsyncPostBackTrigger - use these triggers to specify a control within or outside of the UpdatePanel that, when clicked, should trigger a partial page postback.
PostBackTrigger - use these triggers to have a control within the UpdatePanel cause a full page postback rather than a partial page postback.
I'm in the process of converting an application into an ASP.NET Website. The way the page works is that the user puts in a list of machines in the box then click start, it goes through the list runs the checks and outputs the status and results to a text box on the left. In addition it puts a processing icon beside the check mark as it runs a check and removes it when the check is done. In my .NET application it works fine, but I can't figure out how to do it in ASP.NET
I've tried using Ajax controls to do this so I enclosed the status box in an update panel and put a timer that updates the panel every second.
In the code behind, right now I have a function that just rights out some test text to the results text panel, along with a 3 second pause to simulate the code in the back ground. However it doesn't update the panel until the function finishes instead of each time the text is updated.
In classic ASP I would have written the status out to either a text file or a DB and just set the page to reload on a regular basis and retrieve the information until done flag was hit and then stop the reloads. I was trying to avoid making all those call backs if I could help it. I was hoping there was a better way to do it, but if there isn't I could make just the update panel call back but I'm still not entirely sure how to turn the processing icons on and off.
Page Code
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div>
<table class="Standard">
<tr>
<td colspan="2">
<div class="Title">
Title
</div>
</td>
</tr>
<tr>
<td class="Column1">
<div style="text-align: center;">
Input Devices to Check<br />
<br />
<asp:TextBox ID="txtMachineList" runat="server" TextMode="MultiLine" Rows="12"
Width="200px"></asp:TextBox>
<asp:Button ID="btnStart" CssClass="button_blue_small" runat="server" Text="Start" OnClick="StartCheck" /><br />
<br />
</div>
<table>
<tr>
<td>
<asp:CheckBox runat="server" ID="chkOne" Text="Check 1" />
</td>
<td>
<asp:Image ID="Load1" runat="server" ImageUrl="Images/flower-loader.gif" Visible="false" />
</td>
</tr>
<tr>
<td>
<asp:CheckBox runat="server" ID="chkTwo" Text="Check 2" />
</td>
<td>
<asp:Image ID="Load2" runat="server" ImageUrl="Images/flower-loader.gif" Visible="false" />
</td>
</tr>
</table>
</td>
<td class="Column2">Status:<br />
<asp:UpdatePanel ID="StatusPanel" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="StatusPanelTimer" EventName="Tick" />
</Triggers>
<ContentTemplate>
<asp:TextBox ID="txtStatus" runat="server" Columns="300" Enabled="True" ReadOnly="True"
Width="800px" TextMode="MultiLine" Rows="35"></asp:TextBox>
<asp:Timer ID="StatusPanelTimer" runat="server" Interval="1000" OnTick="StatusTimer_Tick"></asp:Timer>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Code Behind
protected void Page_Load(object sender, EventArgs e)
{
}
protected void StartCheck(object sender,EventArgs e)
{
Load1.Visible = true;
Load2.Visible = true;
txtStatus.Text = "Test 1";
System.Threading.Thread.Sleep(3000);
txtStatus.Text += "Test 2";
System.Threading.Thread.Sleep(3000);
txtStatus.Text += "Test 3";
System.Threading.Thread.Sleep(3000);
Load1.Visible = false;
Load2.Visible = false;
}
protected void StatusTimer_Tick(object sender, EventArgs e)
{
StatusPanel.Update();
}
So it seems the problem is in your "Start" button's function.
If you just add:
txtStatus.Text += "Tick\n";
to your tick event, you can see that your page is updating.
The problem is that After you click the button, the page doesn't receive a response until the StartCheck function finishes (Even the ticking stops).
I have spent hours Googling and searching past questions but have struggled to get anywhere with those answers (be it I can't get it into my solution correctly or it isn't suitable for me as they don't have master pages).
My question is, I have a couple of asp.net pages which can take a while to load (sometimes 5 seconds+) as there is a lot of data being requested from a database on the Page_Load method. To stop users from thinking that the page has crashed and either refreshing the page or doing something else, I want to put up a Loading message hiding everything else on the page (apart from the menu) while it loads.
I am using ASP.Net 4.0 with master pages and coding in C#.
The one where I get the most success is using the UpdatePanel on my master page where the content template covers the contentplaceholder, however I know this is not the best way to go about it and anyway it only shows up once, i.e. The user logs in, the loading message appears and once all the data has loaded on the home page (dashboard.aspx) the loading message disappears, which is kind of what I want. However if the user goes away from that page and then clicks home the loading message never appears again, just takes a while to load. It also never appears for any other page that takes a noticeable time to load.
Below is the body of the master.aspx
<body>
<form runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div class="page">
<div class="header">
<div class="title">
<h1>
Header
</h1>
</div>
<div class="loginDisplay">
<asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
<AnonymousTemplate>
[ Log In
]
</AnonymousTemplate>
<LoggedInTemplate>
Welcome <span class="bold">
<asp:LoginName ID="HeadLoginName" runat="server" />
</span>! [
<asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out"
LogoutPageUrl="~/Default.aspx" />
]
</LoggedInTemplate>
</asp:LoginView>
</div>
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false"
IncludeStyleBlock="false" Orientation="Horizontal" OnMenuItemClick="NavigationMenu_MenuItemClick">
<Items>
<asp:MenuItem Text="Home" />
<asp:MenuItem Text="About" />
</Items>
</asp:Menu>
</div>
</div>
<div class="main">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<asp:Panel ID="Panel1" runat="server" HorizontalAlign="Center">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/loader.gif" />
</asp:Panel>
</ProgressTemplate>
</asp:UpdateProgress>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanelAnimationExtender ID="UpdatePanel1_UpdatePanelAnimationExtender"
runat="server" Enabled="True" TargetControlID="UpdatePanel1">
</asp:UpdatePanelAnimationExtender>
</div>
<div class="clear">
</div>
</div>
<div class="footer">
</div>
</form>
And below is the page for the dashboard.aspx (a page which has a long loading time)
<asp:Panel ID="PanelWelcome" runat="server">
<h1>
Welcome
<asp:Label ID="LabelUserName" runat="server" Text="[User Name]" /> to your
personal Dashboard.</h1>
<table width="100%" cellpadding="5px">
<tr>
<td style="width: 70%" valign="top">
<asp:Panel ID="Panel2" runat="server">
<p>
</p>
<h4>
Up and Coming </h4>
<br />
<asp:GridView ID="GridViewItin" runat="server" Width="100%" HorizontalAlign="Left"
OnRowDataBound="GridViewItin_RowDataBound">
</asp:GridView>
</asp:Panel>
</td>
<td style="width: 30%">
<asp:Panel ID="PanelProfile" runat="server">
<asp:ImageButton ID="ImageButtonProfile" runat="server" ImageUrl="~/Images/BlankProfile.jpg"
Width="150px" /><br />
<h4>
Name:</h4>
<asp:Label ID="LabelPARname" runat="server" Text="[Person Name]"></asp:Label>
<h4>
Company:</h4>
<asp:Label ID="LabelBARname" runat="server" Text="[Company Name]"></asp:Label>
<h4>
Date of Birth:</h4>
<asp:Label ID="LabelPARdob" runat="server" Text="[DOB]"></asp:Label><br />
<asp:LinkButton ID="LinkButtonProfilePage" runat="server" OnClick="LinkButtonProfilePage_Click">More details...</asp:LinkButton>
</asp:Panel>
</td>
</tr>
</table>
</asp:Panel>
Could you please show me the best way to go about it and where I am going wrong? Also how I can hide the ContentTemplate when the UpdateProgress template is showing that would be great?
Thanks.
Okay so I figured it out what I was doing wrong, I thought I would post what I did to hopefully help someone else who might end up with the same issues...
Basically I hadn't thought about it logically. There are controls outside the update panel such as a NavigationMenu which would never fire the update progress because they had nothing to do with the Panel! I had to add triggers to the update panel to deal with all the things that happen outside the panel.
So, in my master page I had the following code
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="NavigationMenu" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdateProgress ID="progress" runat="server" DynamicLayout="true" DisplayAfter="0">
<ProgressTemplate>
<div id="overlay">
<div id="modalprogress">
<div id="theprogress">
<asp:Image ID="loader" runat="server" ImageAlign="AbsMiddle" ImageUrl="~/images/loader.gif" />
Please wait...
</div>
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanelAnimationExtender ID="UpdatePanel1_UpdatePanelAnimationExtender"
runat="server" Enabled="True" TargetControlID="UpdatePanel1">
</asp:UpdatePanelAnimationExtender>
Hopefully that will help someone else!
You can use UpdateProgress control. You can get it From Toll box under Ajax Extensions Tab.
I am describing you a scenario:
Suppose I have One Upadate Panel name UpdatePnl1 , In that I have a Button Say GO.when we hit on go it should redirect to another page. before that it will promt you please wait.
Now my Code will be like that
<asp:UpdatePanel ID="UpdatePnl1" runat="server">
<ContentTemplate>
<asp:Button ID="BtnGO" runat="server" Text="GO" onclick="BtnGO_Click"/>
</ContentTemplate>
</asp:Updatepanel>
Button click code:
protected void BtnGO_Click(object sender, EventArgs e)
{
Response.Redirect("Example.aspx");
}
Now here is the code for UpdateProgress what you need to add
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePnl1" >
<ProgressTemplate>
<asp:Label ID="LblWaitMsg" runat="server" Text="Processing Request, Please Wait..."></asp:Label>
</ProgressTemplate>
</asp:UpdateProgress>
Note: Your page Should contain ScriptManager.
I'm working on employee web application project, in my application i used the 2 update panels,hidden fields and buttons. actually what I'm doing is while clicking button i need to get next employee info and save it this info. and here whenever I'll click on button which in update panel2, get employee info and I'll keep this employee id into hidden field which in update panel1 and while debugging hidden field value shows correct employee id but saving time its having old value. for this I'm facing lot problem please help me.
Thank you
Here is my code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td style="border-left: 1px solid #CDCDCD; border-right: 1px solid #CDCDCD; background-color: #E9E9E9">
<asp:ScriptManager ID="ScriptManager" runat="server" EnablePartialRendering="true"
AsyncPostBackTimeout="36000" />
<div>
<asp:Timer ID="Timer1" runat="server" OnTick="Timer1_Tick" Interval="60000">
</asp:Timer>
</div>
<div align="left" style="width: 715px; background: #E9E9E9;">
<div style="margin: 0px 30px 0px 45px; line-height: 140%; border-bottom: 1px solid #E0E2E0;
padding: 10px 0px 15px 0px">
<asp:UpdatePanel ID="upNextChapter" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<table width="100%">
<tr>
<td align="right">
<asp:HiddenField ID="hfEmpId" runat="server" Value="0" />
** Employee Info **
</td>
</tr>
</table>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="imgbtnNext" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</div>
</div>
<div align="right" style="padding-right: 30px;">
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:ImageButton ID="imgbtnNext" runat="server" OnClick="imgbtnNext_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
<div align="center">
</div>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Code behind:
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void imgbtnNext_Click(object sender, EventArgs e)
{
//Get Employee Info & store it in Hidden field value=Employee Id
//** Saving Employee Info using Hidden filed value **
}
}
I did a similar test on my machine, I really can't see why HiddenField is not updated. Its most likely your "Get Employee Info" is the root cause.
Also I want to correct your code a bit.
Your first UpdatePanel is doing unnecessary task, the tag UpdateMode="Conditional" is no need.
Also
<Triggers>
<asp:AsyncPostBackTrigger ControlID="imgbtnNext" EventName="Click" />
</Triggers>
this tag has no effect to anything because the button is not in the current UpdatePanel. By default everything in UpdatePanel is AsyncPostBackTrigger anyway, unless you have something to post back you can add asp:PostBackTrigger.