I have a simple webform with an ajax call, which executes flawlessly, however when I put the same code into an existing project, the ajax call refreshes the page. The project was .net 2.0 converted to .net 4.0. Here is the simple code:
<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>
<asp:Timer ID="Timer1" runat="server" Interval="5000" ontick="Timer1_Tick"></asp:Timer>
<asp:TextBox ID="TextBox1" runat="server"
Height="118px" TextMode="MultiLine" Width="468px"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Save"
onclick="Button1_Click" /><br /><br />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="TextBox2" runat="server" Height="120px"
TextMode="MultiLine" Width="466px"></asp:TextBox>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick"/>
</Triggers>
</asp:UpdatePanel>
<div>
</div>
</form>
</body>
</html>
cs code:
protected void Button1_Click(object sender, EventArgs e)
{
Save();
}
private void Save()
{
//Add the save function here ex store the text to DB
//Here we only move between the two textboxes to show that it works
TextBox2.Text = TextBox1.Text;
}
protected void Timer1_Tick(object sender, EventArgs e)
{
Save();
}
Update. I found the issue, this line:
xhtmlConformance mode="Legacy"
was added to webconfig during conversion from .net 2.0.
Commenting this line fixes the ajax refresh.
Related
I realize I may be pointed to different articles but my head is spinning on the right way to do this. I tried some code to simply display the current time, then display the finish load time and then display the async label 5 seconds later. I currently have a website that does a COUNT SQL script on the homepage that displays the total rows in a label and its pausing the home page until it's complete. Obviously for performance reasons I need to get rid of this. I tried simply putting some script inside an update panel and nope.
<asp:Label ID="Label1" runat="server" Text="Label">
First Load is <% =GetTime()%>.
</asp:Label>
<script runat="server">
protected String GetTime()
{
return DateTime.Now.ToString();
}
</script>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<script runat="server">
protected String GetAsyncTime()
{
System.Threading.Thread.Sleep(5000);
return DateTime.Now.ToString();
}
</script>
<asp:Label ID="lblPanel" runat="server" Text="Label"></asp:Label>
Async time is <% =GetAsyncTime()%>.
</ContentTemplate>
</asp:UpdatePanel>
<br />
</form>
<asp:Label ID="Label2" runat="server" Text="Label">
Last Load is <% =GetTime()%>.
</asp:Label>
I have an issue that I can't display my update progress GIF image when I click button in Modal Pop Extender
the Aspx Code is :
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<img src="ajax-loader.gif" />
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button2" runat="server" Text="Button" />
<asp:Panel ID="Panel1" runat="server">
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</asp:Panel>
<asp:ModalPopupExtender PopupControlID="Panel1" TargetControlID="Button2" ID="mpeConfirm"
runat="server">
</asp:ModalPopupExtender>
</ContentTemplate>
</asp:UpdatePanel>
and in the code behind I wrote that simple code to be able to display the Progress :( :
protected void Button1_Click(object sender, EventArgs e)
{
Thread.Sleep(2000);
}
After 1 day of googling. I made it :) .The solution was easy and really marvelous .
First, I made a simple modification in the designer. I just moved the update panel inside Modalpop Extender panel control like the following:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<img src="ajax-loader.gif" />
</ProgressTemplate>
</asp:UpdateProgress>
<asp:Button ID="Button2" runat="server" Text="Button" />
<asp:Panel ID="Panel1" runat="server">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="panel" OnClick="Button1_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<asp:ModalPopupExtender ID="modalExtender" runat="server" PopupControlID="Panel1"
TargetControlID="Button2">
</asp:ModalPopupExtender>
On the other hand, I added that code block on the Modal Pop Extender Button:
protected void Button1_Click(object sender, EventArgs e)
{
string script ="document.getElementById(";
script += "'";
script+=Panel1.ClientID;
script += "'";
script+=").style.display='none';";
ScriptManager.RegisterStartupScript(this, this.GetType(), "A",script , true);
System.Threading.Thread.Sleep(2000);
}
Many thanks to "Hitesh Sharma" and his reply to a similar issue through that useful link :
http://forums.asp.net/t/1552551.aspx
I made a dialog box showing wrong password or username error but this doesn't close.
how to close this dialog box without refreshing the page,Code is like
<asp:Panel ID="errorMsg" runat="server" Visible="false">
<asp:Label ID="msg" Text="" runat="server"></asp:Label>
<asp:Label ID="errorHead" Text="Something is really Wrong :" runat="server"></asp:Label>
<asp:button ID="try" OnClick="try_Click" runat="server" Text="Try Again" />
</asp:Panel>
Code Behind :
protected void try_Click(object sender, EventArgs e)
{
errorMsg.Visible = false;
}
errorMsg.visible is set to true when wrong input is made but after making it again false it doesn't close.
The OnClick event will fire a PostBack refreshing the page.
You could try using javascript:
<script text="text/javascript">
function hide(id){
if(id)
document.getElementById(id).style.display = "none";
}
</script>
<asp:Button ID="try" OnClientClick='hide("<%=errorMsg.ClientId%>")'
runat="server" Text="Try Again" />
Or you could simply wrap the dialogbox with an Update Panel. The Update Panel allows you only to refresh a part of your website.
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel ID="errorMsg" runat="server" Visible="false">
...
<asp:Button ID="try" OnClick="try_Click"
runat="server" Text="Try Again" />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
All I wish to do is simply click a button and the text in a textbox is automatically added as an item in the listbox. Shouldn't this be straight forward? Whilst debugging, the item is added and I can see the text by watching ListBox1.Items[0], but nothing is displayed in the web page. I had the same problem which i did not solve, in a console application! Can some one please guide me to what I am doing wrong?
protected void Button1_Click(object sender, EventArgs e)
{
ListBox1.Items.Add(new ListItem(TextBox1.Text));
}
Many thanks
Edit:
In a past project, I used the DataSource property, which worked perfectly. I have never yet managed to use the add Items! May be there is some sort of refresh or update?
Page code:
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:ListBox ID="ListBox1" runat="server" Height="150px" Width="295px"></asp:ListBox>
<asp:UpdatePanel ID="updatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click" />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
Looks like your listbox is outside of the update panel. Pop it inside the update panel:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DropDownList ID="DropDownList1" runat="server">
</asp:DropDownList>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="AddItem" />
</ContentTemplate>
</asp:UpdatePanel>
You have to move the ListBox into the UpdatePanel, otherwise it will not be updated.
The reason for that is, that ASP.NET is sending the whole HTML of the UpdatePanel back to the client. Since the ListBox is not part of the UpdatePanel, it won't be updated.
I am having a strange issue associated with AsyncFileUpload control. after the upload, I am updating the page by calling__doPostBack function from ClientUploadComplete event handler. it works fine first time, but next time I try to upload the file, it refreshes the page first before uploading, then does the upload and refreshes the page again. not sure why refresh page is being called twice once before the upload and once after the upload. I have a simplified version of this code which has this bug. any clues please why it is happening?
Markup:
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<div>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:AsyncFileUpload ID="AsyncFileUpload1" runat="server" OnClientUploadComplete="AsyncFileUpload1_ClientUploadComplete"
OnUploadedComplete="AsyncFileUpload1_UploadedComplete" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Refresh Data" OnClick="Button1_Click" />
<asp:Label ID="Label1" runat="server" EnableViewState="false"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</form>
Javascript:
<script type="text/javascript">
function AsyncFileUpload1_ClientUploadComplete() {
var btnRefreshData = $get("<%=Button1.ClientID%>").name;
__doPostBack(btnRefreshData, "");
}
</script>
Code-Behind:
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "Upload complete";
}
protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{
System.Threading.Thread.Sleep(3000);
}
looks like no one can answer this question. I still haven't figured out why this happens, but I put a workaround by adding a flag in session when the upload is complete and check that flag before refreshing the data on the page. this way the data refresh won't happen before the upload. thanks.