Do not refresh Inner Update Panel in asp.net - c#

I am using 2 Update Panel in Asp.net. Second Update Panel is inside main Update Panel. It is like as below :
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
// Google Map...
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</asp:UpdatePanel>
UpdatePanel1 contains Dropdown and It is Autupostback=true so if user selects any Dropdown then it refreshs Google Map which is inside. I do not want to refresh inside Update Panel anyway.
Is it possible to do this ?

People often misunderstand the way UpdatePanel works. They mistakenly think that, there's no page reload when anything triggering postback occurs inside an UpdatePanel. This is totally wrong. In fact a full page reload is taken place. It's not a coincidence that UpdatePanel is located under category called AJAX controls of the toolbox. But it does not work the same as AJAX does, it just imitates it. What you get when you use UpdatePanel is that the page does not flicker to the top of the page, which is the normal behavior of any full page reload, so you get a feeling of partial refresh. That's why, the Google Maps you're talking about gets refreshed. Using real AJAX will help you do just what you want. Jquery library has a very convenient way of doing AJAX. Or you can just use plain javascript.

Related

What is the correct way to put multiple controls inside update panel?

I have one registration form which contains 3 to 4 dropdown controls and 2 datepickers and now when dropdown controls value are selected(selectedindex change are fired)
then i dont want my page to postback.
I have use update panel to stop this behaviour of post like below:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<%--Update Panel for date picker%>
<asp:UpdatePanel ID="UpdatePanelDatepicker" runat="server">
<ContentTemplate>
<telerik:RadDatePicker ID="rdpDate1" runat="server">
</telerik:RadDatePicker>
</ContentTemplate>
</asp:UpdatePanel>
<%--Update Panel for Dropdown--%>
<asp:UpdatePanel ID="updatepaneldata" runat="server">
<ContentTemplate>
<telerik:RadComboBox ID="ddlCountry" runat="server">
</telerik:RadComboBox>
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</asp:UpdatePanel>
So i just wanted to ask that is this correct way to put multiple controls under update panels??
Subscribe to ajax event of initializeRequest on client-side. In this event we can cancel an ajax postback if we need to.
The initializeRequest method is raised before processing of the asynchronous request starts. You can use this event to cancel a postback.
In this event, we will check if an async postback is being initiated due to ddlCountry, and if yes then we cancel the ajax post back so no post back occurs.
To solve your problem just do the following : Add following JavaScript to your aspx page. In code below, the pageLoad method is automatically called by ASP.Net Framework on client-side when browser loads the page and after all scripts have been loaded as well as all client-side objects created.
JavaScript to cancel combobox post back
<script type="text/javascript">
function pageLoad()
{
Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(CancelComboBoxPostback);
}
function CancelComboBoxPostback(sender, args)
{
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm.get_isInAsyncPostBack() & args.get_postBackElement().id == 'ddlCountry') {
args.set_cancel(true);
}
}
</script>
The following is only a recommendation and not a part of the solution to your specific problem: Also, I would recommend to stay away from nested update panels as this can cause unexpected results if developer is not aware of how nested update panels work. In your situation, a single update panel should suffice as in markup below instead of nested update panels that you have used in your original markup.
Markup without nested update panels
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<telerik:RadDatePicker ID="rdpDate1" runat="server">
</telerik:RadDatePicker>
<telerik:RadComboBox ID="ddlCountry" runat="server">
</telerik:RadComboBox>
</ContentTemplate>
</asp:UpdatePanel>
Honestly, the UpdatePanel I find is more trouble than it is worth.
UpdatePanel controls are a central part of Ajax functionality in
ASP.NET. They are used with the ScriptManager control to enable
partial-page rendering. Partial-page rendering reduces the need for
synchronous postbacks and complete page updates when only part of the
page has to be updated. Partial-page rendering improves the user
experience because it reduces the screen flicker that occurs during a
full-page postback and improves Web page interactivity.
I often find the controls implementation causes more problems then it is worth. So I often implement my own Ajax services, to handle such logic. You can do this the old school way, quite easy.
// Create .aspx page, to be our service.
public class ControlUpdateService
{
protected void Page_Load(object sender, EventArgs e)
{
// Use an approach to determine which control type, and model to build.
// You would build your object, then use Newtonsoft.Json, to serialize, then
// return the object, via Response.End(object).
}
}
Then your page would Ajax the data, hit the service, then build your control via the .success in the Ajax call. If you do this approach, you commit to saving your data via Ajax as well. Keep that in mind. As I was answering this question, I can't help but feel your problem actually stems from the control doing an AutoPostback. Which you can actually disable.
AutoPostBack = "false";
Telerik may be different, but the documentation should clearly indicate how to disable this feature. Which would eleminate your need for an UpdatePanel all together. Allowing you to save your data, on PostBack correctly.
Use telerik Ajaxloadingpanel except UpdatePanel this is good for your code try this Example
<telerik:RadAjaxLoadingPanel ID="rlp" runat="server" Skin="Metro">
</telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxPanel runat="server" LoadingPanelID="rlp" skin="Metro">
<telerik:RadDatePicker ID="rdpDate1" runat="server">
</telerik:RadDatePicker>
<telerik:RadComboBox ID="ddlCountry" runat="server">
</telerik:RadComboBox>
</telerik:RadAjaxPanel>

How to stop refreshing the page

Is there any chance to stop the page to refresh on every pressed control?
For example: I change the selection of a DropDownList and the page refreshes. It just feels weird.
I do it with a form tag runat="server"
Try using UpdatePanel and here you can find how to use the update Panel sample code.
easiest way to stop refeshing
Regarding PostBack:
PostBack is the name given to the process of submitting an ASP.NET page to the server for processing. PostBack is done if certain credentials of the page are to be checked against some sources (such as verification of username and password using database). This is something that a client machine is not able to accomplish and thus these details have to be 'posted back' to the server.
What is AutoPostBack Property in ASP.NET:
If we create a web Page, which consists of one or more Web Controls that are configured to use AutoPostBack (Every Web controls will have their own AutoPostBack property), the ASP.NET adds a special JavaScipt function to the rendered HTML Page. This function is named _doPostBack() . When Called, it triggers a PostBack, sending data back to the web Server.
Understanding PostBack
Try putting update panel for dropdown with triggers
<asp:UpdatePanel ID="upSetSession" runat="server">
<ContentTemplate>
<asp:DropDownList ID="ddlMyList" runat="server"
onselectedindexchanged="ddlMyList_SelectedIndexChanged"
AutoPostBack="true">
<asp:ListItem>Select One</asp:ListItem>
<asp:ListItem>Maybe</asp:ListItem>
<asp:ListItem>Yes</asp:ListItem>
</asp:DropDownList>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddlMyList"
EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
From asp.net:
Perhaps the most visible feature of the ASP.NET AJAX Extensions is the ability to do a partial or incremental page updates without doing a full postback to the server, with no code changes and minimal markup changes. The advantages are extensive – the state of your multimedia (such as Adobe Flash or Windows Media) is unchanged, bandwidth costs are reduced, and the client does not experience the flicker usually associated with a postback.
Integrate partial rendering into your project. Have a look at this link.
Also OnClientClick="return false;" may help but adding OnClientClick="return false;" on every button, is not a good idea. Partial rendering and AJAX is the better solution.

Databind to refresh only a control, not a whole page

It appears that calling Control.DataBind() in C#/ASP refreshes the whole page, and brings the user back to the top of the page.
Is there a way to call DataBind() and have it only refresh the control it's affecting, leaving the user at the same spot on the page after the databind?
Try putting the control within an Update Panel.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<control goes here>
</ContentTemplate>
</updatePanel>

mcts ajax question

You are implementing an ASP.NET AJAX page. You add the following control to the page.
<asp:UpdatePanel ID="pnl1" runat="server" UpdateMode="Conditional">
<ContentTemplate> ... </ContentTemplate>
</asp:UpdatePanel>
You need update the contents of the UpdatePanel without causing
a full reload of the page. Which two actions should you perform? (Each correct answer presents part of the
solution. Choose two.)
A. Add the following control before the UpdatePanel. <asp:Timer ID="Timer1" OnLoad="Timer1_Tick"
runat="server" Interval="3000" />
B. Add the following control within the UpdatePanel. <asp:Timer ID="Timer1" OnLoad="Timer1_Tick"
runat="server" Interval="3000" />
C. Add an AsyncPostBackTrigger that references Timer1.
D. Add a PostBackTrigger that references Timer1.
You should place Timer within UpdatePanel to update contetns. So, right answers are B and C.
From MSDN "You use the Timer control to update an UpdatePanel control by including the timer inside the UpdatePanel control. Alternatively, you can place the timer outside the UpdatePanel control and set the timer as a trigger."
Sounds like the answer is A+C or just B.

Search using Update Panels

Is it possible to use an UpdatePanel that has like a few text boxes, and a search button, and then perhaps another UpdatePanel that has a gridview in it to return the results of what was searched. When the user clicks search it hides the boxes, and displays the gridview. Can I do this with UpdatePanels? I am using c# for my coding. Or should I be doing this another way?
You only need one UpdatePanel in that case and setup a Trigger to your search Button.
Put only the controls that will be refreshed in your UpdatePanel.
Example:
<asp:TextBox ID="txtSearchCriteria" runat="server" />
<asp:Button ID="btnSearch" runat="server" OnClick="btnSearch_Click" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSearch" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:GridView ID="grdSearchResults" runat="server">
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
Implement the btnSearch_Click function to execute your search and bind the results to the GridView. The UpdatePanel will handle the ajax call and replacing of the HTML that the GridView will produce.
You want to keep as much out of the UpdatePanel as possible and only include what will actually change because it is transmitting that HTML with each update so it's a waste of resources if you are not actually doing anything to those controls with each action. That is why a trigger is best to be used in this case which will hook the UpdatePanel to the Click event outside of the UpdatePanel scope.
Read up more on UpdatePanel and how triggers work on MSDN.
If I understand the question correctly, you can do that with two <asp:Panel> controls inside the <UpdatePanel>. One panel for the textboxes, and the other for the gridview. You set which panel to show in the codebehind, depending on whether you're expecting your user to enter search criteria, or review the search results.
Yes you can.
You also could use just one update panel. Since you the Search Form (could be in a Panel) and the GridView inside the UpdatePanel.

Categories

Resources