I have an issue on button OnClick event.
There is a refresh button in a user control ("header") which will refresh a place holder ("phContent") that generates some other user controls at run time. However, the button OnClick event doesn't fire until the whole place holder content loads.
Page.aspx
<ext:ContentHeader ID="header" runat="server" Visible="false" />
<asp:UpdatePanel ID="upControl" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
<ContentTemplate>
<asp:PlaceHolder ID="phContent" runat="server"></asp:PlaceHolder>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="header" EventName="OnFormSubmit" />
</Triggers>
</asp:UpdatePanel>
UserControl.ascx
<div>
<asp:Button ID="btnRefresh" runat="server" Text="Refresh" OnClick="btnRefresh_OnClick" />
</div>
UserControl.cs
protected void btnRefresh_OnClick(object sender, EventArgs e)
{
//some code
OnFormSubmit(this, e);
}
public delegate void UserControlFormSubmit(object sender, EventArgs e);
public event UserControlFormSubmit OnFormSubmit;
Not sure what exactly the page and source code is.
But from front-end, take for jQuery as example.
You can try something like:
jQuery(function(){
jQuery('#btnRefresh').on('click',function(){
//load the content by ajax
jQuery('#phContent').load('#chart');
});
});
You have to place the button in updatepanel as well.
<ext:ContentHeader ID="header" runat="server" Visible="false" />
<asp:UpdatePanel ID="upControl" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
<ContentTemplate>
<asp:Button ID="btnRefresh" runat="server" Text="Refresh" OnClick="btnRefresh_OnClick" />
</ContentTemplate>
</asp:UpdatePanel>
Related
I have an UpdatePanel with a Label control, Label1, and a button outside it, Button1, and another Label control outside the UpdatePanel, Label2. When the button is clicked, I want the Label text to be updated in Label1:
ASPX page
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" AsyncPostBackTimeout="0" />
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
<asp:ContentTemplate>
<asp:Label ID="Label1" runat="server"></asp:Label>
</asp:ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" />
<asp:Label ID="Label2" runat="server"></asp:Label>
</form>
Code-Behind
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
Label2.Text = "some text";
Label1.Text = "some text";
}
This should be straight-forward - I should be able to update the Label1 text with a button click event. The Label2 line succeeds (it obviously won't appear without a page postback, though), where the Label1 line fails with "Object reference is not an instance of an object". Why is Label1 null, when it is right there on the page, just that it is inside an UpdatePanel? How am I supposed to instantiate controls that should already be on the page and accessible, just like Label2 is?
Your async trigger must be inside the update panel. It may not be finding it because it is not inside of the update panel. Furthermore, because you are doing an async postback, only what is inisde of the update panel will get refreshed; thus you are in essence "reseting" Label 1.
This is why your code behind cannot find Label 1. Do this:
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Label ID="Label1" runat="server"></asp:Label>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" />
<asp:Label ID="Label3" runat="server"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Label ID="Label2" runat="server"></asp:Label>
</form>
This will help you to see. The labels 1 and 3 will always get updated now, but since label 2 is outside of the update panel, it will not because the Page doesn't see this on postback.
Code Behind:
protected void Button1_Click(object sender, EventArgs e)
{
Label3.Text = "label 3";
Label2.Text = "label 2";
Label1.Text = "label 1";
}
The result:
Code has <asp:ContentTemplate> and </asp:ContentTemplate> instead of <ContentTemplate> and </ContentTemplate> tags in the UpdatePanel. I corrected this and it works now. The controls became out of scope since the code couldn't find the real ContentTemplate or anything in it.
I am trying to update the datasource of a webdatagrid in an updatepanel. I am able to do this via a timer tick event
<asp:timer id="Timer1" runat="server" interval="10000" ontick="Timer1_Tick"></asp:timer>
<asp:updatepanel id="UpdatePanel1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick"/>
</Triggers>
<ContentTemplate>
<ig:WebDataGrid ID="WebDataGrid" runat="server" AutoGenerateColumns="false" >
</ig:WebDataGrid>
</ContentTemplate>
</asp:updatepanel>
And with the Tick event handler
protected void Timer1_Tick(object sender, EventArgs e)
{
WebDataGrid.DataSource = *a datatable*;
WebDataGrid.DataBind();
}
However, now when I try to do the same thing except instead of using the timer, use the WebDataGridMain_RowSelectionChanged event instead the webdatagrid does not update. I believe the new datasource value is still being sent to the client however the UpdatePanel does not seem to be updating the view.
<ig:WebDataGrid ID="WebDataGridMain" runat="server" AutoGenerateColumns="False" OnRowSelectionChanged="WebDataGridMain_RowSelectionChanged">
<ClientEvents AJAXResponse="AJAXResponseHandler" />
</ig:WebDataGrid>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="WebDataGridMain" EventName="RowSelectionChanged"/>
</Triggers>
<ContentTemplate>
<ig:WebDataGrid ID="WebDataGridDetail" runat="server" AutoGenerateColumns="false">
</ig:WebDataGrid>
</ContentTemplate>
</asp:UpdatePanel>
With the the similar event handler code below
protected void WebDataGridMain_RowSelectionChanged(object sender, Infragistics.Web.UI.GridControls.SelectedRowEventArgs e)
{
WebDataGridDetail.DataSource = *a datatable*;
WebDataGridDetail.DataBind();
}
There doesn't seem to be any difference between these two except for the type of event trigger. What should I change so that the UpdatePanel works with the RowSelectionChanged event?
EDITED...
I got an ASP.NET Button inside an UpdatePanel, inside a UserControl.
I want to make the IMAGE visible by CLICKing on the UserControl’s Button (btnSubmit).
Using the following js function I’m able to do it in normal postback mode, but it’s not working in Async mode.
The question is, how can I do this in an Async mode or what’s the best way to do this?
User Control (Categories):
<asp:UpdatePanel ID="upItems" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClientClick="btnSubmitPostBack();"/>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSubmit" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
ASP.NET Page
<script>
function btnSubmitPostBack() {
__doPostBack('<%= btnDoSomething.ClientID %>', '');
}
</script>
<asp:UpdatePanel ID="up" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<uc1:Categories ID="Categories1" runat="server" CatRootName="Products" />
<asp:Button ID="btnDoSomething" CssClass="hidden" runat="server" Text=" Do Something" OnClick=" btnDoSomething_Click" />
<asp:Image ID="Image1" runat="server" Visible="false" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnDoSomething" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
protected void btnDoSomething_Click(object sender, EventArgs e)
{
Image1.Visible = true;
up.Update();
}
Thanks for your attention and help in advance!
OK here we go :( Just compiled and ran this successfully) and I think that's the right way to do it: ( the key here is to find the other user control and drill inside it for your control to update:
You user control code :
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="Categories.ascx.cs" Inherits="WebApplication1.Categories" %>
<asp:UpdatePanel ID="upItems" runat=*emphasized text*"server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click"/>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSubmit" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
User control code behind:
protected void btnSubmit_Click(object sender, EventArgs e)
{
UpdatePanel ImageUpdatePanel = (UpdatePanel)this.Parent.FindControl("up");
Image _img = (Image)ImageUpdatePanel.FindControl("Image1");
_img.Visible = true;
//Updating UpdatePanel
ImageUpdatePanel.Update();
}
and then your page code
<asp:UpdatePanel ID="up" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<uc1:Categories ID="Categories1" runat="server" CatRootName="Products" />
<asp:Button ID="btnDoSomething" CssClass="hidden" runat="server" Text=" Do Something"/>
<asp:Image ID="Image1" runat="server" Visible="false" ImageUrl="~/Images/heroAccent.png" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnDoSomething" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
this is 100% working solution, if u need I can send u the code too :)
Here is the scenario,
I have one update panel in which I have radio button.
On check of radio button I want to enable Panel which is outside the update panel.
I have tried following 2 things:
Placing the panel in another update panel didn't work.
Using JavaScript on click of radio button didn't work.
placing the panel in another updatepanel and set update mode as conditional.
You need to do one more thing
On check of radio button event you need to call update method of newly added update panel
UpdatePanel1.Update();
I hope this code sample helps you.
<asp:UpdatePanel ID="udp1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:RadioButton ID="rb1" runat="server" AutoPostBack="true" OnCheckedChanged="Control_CheckedChanged"
Text="Text" GroupName="Group1" />
<asp:RadioButton ID="rb2" runat="server" AutoPostBack="true" OnCheckedChanged="Control_CheckedChanged"
Text="Text2" GroupName="Group1" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="udp2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnl1" runat="server" Visible="false">
<asp:Label ID="lblText" runat="server" Text="Text"/>
</asp:Panel>
</ContentTemplate>
<asp:AsyncPostBackTrigger ControlID="rb1" />
<asp:AsyncPostBackTrigger ControlID="rb2" />
</asp:UpdatePanel>
protected void Control_CheckedChanged(object source, EventArgs e)
{
pnl1.Visible=rb1.Checked;
}
I use the below code to auto refresh the page every 60 seconds via the AJAX tools in VS2010. Works perfectly.
<asp:MultiView ID="MultiView1" runat="server">
<asp:View ID="View1" runat="server">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ViewStateMode="Enabled" UpdateMode="Conditional">
<ContentTemplate>
ASP.NET/HTML Code
<p>
<asp:Button ID="Button2" runat="server" Text="Click here" OnClick="Button2_Click" /> to disable the pages automatic refresh.</p>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
</asp:UpdatePanel>
<asp:Timer ID="Timer1" runat="server" Interval="60000">
</asp:Timer>
</asp:View>
<asp:View ID="View2" runat="server">
etc.
</asp:MultiView>
I want to include a button on the asp.net page to cancel the auto refresh.
I tried to include the below but when I clicked the button, it didn't work. The below is the Code Behind for an OnClick event for a Button. The asp.net code is in the above code.
protected void Button2_Click(object sender, EventArgs e)
{
Timer1.Interval = 0;
}
Where am I going wrong? Is this even a way to do this or do I need to go another route in order to allow the user to cancel the auto page refresh?
Thanks to PeterJ I have found the solution. I modified the code and since I clicked it the page has not refreshed. The issue was with my code behind for the button OnClick event. I had:
Timer1.Interval = 0;
When I should have had:
Timer1.Enabled = false;