For some reason the update panel is not updating the label or image files... any help would be appreciated. The method is calling and the file upload is occurring.
ASP:
<asp:UpdatePanel runat="server" UpdateMode="Conditional" ID="UpdateTest">
<ContentTemplate>
<asp:Label ID ="lblTemp" runat="server">test</asp:Label>
<asp:AsyncFileUpload ID="ImageUpload" runat="server" OnUploadedComplete="ImageUpload_UploadedComplete" />
<label>Image</label><br />
<div style="height:60px; padding-bottom:10px; padding-top:5px; ">
<div style="width:55px; float:left;margin-right:10px;">
<asp:Image src="../images/menu_bkg.gif" ID="smallImage" runat="server" Height="60" Width="60" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
C#:
protected void ImageUpload_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{
string filename = System.IO.Path.GetFileName(ImageUpload.FileName);
ImageUpload.SaveAs(Server.MapPath("../Uploads/") + filename);
smallImage.ImageUrl = "../uploads/" + filename;
lblTemp.Text = "hellllo";
UpdateTest.Update();
}
EDIT:
I've been running more tests and it seems like perhaps it is an issue with the AsyncFileUpload. I put a button within the UpdatePanel and had it change the image URL and label text. The label text piece works perfectly but when the update() function is called it wipes the asyncfileupload clean. It seems perhaps the lbltemp and smallImage can't be updated?
Answer is here - looks like Asyncfileupload requires full page post back to change the content
go through the below link.
http://forums.asp.net/p/1576992/3975535.aspx#3964776
Related
On my ASP.NET page I am using Google Visualization charts inside of an asp:UpdatePanel. The user selects a chart they want to see from two asp:DropDownLists and then my C# code generates the JavaScript and I then call ScriptManager.RegisterStartipScript(...). When the page first loads the first default chart (i.e. first call to RegisterStartupScript) works and I can view the javascript from View Source. It is only on the postbacks that I get a blank chart and when I then go to View Source the page didn't receive the new JavaScript and it still has the old default JavaScript from the first page load.
Here is the weird behavior. If I use the exact same code but replace my Google Chart code with alert(...); then the alert() fires every time and when I view the source the script is there.
I've tried may different things and also followed such answers as here. Below is my code and any help would be appreciated, I've had other people look at this and we are all stumped.
FYI: If I remove all UpdatePanels and related items (ScriptManager and UpdateProgress) and use ClientScript.RegisterStartupScript() then everything works fine and I get the new JavaScript code on my page and the new chart appears as it should.
<asp:ScriptManager ID="ScriptMgr" runat="server" />
<asp:UpdatePanel ID="UpdatePanelData" runat="server">
<ContentTemplate>
<p>
<asp:DropDownList ID="PlotList" runat="server" AutoPostBack="true" Width="500px"
onselectedindexchanged="PlotList_SelectedIndexChanged"></asp:DropDownList>
<asp:DropDownList ID="RangeList" runat="server" Width="125px"
style="float:right;" AutoPostBack="True"
onselectedindexchanged="RangeList_SelectedIndexChanged">
</asp:DropDownList>
<br />
<asp:Label ID="PlotDescription" runat="server" Width="100%"></asp:Label>
</p>
<div id="chart_material" class="GoogleChart" style="width:100%;height:450px;"></div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="RangeList" EventName="SelectedIndexChanged" />
<asp:AsyncPostBackTrigger ControlID="PlotList" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgressData" runat="server" DisplayAfter="500">
<ProgressTemplate>
<div class="LoadingPanel">
<asp:Image ID="LoadingImage" runat="server" ImageUrl="~/Images/loading_2.gif" AlternateText="Loading ..." ToolTip="Loading ..." style="padding: 10px;position:fixed;top:45%;left:50%;" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
And my C# code looks like this. The function DisplayPlot is called from the two DropDownList events and each list passes in themselves as 'control'.
private void DisplayPlot(Control control)
{
PlotInformation Plot = new PlotInformation(ChartDivID);
double Range = Convert.ToDouble(RangeList.SelectedValue);
string JavaScript = Plot.GetPlotScript(PlotList.SelectedItem.Text, Range);
PlotDescription.Text = Plot.GetDataPlotDescription(PlotList.SelectedItem.Text);
//string TestScript = "<script type=\"text/javascript\">\n\talert('" + PlotList.SelectedItem.Text + "');\n</script>";
ScriptManager.RegisterStartupScript(control, control.GetType(), ScriptKey, JavaScript, false);
//ScriptManager.RegisterStartupScript(control, this.GetType(), ScriptKey, JavaScript, false);
//if (!ClientScript.IsStartupScriptRegistered(ScriptKey))
// ClientScript.RegisterStartupScript(this.GetType(), ScriptKey, JavaScript);
}
I know this is late, but I spent a lot of time on the same bug.
Try changing:
ScriptManager.RegisterStartupScript(control, control.GetType(), ScriptKey,
JavaScript, false);
To
ScriptManager.RegisterStartupScript(UpdatePanelData, UpdatePanelData.GetType(), ScriptKey,
JavaScript, false);
So the problem here is that i am unable to call a button that another developer created and handed over the site to me.
He is not available and I am not very much into ASP.net but really need to figure this out.
The code is:
<div class="clearfix">
<asp:UpdatePanel runat="server" id="UpdatePanel2">
<ContentTemplate>
<asp:Label ID="lblDesc" runat="server" Text=""/>
<asp:LinkButton ID="btnMore" runat="server" Text="more"/>
</ContentTemplate>
</asp:UpdatePanel>
</div>
The btnMore should call a button at server making the word more to be a link that will expand the div to get a blog post from the database.
It is not doing so.
Any idea why??
Your LinkButton has no associated action with it. You need to set the OnClick attribute to the function on the server side that has the correct signature. For example...
<asp:LinkButton ID="btnMore" runat="server" Text="more" OnClick="btnMore_Click" />
Then in your code behind...
protected void btnMore_Click(object sender, EventArgs e)
{
//do your server side stuff
}
I want to set the textbox contol located in the panel control via code
I know to retrieve the inputted value in the textbox control:
string myVal = Request.Form["txtResult"];
I want to set the txtResult.text = "some text";
makeup snippet:
<asp:Panel ID="Panel1" runat="server" Style="display: none" Width="233px">
<asp:TextBox ID="txtResult" runat="server" AutoPostBack="True"></asp:TextBox>
<br />
<div align="center">
<asp:Button ID="OkButton" runat="server" Text="OK" />
<asp:Button ID="CancelButton" runat="server" Text="Cancel" />
</div>
</asp:Panel>
txtResult is not available within code, I tried to see if it is available in the page_load, it's not
texReults was a typo, its txtResult, I updated the ID
the intellisense does not recognize any cntr by the name txtResult
its a new web application and the panel visibility=True
maybee this wil help, above the snipet, I use ScriptManager from the AJAX Exstension
I am aware of he Asnchronius affects, partial potback, etc.
It's a managed control, you should be able to set it on the Page_Load event:
protected void Page_Load(object sender, System.EventArgs e)
{
txtResult.Text = "some text";
}
Update: Based on your update, there are a couple of things that you would need to check:
Spelling: Are you sure you're spelling the control name correctly?
Its ID in your code is "txtResults", but you're referencing it as
"txtResult".
Designer: Did you copy the aspx page or bypass VS in some way for this page? If so check the .designer file for the reference to the control: i.e. "Page1.aspx.designer.cs"
Visibility: Is the Panel control's visibility set to true? If not, then it won't render the controls that are contained within it.
Update 2: If you're doing this through scriptmanager, then I highly recommend that you read through this: http://www.wrox.com/WileyCDA/Section/Using-the-ASP-NET-AJAX-ScriptManager.id-305492.html
I have two listboxes in my application on button click i am pushing the item from one list box to other , the code works fine but it causes postback , while i move the item from one list box to other whole page is being loaded again , how i can prevent this .
This will be the code on my aspx page
<div class="bx1">
<telerik:RadListBox ID="RadListBox1" runat="server" DataTextField="Name" DataValueField="Id"
Width="250px">
</telerik:RadListBox>
</div>
<div style="height:7px"></div>
<div class="bx5">
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="images/dwnArrow.png" OnClick="MoveDownClick" />
<asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="images/uparrow.png" OnClick="MoveUpClick" />
</div>
<div style="height:7px"></div>
<div class="bx1">
<telerik:RadListBox ID="RadListBox2" runat="server" DataTextField="Name"
DataValueField="Id" Width="250px" >
</telerik:RadListBox>
</div>
This is my code behind for listbox
protected void MoveDownClick(object sender, EventArgs e)
{
if (RadListBox1.SelectedIndex < 0)
{
}
else
{
RadListBox2.Items.Add(RadListBox1.SelectedItem);
RadListBox1.Items.Remove(RadListBox1.SelectedItem);
RadListBox2.SelectedItem.Selected = false;
}
}
protected void MoveUpClick(object sender, EventArgs e)
{
if (RadListBox2.SelectedIndex < 0)
{
}
else
{
RadListBox1.Items.Add(RadListBox2.SelectedItem);
RadListBox2.Items.Remove(RadListBox2.SelectedItem);
RadListBox1.SelectedItem.Selected = false;
}
}
If your version of Visual Studio is less than 2008, then first download the ajax from the following site and install it:
http://ajaxcontroltoolkit.codeplex.com/
Add a reference to the System.Web.Extensions dll and then add the following line right after your opening <form> tag:
<asp:ScriptManager runat="server" ID="Script1"></asp:ScriptManager>
Replace the Your Code in following piece of code with your entire code that you have written above:
<asp:UpdatePanel runat="Server" ID="u1">
<ContentTemplate>
Your Code
</ContentTemplate>
</asp:UpdatePanel>
That's it, this will stop posting back your page.
Take the time to look into using jQuery along with Microsoft's Ajax with Update Panels or moving into jQuery exclusively where possible. Here are two links that are excellent reads regarding the subject:
Microsoft Ajax? http://encosia.com/why-aspnet-ajax-updatepanels-are-dangerous/
jQuery Ajax: http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/
I am building an ASP.NET site using Visual Studio 2008 and have a page looking like this (stuff snipped)
<asp:Content ID="Content2" ContentPlaceHolderID="PageContentPlaceHolder" runat="server">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
the page here..
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="100">
<ProgressTemplate>
<div>
<asp:Image ID="AjaxImage" runat="server" ImageUrl="Ajax.gif" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</asp:Content>
The page_load starts a long (>5s) process
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
LongRunningProcess();
}
}
How can I display the UpdateProgress while the LongRunningProcess is running? It does work when I move the LongRunningProcess() call to a button onclick handler.
Move your page_load code into a new function.
Add a AJAX timer into the ContentTemplate section of your page. Set the interval to 500. (1/2 second)
Double-click on the Timer object in Design view to create a _tick handler.
In the _tick handler created in the previous step, call the following code
protected void My_Timer_Tick(object sender, EventArgs e)
{
My_Timer_Name.Enabled = false;
My_Page_Load_Function(); // Function created in step 1 above)
}
protected void My_Page_Load_Function()
{
System.Threading.Thread.Sleep(5000); // A delay to simulate doing something.
lblMyLabel.Text = "Done!"; // Write output to page.
}
Create a normal div that shows the Ajax.gif so it shows "processing" by default.
In the javascript pageLoad() function, make a call back to the page using Ajax's PageMethods.
function pageLoad(sender, args) {
PageMethods.getVersions(LoadVersionsCallback);
}
The method you are calling in your .aspx.cs file has to be static, it can take parameters and looks something like:
[System.Web.Services.WebMethod]
public static string getVersions()
{
StringBuilder sb = new StringBuilder();
... etc.
return sb.ToString();
}
The javascript function that you specified when you called the method will run when the method completes. It will be passed the results. At the end of this function you hide the Ajax.gif div.
function LoadVersionsCallback(result) {
// do something with the results - I load a dropdown list box.
...etc.
// here is where you hide your div holding the Ajax.gif
}
And then you work on making whatever it is you are doing run in less than 1 second....
I would put a Ajax timer on the page and set it for less than a second... It will only run once and after its first tick then you need to disable it otherwise it will fire again. (you don't want to start your long running process more than once...)
then on the OnTimerTick event I would start your long running process that way your page fully renders and you can display your UpdateProgress while its running.
you out to be able to move the code that you had for your button click to the time tick...
I used JBrooks idea above (i.e. showing the progress indicator as part of a Panel that also includes the Iframe, so that it shows even before the Iframe first loads), but simplified it: style the iframe so that when it does appear it is on top of the animated GIF.
Requires no Javascript or C# code-behind.
Here's the relevant ASPX, followed by the CSS. You'll have to noodle with the "top" setting in the style to cover the image you use.
<asp:Panel ID="DetailPanel" runat="server" CssClass="submitBox detailPanel">
<asp:Table ID="Table1" runat="server" Width="100%">
<asp:TableHeaderRow ID="TableHeaderRow10" runat="server">
<asp:TableCell ID="TableHeaderCell" runat="server"
Font-Bold="true" HorizontalAlign="Center">
Title Text
</asp:TableCell>
</asp:TableHeaderRow>
<asp:TableRow>
<asp:TableCell HorizontalAlign="Center">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/animated_progress.gif" />
</asp:TableCell>
</asp:TableRow>
</asp:Table>
<div class="iframeOverlay">
<iframe id="IframeDetail" runat="server" style="width: 100%; height: 100%;" />
</div>
</asp:Panel>
.iframeOverlay
{
z-index: 2;
position: relative;
top: -50px;
}
With Jquery.
<script>
$(document).ready(function() {
$('#<%= UpdateProgress1.ClientID %>').show();
});
</script>
<script> $(document).ready(function() { $('#<%=
UpdateProgress1.ClientID %>').show(); }); </script>
This worked well for me, just had to add it to the end of the BODY section and works like a charm.