how to remove page reload - asp.net

In my application when we click on add button a Modal PopUp Extender appears in that their are 2 asp button Save and Cancel. When we click on these buttons the page gets reloaded i have to stop it.
Plz help ..

Use Ajax. How you go about this depends wholy on your design. Without Ajax, you need to post the page and have it reload. Ajax still performs the posting of the data, but it's behind the scenes from the user point of view, and you need to write scripts to handle the response.

You can add an UpdatePanel to your aspx-markup and set the buttons as AsyncPostbackTriggers, this will cause only the content of the popup to reload, not the complete page.
The result will look something like this:
<asp:ScriptManager ID="sm1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="up1" ChildrenAsTriggers="true" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="submitButton" EventName="Click" />
</Triggers>
<ContentTemplate>
<!--popup-->
</ContentTemplate>
</asp:UpdatePanel>

Related

Update Panel is not working for button click, it reload page when click on button in asp.net

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="updatePanel2" runat="server" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:Button ID="btnBlock" Text="BlockCalls" runat="server"
OnClick="btnBlock_Click" Enabled="True" Width="100px" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnBlock" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
When i click on btnBlock pageload even fires. I don't want page refresh when user clicks on button
So, If you put the trigger on button click it is normal when you click it to postback and refresh the page.
If you want to postback without page refresh you should have something like this:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="updatePanel2" runat="server">
<ContentTemplate>
<asp:Button ID="btnBlock" Text="BlockCalls" runat="server"
OnClick="btnBlock_Click" Enabled="True" Width="100px" />
</ContentTemplate>
</asp:UpdatePanel>
Either way your Page_Load event will be fired, but you can do this:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
//this is page load
}
else{
//this is PostBack
}
}
You still ALWAYS get a partial page post-back, and the page load event DOES fire each time with update panel - just like it does for any button outside of the update panel.
So, your page load event should have IsPostBack = false for first page setup code.
So code inside IsPostBack=False code stub only runs first time.
So, while the whole page will not re-fresh, and whole page is NOT re-posted? You still get what is called a "partial" page post back - and while only stuff inside panel is posted back to the server? Standard form events STILL fire each time including page load.
You need to build that page to handle post backs, and introduction of a update panel does NOT fix this requirement.
If your page can't survive a post-back, then it will not handle a update panel. So, a update panel does NOT prevent a post-back, but results in what we call a partial post-back.
So, say if you pop up say a jQuery.UI (or bootstrap) dialog, and do a post-back? Then that dialog will get blown up and out due to the page post back. As noted, update panels STILL do a post-back, but not a full page, and hence the term partial post-back, and thus any server side button or whatever inside of that panel that does a post back? Well, the page load event still fires each time.
So, while some jQuery and some controls can (and will) go zonkey with a full page post back? And using a update panel can help? Keep in mind that server side events in that update panel still result in post-backs - just not full page ones.

trigger an async postback for an update panel from a repeater control

I have an ASP.NET Repeater Control inside an UpdatePanel. I need to update another control when clicking in an ImageButton (inside of the Repeater template). The thing is that I can't get that to trigger.
The panel upPanelRotator is refreshed... which I don't want...I just want to call back to server to update another panel - which I'll control from the server.
Any ideas?
<asp:UpdatePanel ID="upPanelRotator" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Repeater ID="rptRotator" runat="server" OnItemCommand="rptRotator_ItemCommand">
<ItemTemplate>
<asp:ImageButton ID='imgBtn' runat="server" />
</asp:Repeater>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="imgBtn" EventName="ItemCommand" />
</Triggers>
</asp:UpdatePanel>
You should be able to add an async postback trigger to the updatepanel you want to update. Set the control id of the repeater and the "ItemCommand" event as the event name... like this:
<asp:UpdatePanel ID="updatePanel2" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="repeaterId" EventName="ItemCommand" />
</Triggers>
<ContentTemplate>
...
If PanelA has the trigger button, and you want to update PanelB, you would need to have the async postback trigger on the UpdatePanel surrounding PanelB. The problem is, you need to give the actual ID's of the buttons, which specifying imgButton like you have above won't work (because there could be many in the repeater, and async trigger requires one reference that it won't be able to find). To make this very simpe, wrap everything in the UpdatePanel, and that will make your life easier. Otherwise, you have to add the async postback triggers from code I believe.
I have right now similar situation, and I have do this so that I wrap control inside Repeater in another UpdatePanel, and I set AutoPostBack="true" of that control, and register
< asp:AsyncPostBackTrigger ControlID="imgBtn" EventName="Click"/ >
my only consideration on this is how will a such number of UpdatePanels reflect upon performance. I have small project with few DB entry's but for larger amounts of Data, I would test performance before and after such intervention.

How to force button do a full postback instead of asynchronous postback

In an ASP.NET 4.0 web application, I have a user control that is wrapped by an UpdatePanel (see the code below).
<asp:UpdatePanel ID="UpdatePanel5" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<UC:MyCustomCtrl ID="customCtrl" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
Obviously, this works great for every ASP.NET control that causes a postback in my user control because it makes it occur asynchronously. However, there is one process that this doesn't work for!
I have an ASP.NET button (Create Report) in the user control that makes an asychronous request to the server. The server then creates an Excel spreadsheet and then places the spreadsheet in the HttpResponse to send back to the client's browser so they can open/save it. However, it blows up at this point because the request to the server is asynchronous and apparently you can't put a binary in the HttpResponse during an asynchronous request.
How do I get around this?
Register this button as synchronous postback control in user control's Page_Load method: ScriptManager.GetCurrent(Page).RegisterPostBackControl(CreateReportButton);
you can add triggers to UpdatePanels that allow full post back. here's an example
<asp:UpdatePanel ID="UpdatePanel5" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<UC:MyCustomCtrl ID="customCtrl" runat="server" />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnID" />
</Triggers>
</asp:UpdatePanel>
Make use of the triggers within the update panel to reference the custom control and an event registered on the report button within the control, e.g.
<Triggers>
<asp:PostBackTrigger ControlID="customCtrl" EventName="ReportButtonClicked" />
</Triggers>
Similar to Eric's answer. I have not tried this, but it may work...
<asp:UpdatePanel ID="UpdatePanel5" runat="server">
<ContentTemplate>
<UC:MyCustomCtrl ID="customCtrl" runat="server" />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="customCtrl$btnID" />
</Triggers>
</asp:UpdatePanel>
I did something similar to this a while back for validation controls, so it seems logical that it work here too.
Use your DOM viewer (I use Chrome's element inspector) and see what your button's "NAME" is (not ID). And starting with the portion containing the overall user control's name, use the rest.

Async Triggers in ASP.Net

I have an update panel, an async trigger and a button outside the update panel. The button is wrapped with the trigger. All this is in one form. I load this form using the .load() method (jQuery). It works fine: I press the tab and the form loads into the other form. Then, when I press the button for the first time it fires the click event, but when I press it again nothing happens. Can you please help? I have tried putting the button in and out of the update panel and it's still not working. Here's my code:
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Search" />
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" >
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName = "Click"/>
</Triggers>
<ContentTemplate>
...
If you're loading the form with jquery it may be something where you need to rebind an event, I'm not familiar with the .load method()
I assume this section of code works fine if you pull it off into a test page?

Partial page refresh using an UpdatePanel

I have a page associated with master page. I need to implement the Ajax(basically wanted to to do partial page refresh).
In this page I have grid and paging buttons(first/previous/last/next), dropdowns and also search.
So all these updates the grid.
Right now I have below code
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
under
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
Here is the html like grid/buttons/search after ContentTemplate tag starts
So finally the page has left menu/footer/header and contents
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
But this is still refreshing the page.
I am a little confused as to you have and what you want.
It sounds like you have a Content control with an UpdatePanel in it. Within the UpdatePanel ContentTemplate you have all your grid, buttons etc along with your menu.
You only need to have the controls that you want to do the refresh in your UpdatePanel ContentTemplate. All the other stuff you should have outside of the UpdatePanel. If you have any controls outside of the UpdatePanel that you need to trigger a refresh with setup a Trigger for each control in the UpdatePanel and tell it which event to trigger off of.
Example:
<asp:Button ID="btnTest" runat="server" Text="Test" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<!-- only your content that needs refreshing goes here -->
<ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnTest" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
In the above example the btnTest click event will cause the content of the UpdatePanel to refresh but the Button or anything outside of the UpdatePanel will not refresh. If the Trigger was not setup, the whole page would refresh. You don't need Trigger setup for controls within an UpdatePanel as all control events will be captured by the UpdatePanel for a refresh.
You can read up more on MSDN.

Resources