ImageButton PostBack Issue - c#

I have created a custom UserControl in Asp.Net. This user control contains an asp:ImageButton wrapped in an UpdatePanel with a ScriptManagerProxy in the UserControl and a parent ScriptManger on the main page that contains the asp:Panel these custom UserControls are added to (renders as a list like object with items). I want to suppress the click from the ImageButton (contained in the UpdatePanel) to NOT fire PostBacks that is causing the page to be refreshed. Here is a snippet of the UpdatePanel wrapped ImageControl within the custom UserControl:
<asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server"/>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="CatImage" EventName="Click" />
</Triggers>
<ContentTemplate>
<fieldset>
<asp:ImageButton ID="CatImage" runat="server" Height="128px" Width="128px" ImageUrl="../Handlers/ImageResizer.ashx?imgpath=../PhotographicImages/noImageFound.png&w=180&h=180" OnClick="CatImage_Click"/>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
On the top of the main page that dynamically loads these UserControls to its asp:Panel is:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
This works ONLY for every click AFTER the first click... Meaning the first click causes a PostBack on the main page, but any subsequent click is suppressed.
When this ImageButton is clicked, i fire an event in the CodeBehind to display a "LightBox" object with a larger version of the image.
What is wrong with this code? How can i suppress this first click from causing a PostBack to my parent page?

Related

UpdatePanel with AsyncPostback tryes to update control outside UpdatePanel

I need to have UpdatePanel with asyncpostback, but in my case it seems that no partial postback happens, but fullpostback. I am new to web forms, please, check the code:
<%# Register TagPrefix="Cust" TagName="CompanyInformationView" Src="~/CustomControls/CompanyInformationView.ascx" %>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
<asp:UpdatePanel runat="server" ID="UpdatePanel1" ChildrenAsTriggers="true" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" OnClick= "Button1_Click" Text="test" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<Cust:CompanyInformationView ID="CompanyInformationView" runat="server" />
</asp:Content>
So I have Test Button. OnClick it should do "nothing" for test. Also there is custom control on web form. Here is server side code for this form:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
// fill in custom control
CompanyInfo c = GetInfo();
CompanyInformationView.Company = c;
}
}
protected void Button1_Click(object sender, EventArgs e)
{
var i = 1;
}
CompanyInformationView is custom control with property "Company". There is no ViewState added for this property (so it cannot be loaded properly if postback is done). When I click on Test Button, the page fails, because "CompanyInformationView.Company" is not set (it is not set, because it cannot be loaded from ViewState, I guess).
Instead, I think that it should not work like this. AsynPostback should deal only with UpdatePanel.
Why it wants to reload custom control? Doesn't it mean that Full postback happen or maybe I do not understand Asyncpostback?
PageLoad and all other events are raised on every get\postback, no matter if it's async or full,
In asyncpostback, the response which the server renders includes only the content inside the updatepanel.
Try to Put <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
Before
<asp:UpdatePanel runat="server" ID="UpdatePanel1" ChildrenAsTriggers="true" UpdateMode="Conditional">
Async post back in web forms still proceeds the whole page life cycle as if it's a traditional post. the difference is only the updated content inside target update panel that will be sent in response. so in this case, async post back will still give you exception unless you populate the custom control no matter get/post.
you need to also put the custom control inside another update panel or in the same update panel as the button in order see partial update to happen.

How to find child page control while using postback trigger

I am having one master page that has one update panel.
Content place holder is within the update panel
Now i have child page which has a File upload control
To make work File upload control, i have to put Postback trigger.
But question is where i can put that Postback trigger ??
If i put Postback trigger in Master page than it will give me error that control does not found
and i can't put Postback trigger because child page has not other update panel
What is the solution for this problem ?
Simply wrap the FileUpload with an UpdatePanel, which don't do anything and hasn't any side effect but will solve the problem.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="btnSubmit" runat="server" Text="Button" />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnSubmit" />
</Triggers>
</asp:UpdatePanel>

How to prevent content page from being updated when the master page is updated?

I've an UpdatePanel in the master page and another one in the content page. When I use Timer to refresh the master page, the content page, which has its own Timer, is updated, too.
Question 1: How can I prevent the refresh in the master page from updating the content page?
Question 2: The Timer interval in the content page, is set at 60000. When the page is loaded, I've to wait 60000 to see the GridView data displayed. How to make it display data as soon aas the page is loaded and then refresh the data every 60000?
Site.Master:
<asp:ScriptManager ID="ScriptManagerMouseRegion" runat="server"></asp:ScriptManager>
<asp:Timer runat="server" id="SiteMasterTimer" Interval="10000" OnTick="SiteMasterTimer_Tick"></asp:Timer>
<asp:UpdatePanel ID="UpdatePanelMouseRegion" runat="server">
<ContentTemplate>
// mouse region to be updated
Default.aspx:
<asp:ScriptManagerProxy ID="DisplayResultsScriptManager" runat="server">
</asp:ScriptManagerProxy>
<asp:Timer ID="DisplayResultsTimer" Interval="60000" Enabled="true" runat="server" OnTick="DisplayResultsTimer_Tick">
</asp:Timer>
<asp:UpdatePanel ID="DisplayResultsUpdatePanel" runat="server" >
<Triggers>
<asp:AsyncPostBackTrigger ControlID="DisplayResultsTimer" />
</Triggers>
<ContentTemplate>
// GridView to be updated
For the updatePanels, set UpdateMode to Conditional
<asp:UpdatePanel ID="UpdatePanelMouseRegion" runat="server" UpdateMode="Conditional">
For more information: Creating a Simple ASP.NET Page with Multiple UpdatePanel Controls

How can I prevent a page from going to the top every time a button with OnClick event is clicked?

How can I prevent a page from going back to the top every time a button is click? I still want to execute the code on the "OnClick" event for the button.
Example:
Almost all of our forms have a button on the bottom of the page which are suppose to bring some data back from the DB and populate some labes and textboxes located on the bottom of the page, when the button is click it takes user back to the top of the page. How can I prevent this from happening?
Any help will be really appreciate it.
Assuming the OnClick event is handled on the server and not in javascript, the easiest thing is wrap the controls to be updated in an UpdatePanel and have the update panel trigger on the button's click event.
Here is an example from Microsoft's documentation:
<asp:Button ID="Button1"
Text="Refresh Panel"
runat="server" />
<asp:ScriptManager ID="ScriptManager1"
runat="server" />
<asp:UpdatePanel ID="UpdatePanel1"
UpdateMode="Conditional"
runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" />
</Triggers>
<ContentTemplate>
<fieldset>
<legend>UpdatePanel content</legend>
<%=DateTime.Now.ToString() %>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
There are two options:
Use ASP.NET Ajax, in particular the UpdatePanel control
Set MaintainScrollPositionOnPostback to true on page level or in web.config
in your page declaration you can add MaintainScrollPositionOnPostback="true" ie:
<%# Page Language="C#" ... MaintainScrollPositionOnPostback="true" %>
you can also put that in your web.config under system.web or declare it from codebehind Page.MaintainScrollPositionOnPostback=true;
In the function handler for the button make sure you return false. You might be actually posting the page with those buttons rather than just doing something on the click event.

How do you use an UpdatePanel properly?

I have an UpdatePanel with some checkboxes in it. I check them, and hit my Save button, but that causes the UpdatePanel to postback (refresh) and sets them all back to blank. The re-drawing method runs before the button code.
What is the correct way to have an UpdatePanel with checkboxes in that you can manipulate?
Example of code:
<asp:UpdatePanel runat="server" UpdateMode="Conditional" ID="updatePanel1">
<ContentTemplate>
<asp:CheckBox runat="server" ID="myCheckBox" Caption="CheckBox"/>
<asp:Button runat="server" ID="saveButton"
Caption="Save" OnClick="SaveButtonClick"/>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="saveButton" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
Make sure that:
UpdateMode of UpdatePanel is Conditional
SaveButton contained in Triggers-section as ControlID of AsyncPostBackTrigger
Your code behind should look like:
if(!page.ispostback)
{
re-drawing();
}
As when you hit Save button your re-drawing() method is called and it again refreshes your checkboxes. Asynchronous postback behaves and hit to page method the same as full postback, but refreshes the values in any updatepanels.
Also check this URL
http://ajax.net-tutorials.com/controls/updatepanel-control/
Make sure the Save button is inside the Update Panel, for a start, and if not, that is designated as a Trigger for the Update Panel, in the <Triggers> section of the Update Panel.
<asp:UpdatePanel ID="MyControlPanel" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="SaveButton" />
</Triggers>
<ContentTemplate> ...
Can you show some code for your UpdatePanel?
If you use server controls to render checkboxes you should add EnableViewState="true" attribute to these controls and update panel.
If you have checkboxes that are not server controls, then remove them from update panel, include only server controls inside. This leads to keeping several updates panel on a page that's usually not a big issue.
Add a ScriptManager object to your page if you do not have one. Set EnablePartialRendering="true". Put your UpdatePanel anywhere else on the page and place the content you want ajaxified within a tag within your UpdatePanel.

Categories