In my form there there is a "Submit Button" and another Timer... Submit button submits a request that may take few minutes to serve..Mean while the timer would poll at short intervals (say 5 secs ) and keep the user updated.. But the issue is that timer stops polling as soon as the Submit button is clicked.. I am attaching the working sample code of the application..Does anyone know why this is happening..Thanks in advance.
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Submit_Click" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
</asp:UpdatePanel>
<asp:Timer ID="Timer1" Interval="700" runat="server" OnTick="UpdateTimer_Tick">
</asp:Timer>
</form>
</body>
Code Behind
protected void UpdateTimer_Tick(object sender, EventArgs e)
{
Debug.Write("Timer");
Label1.Text = DateTime.Now.ToString();
}
protected void Submit_Click(object sender, EventArgs e)
{
Debug.Write("Submit Start ");
for (int i = 0; i < 1000; i++)
{
Thread.Sleep(100);
}
Debug.Write("Submit End ");
}
I think the timer is stopped on postback (button-click) and will only start again when that postback returns. One solution to this is to use PageMethods instead of the timer, but you can only make static functions a PageMethod. For the example it would work like this:
[WebMethod()] public static string GetTime(){
Return DateTime.Now.ToString();
}
html and javascript (jquery):
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>
<div>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Submit_Click" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<script type="text/javascript">
function OnSuccess(result, ctrl) { $('#<%=Label1.ClientID %>').html(result); }
function OnError() { alert("error!"); }
$(document).ready(function() {
setInterval(function() { PageMethods.GetTime(OnSuccess, OnError); }, 700)
});
</script>
</form>
</body>
Don't forget to set EnablePageMethods="true" when using webmethods!
While testing this I noticed the response was slower than the SetTimeout triggering a new ajax call, so the page rapidly builds up running connections, this might be because my development server is a bit slow. To fix this you should not update so frequently, once every 5 seconds will have to do.
I guess the asp.net timer already prevents this behavior: it stops when another ajax call is done. This behavior causes the problem you're experiencing, the button postback blocks the timer updates.
Related
My code works fine when used in a normal webform. but when I use it in a webform using masterpages, It doesn't work.
page header : ~/Manager/BaseManager.master
and some nested master pages : Base.master > Pages.master > BaseManager.master
ASP
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger EventName="Click"
ControlID="btnUpdateEditPage" />
</Triggers>
<ContentTemplate>
<asp:Label ID="lblTest" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="btnUpdateEditPage" CssClass="btnUpdateEditPage" runat="server"
Text="Button" OnClick="btnUpdateEditPage_Click" />
C#
protected void btnUpdateEditPage_Click(object sender, EventArgs e)
{
lblTest.Text += "**";
}
Do the following please:
1- Add UpdatePanel1.Update(); like the following:
protected void btnUpdateEditPage_Click(object sender, EventArgs e)
{
lblTest.Text += "**";
UpdatePanel1.Update();
//Your UpdatePanel should be UpdateMode="Conditional" as what you have now..
}
2- Put the button inside the update Panel
3- Remove the Trigger to not fire a post back, so your code has to be like:
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="lblTest" runat="server" Text="Label"></asp:Label>
<asp:Button ID="btnUpdateEditPage" CssClass="btnUpdateEditPage" runat="server"
Text="Button" OnClick="btnUpdateEditPage_Click" />
</ContentTemplate>
</asp:UpdatePanel>
Place the button inside UpdatePanel.
SOLVED.
I change
<form id="form1" runat="server" action="post">
to
<form id="form1" runat="server">
and my problem solved.
But why?!
I need partial render with ajax; I don't know what is wrong. ¿What is the problem?
My code:
ascx
<div id="temasatratar" onclick="__doPostBack('UpdatePanel1', '');"><h1>Temas a tratar</h1></div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" OnLoad="UpdatePanel1_Load">
<ContentTemplate>
<asp:Label runat="server" ID="Label1" />
</ContentTemplate>
</asp:UpdatePanel>
ascx.cs
protected void UpdatePanel1_Load(object sender, EventArgs e)
{
Random rnd = new Random();
int number = rnd.Next(0, 99999);
Label1.Text = "Best "+number;
}
Any suggest?
My application: Sharepoint - Visual web part / C# / Asp.Net / Visual Studio
I would use a fake-button that is invisible as trigger for the UpdatePanel:
<div id="temasatratar" onclick="__doPostBack('fakeButton', '');"><h1>Temas a tratar</h1></div>
<asp:LinkButton ID="fakeButton" style="display:none" runat="server" Text="foo" OnClick="fakeButton_Click" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" OnLoad="UpdatePanel1_Load">
<ContentTemplate>
<asp:Label runat="server" ID="Label1" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="fakeButton" />
</Triggers>
</asp:UpdatePanel>
Now this click-event is handled in an async postback when the user clicks on the div.
protected void fakeButton_Click(Object sender, EventArgs e)
{
// you are in an asynchronous postback now
}
I tried to make the visibility of a div through javascript.
<asp:LinkButton class="ProfilePageDetailLinks" ID="lbtnPersonal" runat="server" OnClientClick="VisibleTab('PersonalDetails')">Show Details</asp:LinkButton>
<div id="PersonalDetails">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
</ContentTemplate>
</asp:UpdatePanel>
</div>
function VisibleTab(str) {
if (document.getElementById(str).style.display == 'none') {
document.getElementById(str).style.display = 'block';
} else {
document.getElementById(str).style.display = 'none';
}
But after the postback, the div is hiding automatically.
Please check the code below... Its not working as expected.. How to make it works.. Thats my actual doubt...
<form id="form1" runat="server">
<div>
<div runat="server" id='G2'>
content</div>
<asp:Button ID="Button1" OnClientClick="javascript:document.getElementById('G2').style.visibility = 'visible';"
runat="server" Text="show" />
<asp:Button ID="Button2" OnClientClick="javascript:document.getElementById('G2').style.visibility = 'hidden';"
runat="server" Text="hide" />
</div>
</form>
You can add return false; to avoid your postback
OnClientClick="VisibleTab('PersonalDetails'); return false;"
How to prevent the content of the UpdatePanel from the PostBack which is occurred in the whole page ?
I have the following code:
<head runat="server">
<title></title>
<script type="text/C#" runat="server">
// I don't want it to call this event handler
// untill I update the UpdatePanel manually by UpdatePanel1.Update();
protected void TextBox2_Load(object sender, EventArgs e)
{
((TextBox)sender).Text = DateTime.Now.ToString();
}
protected void Unnamed1_Click(object sender, EventArgs e)
{
TextBox1.Text = DateTime.Now.ToString();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:TextBox ID="TextBox2" runat="server" OnLoad="TextBox2_Load">
</asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Unnamed1_Click" />
<asp:TextBox ID="TextBox1" runat="server" />
</div>
</form>
</body>
</html>
The previous code will write in the TextBox2 in spite of it exists inside an UpdatePanel with Conditional for UpdateMode.
I want it to update only when I call UpdatePanel1.Update();
Any help!
If you put Button1 and TextBox1 in the same UpdatePanel as TextBox2, this should give you your desired functionality.
If you want to keep them in separate UpdatePanels, you can, but you'll need to specify a trigger on UpdatePanel1 for the Unnamed1_Click event (or call UpdatePanel1.Update() in code).
Try using IsInAsyncPostBack:
protected void TextBox2_Load(object sender, EventArgs e)
{
if (ScriptManager1.IsInAsyncPostBack == true)
((TextBox)sender).Text = DateTime.Now.ToString();
Here is what I'm trying to do: Click a button on my page, which in turn makes (2) things happen:
Display a ModalPopup to prevent the user from pressing any buttons or changing values
Call my code behind method, hiding the ModalPopup when finished
Here is the ASP markup:
<asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="true"
UpdateMode="Always">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSaveData" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Panel ID="pnlHidden" runat="server" style="display: none;">
<div>
<h1>Saving...</h1>
</div>
</asp:Panel>
<cc1:ModalPopupExtender ID="modalPopup"
BackgroundCssClass="modalBackground" runat="server"
TargetControlID="btnSaveData" PopupControlID="pnlHidden"
BehaviorID="ShowModal">
</cc1:ModalPopupExtender>
<asp:Button ID="btnSaveData" runat="server" Text="Save Data"
OnClick="btnSaveData_Click" />
</ContentTemplate>
</asp:UpdatePanel>
Now, here is my code behind C# code:
protected void btnSaveData_Click(object sender, EventArgs e)
{
UpdateUserData(GetLoggedInUser());
modalPopup.Enabled = false;
}
Why doesn't this work? The ModalPopup displays perfectly, but the btnSaveData_Click event NEVER fires.
UPDATE: The first suggestion did not work for me. I also tried your second suggestion (insofar as it applied to me). One minor difference on my end is that there is no button on my modal panel (pnlHidden) -- it's just a message. I did try using Javascript events on the client side, which at least did fire concurrently with my server-side event. This was good news, but I can't seem to find or grab a handle on the ModalPopupExtender or its BehaviorID. This doesn't work:
function showOverlay() {
var popup = $find('modalPopup');
popup.show();
}
popup is ALWAYS equal to null.
FINAL UPDATE: This is my final solution for getting this to work (Take specific note of the use of OnClientClick AND OnClick):
<asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="true"
UpdateMode="Always">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSaveData" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Panel ID="pnlHidden" runat="server" style="display: none;">
<div>
<h1>Saving...</h1>
</div>
</asp:Panel>
<cc1:ModalPopupExtender ID="modalPopup"
BackgroundCssClass="modalBackground" runat="server"
TargetControlID="hdnField" PopupControlID="pnlHidden"
BehaviorID="ShowModal">
<asp:HiddenField ID="hdnField" runat="server" />
</cc1:ModalPopupExtender>
<asp:Button ID="btnSaveData" runat="server" Text="Save Data"
OnClientClick="showModal();" OnClick="btnSaveData_Click" />
</ContentTemplate>
</asp:UpdatePanel>
Using this Javascript function:
function showModal() { $find('ShowModal').show(); }
... And this code behind:
protected void btnSaveData_Click(object sender, EventArgs e)
{
UpdateUserData(GetLoggedInUser());
modalPopup.hide();
}
Try this.
Create a dummy hidden field:
<asp:HiddenField ID="hdnField" runat="server" />
Set the TargetcontrolID = "hdnField" in your Modal Popup declaration.
In your btnSaveData_Click event, do this:
modalPopup.Show();
Try this. It is 100% working
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Btnshow" runat="server" Text="Show" OnClick="Btnshow_Click" />
<asp:Button ID="BtnTarget" runat="server" Text="Target" Style="display: none" />
<asp:TextBox ID="TextBox1" runat="server">
</asp:TextBox>
<input type="button" value="Get" onclick="abc()" />
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="BtnTarget"
PopupControlID="Panel1">
</asp:ModalPopupExtender>
<asp:Panel ID="Panel1" runat="server" BackColor="Black" Width="300px" Height="300px">
<asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="BtnHide" runat="server" Text="Hide Button" OnClick="BtnHide_Click" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="BtnHide" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Btnshow" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
Server side code
protected void Btnshow_Click(object sender, EventArgs e)
{
ModalPopupExtender1.Show();
}
protected void BtnHide_Click(object sender, EventArgs e)
{
ModalPopupExtender1.Hide();
}
First attempt: Try to set your ButtonID into OkControlID Tag and try again
OR
Second attempt: Call your event over javascript there seems to be some problems with click events
<div>
<cc1:ModalPopupExtender PopupControlID="Panel1"
ID="ModalPopupExtender1"
runat="server" TargetControlID="LinkButton1" OkControlID="Ok"
OnOkScript="__doPostBack('Ok','')">
</cc1:ModalPopupExtender>
<asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
</div>
<asp:Panel ID="Panel1" runat="server">
<asp:Button ID="Ok" runat="server" Text="Ok" onclick="Ok_Click" />
</asp:Panel>
From this example you can easily control panel show up depends on conditions instead of just immediately show up panel once you click button.
<asp:Button ID="btnAdd" runat="server" OnClick="btnAdd_Click"/>
<asp:HiddenField ID="hdnField" runat="server" />
<ajaxToolkit:ModalPopupExtender runat="server"
TargetControlID="hdnField"
ID="btnAdd_ModalPopupExtender"
PopupControlID="pnlPrintName">
</ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="pnlPrintName" runat="server">
.
.
</asp:Panel>
//Server side code:
protected void btnAdd_Click(object sender, EventArgs e)
{
if( dt.Rows.Count == 0 )
{
btnAdd_ModalPopupExtender.Show();
}
else
{
add();
}
}
In code behind, you can do this:
if (true)
{
var script = #"Sys.Application.add_load(function() { $find('behavoirIDModal').show(); });";
ScriptManager.RegisterStartupScript(this, GetType(), "Show", script, true);
}
Change this 'behavoirIDModal'