Language: C#
Compiler: Visual Studio 2012
O/S: Windows 7 Home Premium
I have been using an UpdatePanel on my Content page for a while now, to update an Image based on text in a text box.
It all worked, up until now. Currently, the page does a full reload to display the image, instead of a partial post-back.
.aspx code
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:Image ID="imgProfilePicture" runat="server" />
<br />
<asp:TextBox ID="txtImageLocation" runat="server" AutoPostBack="True" MaxLength="1000" CssClass="styleTextBoxCenter" Width="170px" OnTextChanged="txtImageLocation_TextChanged"></asp:TextBox><br />
<div style="padding-left: 4px;">
<asp:Label ID="lblImageUrl" runat="server" Text="Image URL" CssClass="styleLabelWatermark"></asp:Label>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="txtImageLocation" EventName="TextChanged" />
</Triggers>
</asp:UpdatePanel>
.cs code
protected void txtImageLocation_TextChanged(object sender, EventArgs e)
{
if(string.IsNullOrEmpty(txtImageLocation.Text))
{
imgProfilePicture.ImageUrl = RemoteReaderPlugin.Current.CreateSignedUrl("http://i.minus.com/iNQ7wK2opRJT1.gif",
new ResizeSettings(
"width=183&format=png"));
lblImageUrl.Text = "Image URL";
return;
}
if (!#txtImageLocation.Text.StartsWith("http://"))
{
#txtImageLocation.Text = "http://" + #txtImageLocation.Text;
}
WebRequest request = WebRequest.Create(#txtImageLocation.Text);
try
{
request.GetResponse();
imgProfilePicture.ImageUrl = RemoteReaderPlugin.Current.CreateSignedUrl(#txtImageLocation.Text,
new ResizeSettings(
"width=183&s.roundcorners=10"));
lblImageUrl.Text = "Image Verified";
lblImageUrl.ForeColor = System.Drawing.Color.Green;
}
catch (Exception)
{
imgProfilePicture.ImageUrl =
RemoteReaderPlugin.Current.CreateSignedUrl(
"http://i.minus.com/ibwhXZ9wLo1mOz.jpg",
new ResizeSettings("width=183&s.roundcorners=10"));
lblImageUrl.Text = "Invalid URL";
lblImageUrl.ForeColor = System.Drawing.Color.Red;
txtImageLocation.Focus();
}
}
I cant think of anything that I've changed, and the Master page still has a ScriptManager on.
Turns out, all functionality is lost on an UpdatePanel if you set a "Global" Routein your Global.asax.
The issue started when I added routes.MapPageRoute("", "{address}", "~/{address}.aspx");.
Upon removing, the ajax panels worked.
Related
I am working on an ASP project (fairly new to ASP) one weird thing I have noticed is that images appear to refresh until after the first circle of images, my page code is:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Image runat="server" ImageUrl="~/Images/1.png" ID="updateImage"></asp:Image>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="click" />
</Triggers>
</asp:UpdatePanel>
And the code behind is:
protected void Button1_Click(object sender, EventArgs e)
{
if (updateImage.ImageUrl != "~/Images/8.png")
{
//Get Image number
string image = updateImage.ImageUrl.ToString();
char[] file = image.ToCharArray();
int fileName = Convert.ToInt32(file[9].ToString());
fileName++;
updateImage.ImageUrl = "~/Images/" + fileName.ToString() + ".png";
}else
{
updateImage.ImageUrl = "~/Images/1.png";
}
}
When I click the button the first cycle of 8 images looks as though the page is reloading, but after that there is no reload on the page and the images just change smoothly, is this because ASP caches the images after the first cycle? Is there any way to stop it flickering on the first cycle?
Thanks.
I have a GridView which shows some data and has a Button in the last column that combines the value of the 3 other columns.
I was able to refresh the GridView easily just by calling this Function GridData in the rowCommand.
protected void GridviewProcess_RowCommand(object sender, GridViewCommandEventArgs e)
{
try
{
if (e.CommandName == "More")
{
objENT = new ENT();
int index = Convert.ToInt32(e.CommandArgument.ToString());
Label locCode = (Label)GridviewProcess.Rows[index].FindControl("lbl0");
Label SurveyNo = (Label)GridviewProcess.Rows[index].FindControl("lbl2");
Button Combine = (Button)GridviewProcess.Rows[index].FindControl("btnCombine");
Combine.Enabled = false;
objENT.LocationCode = locCode.Text;
objENT.SurveyNumber = SurveyNo.Text;
objENT.ProcType = "CREATECUSTOMER";
DataSet ds = new DataSet();
ds = BLL.CdCustomer(objENT);
}
}
catch (Exception ex)
{
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "alertMessage", "alert('Some Error occurred Please refresh the page')", true);
}
finally
{
Griddata();
}
private void Griddata()
{
objENT.ProcType = "PAGEGRIDDATA";
DataSet ds = BLL.ProcessGrid(objENT);
string check = ds.Tables[0].Rows[0]["TOTAL_CUSTOMER"].ToString();
GridviewProcess.DataSource = ds.Tables[0];
ViewState["Grid"] = ds.Tables[0];
GridviewProcess.DataBind();
}
After,I added this ProgressBar
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="UpdatePanel2">
<ProgressTemplate>
<img src="images/progress_bar.gif" style="max-width: 250px" />
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:GridView ID="GridviewProcess" AllowPaging="true" CssClass="GridHeader" PagerSettings-Mode="NextPreviousFirstLast" PagerSettings-PreviousPageText="<-Prev " PagerSettings-Visible="true" PagerSettings-NextPageText=" Next->"
PagerSettings-FirstPageText="<=FirstPage " PagerSettings-LastPageText=" LastPage=>" PagerStyle-Font-Bold="true"
OnPageIndexChanging="GridviewProcess_PageIndexChanging" PageSize="12" OnRowDataBound="GridviewProcess_RowDataBound" OnRowCommand="GridviewProcess_RowCommand" runat="server" Style="text-align: center" Width="99%"
AutoGenerateColumns="false">
<Columns>
<asp:TemplateField HeaderText="Total Customers" HeaderStyle-BackColor="#99CCCC">
<ItemTemplate>
<asp:Label ID="lbl7" runat="server" Text='<%# Eval("TOTAL_CUSTOMER") %>'>
</asp:Label>
<asp:Button ID="btnCombine" CssClass="btn-primary btn" Text="Combine"
CommandArgument="<%# ((GridViewRow) Container).RowIndex %>" CommandName="More"
Style="padding-top: 1%; padding-bottom: 1%; margin-top: 1px; margin-bottom: 1px" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnAddi" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
The ProgressBar will show but after the function GridData(){} is called it wont refresh the GridView.
I can see the changes only after,I refresh the whole page.
I don't understand whats going wrong...
I don't have any JS or CSS used for this ProgressBar..(Is that the problem?)
Found the Solution to the Problem on SO questions
UpdateProgress Timed Out before data could be processed
Actual problem was :
I have a button on my ASP.NET page, which fetches some data from my database and displays it on a GridView.
This process takes a while, so I thought I'll add an updateprogress AJAX control. Now when I click the button, the UpdateProgress Image shows up and data is being fetched from my database successfully (I checked this from some logs that I have in my DB). But there are 2 issues:
The UpdateProgress image shows only for about 2 minutes. But my ButtonClick event takes about 5 minutes to complete. Basically the UpdateProgressstops showing up even before my task is complete, which defeats its purpose.
As I found this in one of the SO Answers
As per issue most likely it is ajax timing out. Default timeout is 90 seconds. To increase that use ScriptManager's AsyncPostBackTimeout property:
<asp:ScriptManager ID="ScriptManager1" runat="server" AsyncPostBackTimeout="400">
</asp:ScriptManager>
If AJAX call is timing out, controls on the page might not work correctly so increasing timeout might solve problem (2) as well.
I am using fileupload control inside formview edittemplate
<asp:FileUpload ID="fileup_profilfoto" runat="server" />
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ErrorMessage="Sadece şu formatlar (.jpg, .bmp, .png, .gif)" ValidationExpression="^.*\.(jpg|JPG|png|PNG|bmp|BMP|gif|GIF)$" ControlToValidate="fileup_profilfoto" ForeColor="#00C0CC"></asp:RegularExpressionValidator>
It was working.But I added an updatepanel then it didnt work,and then I remowed update panel.But it's still return false (hasfile)
protected void frmviewProfil_ItemUpdating(object sender, FormViewUpdateEventArgs e)
{
try
{
FileUpload fileup_profilfoto = (FileUpload)frmviewProfil.FindControl("fileup_profilfoto");
if (fileup_profilfoto.HasFile)
{
//do something
}
else
{
//do something
}
}
}
always goes else scopes.
hi use triggers to achive that
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="conditional">
<Triggers>
<asp:PostBackTrigger ControlID="Button1" />
</Triggers>
<ContentTemplate>
<asp:Label ID="Label1" runat="server"></asp:Label><br /><br />
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="Button1" runat="server" Text="Upload" OnClick="Button1_Click" />
</ContentTemplate>
</asp:UpdatePanel>
code behind
protected void Button1_Click(object sender, EventArgs e)
{
if (FileUpload1.HasFile)
{
Label1.Text = FileUpload1.FileName;
}
}
Did you do anything to the properties of the fileupload control, for example setting the autopost back value to false? Try setting this to true if it is false.
I came across this question when I had this problem and figured I'd post what my problem and solution were as well.
Make sure the file you are trying to upload is larger than 0 bytes. I was trying to upload some blank text files for testing and each file had the FileName property set correctly, but HasFile was always false. Adding some text to the files gave it some content and the file was able to be uploaded successfully.
I'm a newbie with ASP.NET, so probably my question is easy... but I'm wasting a lot of time with no success.
Part of my page is
<asp:UpdatePanel ID="pnlFileUpload" runat="server">
<ContentTemplate>
<ajaxToolkit:AsyncFileUpload ID="upload" runat="server" OnUploadedComplete="upload_UploadedComplete"
OnUploadedFileError="upload_UploadedFileError" UploaderStyle="Modern" UploadingBackColor="Yellow"
Width="400px" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="pnlFileError" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="lblFileError" runat="server" Text="errFile" Visible="false"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="upload" EventName="UploadedComplete" />
</Triggers>
</asp:UpdatePanel>
When user uploads (started with ajaxToolkit:AsyncFileUpload) ends, upload_UploadedComplete is called.
A sample code is:
protected void upload_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{
int size = upload.PostedFile.ContentLength;
if (size > maxsize)
{
lblFileError.Text = 'File too big...';
lblFileError.ForeColor = System.Drawing.Color.Red;
lblFileError.Visible = true;
pnlFileError.Update();
}
}
But lblFileError is never shown... why?!?
AsyncFileupload doesn't need updatePanel ( none of AJAx toolkit controls need ) . as they have it as a built in . remove fileupload UpdatePanel and test again
:
it seems you can't do that in this way . based on AjaxControlToolkitSampleSite to show user a message about uploading file you should use "ScriptManager.RegisterClientScriptBlock" as below :
protected void upload_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{
int size = upload.PostedFile.ContentLength;
if (size > maxsize)
{
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "error", "top.$get(\"" + lblFileError.ClientID + "\").innerHTML = 'File too big...';", true);
}
}
I'm stumped on this one and hope someone out there's done something similar.
I have an ASP.NET application that has a number of AJAX toolkit tabs. The number of tabs varies page to page, since they're dynamically generated based on settings in a config file.
That being said, some of the tabs are database-driven. The load time when a number of these tabs are on the page can be significant, so I want to implement lazy loading.
I'm following Matt Berseth's pattern, but it seems to break down when the number of tabs is dynamic (each tab needs its own method on the page).
If anyone has a suggestion on how to tackle this, it'd be much appreciated.
I've started working with a small app to get the lazy loading to work. This lazy loads the second tab (which is hard coded), but the third tab is what I'm struggling with (it's dynamically added).
Edited to add code: ASPX page
<script language="javascript" type="text/javascript">
function clientActiveTabChanged(sender, args) {
// see if the table elements for the grids exist yet
var isTab2Loaded = $get('<%= this.lbl2.ClientID %>');
// if the tab does not exist and it is the active tab,
// trigger the async-postback
if (!isTab2Loaded && sender.get_activeTabIndex() == 1) {
// load tab1
__doPostBack('btnTrigger', '');
}
// else if (!isTab2Loaded && sender.get_activeTabIndex() == 2)
// load tab2
// __doPostBack('btnEmployeesTrigger', '');
}
</script>
<asp:scriptmanager ID="Scriptmanager1" runat="server"></asp:scriptmanager>
<div>
<cc1:TabContainer ID="tc1" runat="server" OnClientActiveTabChanged="clientActiveTabChanged">
<cc1:TabPanel TabIndex="0" runat="server" HeaderText="Tab1" ID="Tab1">
<ContentTemplate>
<asp:UpdatePanel ID="up1" runat="server">
<ContentTemplate>
<asp:Label ID="lbl1" text="I am here" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel runat="server" HeaderText="Tab2" ID="Tab2">
<ContentTemplate>
<asp:UpdatePanel ID="up2" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:Label ID="lbl2" Text="Load when called" Visible="false" runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnTrigger" />
</Triggers>
</asp:UpdatePanel>
</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer>
</div>
<input ID="btnTrigger" style="display:none;" runat="server" type="button" onserverclick="btnTrigger_Click" />
<input id="btnTrigger2" style="display:none;" runat="server" type="button" onserverclick="btnTrigger2_Click" />
Codebehind:
protected void Page_Init(object sender, EventArgs e)
{
//TabPanel tp = new TabPanel();
//tp.Controls.Add(new LiteralControl("Load first"));
//tp.HeaderText = "Tab1";
//tc1.Tabs.Add(tp);
//tc1.ActiveTabIndex = 0;
//TabPanel tp2 = new TabPanel();
//UpdatePanel up1 = new UpdatePanel();
//up1.Controls.Add(new LiteralControl("Load me when called"));
////up1.Triggers.Add(new AsyncPostBackTrigger());
//AsyncPostBackTrigger trg = new AsyncPostBackTrigger();
//tp2.Controls.Add(up1);
//tp2.Controls.Add(new LiteralControl("Load when called"));
//tp2.HeaderText = "Tab2";
//tc1.Tabs.Add(tp2);
TabPanel tp3 = new TabPanel();
tp3.HeaderText = "Tab3";
UpdatePanel up3 = new UpdatePanel();
LiteralControl lc = new LiteralControl("Load me when needed");
lc.ID = "lit3";
lc.Visible = false;
up3.ContentTemplateContainer.Controls.Add(lc);
tp3.Controls.Add(up3);
tc1.Controls.Add(tp3);
}
protected void btnTrigger_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(2500);
this.lbl2.Visible = true;
}
Is the content of the Tabs also database-driven like a CMS?
You could use UserControls as Content and let all implement the same interface f.e. IDataBindable with a function BindData. On this way you can lazyload these UserControl independently of its content.
On ActiveTabChanged you only have to call this function and thenUpdate on the TabContainer's UpdatePanel.
The quick way to do this might be to not load any tabs (i.e. don't actually give them any content) besides the default until that tab is clicked (detected during OnActiveTabChanged or OnClientActiveTabChanged).
However, Tim's method allows the OnActiveTabChanged method to be as simple as databinding the UserControl relative to that tab - that's probably the best method, though it is more effort.