I have an ASP.NET/C# application.
The application containsa PlaceHolder inside an UpdatePanel.
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="LinkButton1" EventName="Click"/>
<asp:AsyncPostBackTrigger ControlID="LinkButton2" EventName="Click"/>
<asp:AsyncPostBackTrigger ControlID="LinkButton3" EventName="Click"/>
</Triggers>
<ContentTemplate>
<asp:PlaceHolder ID="PlaceHolder1" runat="server" Visible="false">
</asp:PlaceHolder>
</ContentTemplate>
</asp:UpdatePanel>
Basically I load controls in the placeholder depending on what LinkButton has been clicked using a function
LoadControls("ControlName");
I want to implement the ability for the user to use the Browser Back Button
in order to navigate through the controls. so I used AJAX History like this:
I save the current control ID in a session variable
Session["current"]
I enable History in scriptmanager and add an event handler
<asp:ScriptManager ID="ScriptManager" runat="server" EnableHistory="True" onnavigate="ScriptManager_Navigate" />
(The event handler will be covered below)
First I will create a new history point in the event handler of the Linkbuttons (they all use the same handler)
string ControlId=Session["current"].ToString();
if (ScriptManager.IsInAsyncPostBack && !ScriptManager.IsNavigating)
{
ScriptManager.AddHistoryPoint("Hist", ControlId);
}
then in the Scriptmanager navigate handler
protected void ScriptManager_Navigate(object sender, HistoryEventArgs e)
{
string Controlid = "";
if (e.State["index"] != null)
{
Controlid = e.State["Hist"].ToString();
LoadControls(Controlid );
}
}
When I load the controls I can navigate back and forward and everything is working fine
Here is the problem:
1) first problem
The first time I click on "Back". the history returns 2 steps and not one (after that it works normaly.) It is like the last history is not saved.
2) second problem
After "Backing" to the first step I can do an extra "Back" where the e.State["Hist"] will be null and give me an error. how can I disable the "Browser Back" button when the e.State["Hist"] will be null?
Thank you very much for any help. I hope I was clear.
If you need more info/code I will gladly provide them
Never mind. it was just a bug. the Session["Current"] was saving the previous control and not the current one. It is now fixed. I will leave this question if somebody needs a small example for creating ajax history.
Related
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>
I'm new in using UpdatePanel, I Have 2 DropDownList:
DropDownList_1 and DropDownList_2
where DropDownList_2 content will be dependent to DropDownList_1 selected value, here is my code:
ASPX:
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DropDownList ID="DropDownList_1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList_1_SelectedIndexChanged" DataSourceID="businessgroup" DataTextField="BusinessGroupName" DataValueField="Id"></asp:DropDownList>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="DropDownList_1" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
<asp:DropDownList ID="DropDownList_2" runat="server" DataSourceID="jobposition" DataTextField="JobPositionName" DataValueField="Id"></asp:DropDownList>
CS:
protected void DropDownList_1_SelectedIndexChanged(object sender, EventArgs e)
{
SqlDataSource1.SelectCommand = "SELECT DISTINCT * FROM [JobPosition] WHERE BusinessGroupID ="+DropDownList_1.SelectedValue;
DropDownList_2.DataBind();
}
its working as stated above but what I doesn't want in my output is the whole page refreshes, I also tried removing AutoPostBack="true" in my DropDownList_1 but it stops working, what am I doing wrong in here? Thanks!
EDIT:
I also tried moving the DropDownList_2 inside UpdatePanel's ContentTemplate but still the whole page is refreshing.
Here is how you should do:
If you want to refresh the second drop-down, than the second drop-down should be inside an update panel
Set AutoPostBack="true" only for the second drop-down
Set UpdateMode="Conditional" for the update panel (otherwise they will refresh every time)
Set the AsyncPostBackTrigger of the panel to point to the first drop-down SelectedIndexChanged event
Set ChildrenAsTriggers="true" for the Update panel
:
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:DropDownList ID="DropDownList1" runat="server" OnSelectedIndexChanged="DropDownList_1_SelectedIndexChanged" DataSourceID="businessgroup" DataTextField="BusinessGroupName" DataValueField="Id"></asp:DropDownList>
<asp:DropDownList ID="DropDownList_2" runat="server" AutoPostBack="true" DataSourceID="jobposition" DataTextField="JobPositionName" DataValueField="Id"></asp:DropDownList>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="DropDownList_1" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
The controls should reside in the same update panel, it's simpler this way.
I found the fix, thanks to Cristina for reminding me to check the console errors. And just for reference to anyone who is having the same problem here is what I've done:
I have missing Ajax libraries, so I imported the MicrosoftAjax.js and MicrosoftAjaxWebService in this folder Scripts>WebForms>MSAjax.
After I imported the necessary Ajax library I've got this console error:
MicrosoftAjaxWebForms.js:6 Uncaught
Sys.WebForms.PageRequestManagerServerErrorException:
Sys.WebForms.PageRequestManagerServerErrorException: Invalid postback
or callback argument. Event validation is enabled using in configuration or <%# Page
EnableEventValidation="true" %> in a page. For security purposes,
this feature verifies that arguments to postback or callback events
originate from the server control that originally rendered them. If
the data is valid and expected, use the
ClientScriptManager.RegisterForEventValidation method in order to
register the postback or callback data for validation.
What I did is add EnableEventValidation="false" inside this Ajax page, in <%Page %> directive.
And after that I have no longer full page reload and all is working now on how I wanted.
If your panel still posts back after you've set it up as per guidelines, check that you have not set ClientIDMode="Static" either for the specific control performing the callback or by causing the ClientIDMode to default to static inherited from either in web.config, the Page or parent containers.
Search your solution for ClientIDMode="Static" and either change this for inherited controls including the one triggering the postback, or explicitly set ClientIDMode="Predictable" or ClientIDMode="AutoID" for each of your controls that trigger a postback.
While you are working with update panel you have to register your events while refreshing the page for that you have to use Microsoft's PageRequestManager
to re-subscribe every update.
You have to initialize your event in the document.ready(function(){})
of the javascript.
Ex: var test=Sys.WebForms.PageRequestManager.getInstance();
I have an update panel that lives in a control that lives on a masterpage. Is it possible to access the updatepanel and cause it to fire in the code-behind of another aspx page that this control is added to at run-time?
There is one case where a button is clicked on page X, and when that button is clicked, I need the update-panel to run. I have tried this so far with no luck:
Code-Behind
udp = FindControl("udpWishlist") as UpdatePanel;
if (udp != null){
udp.Update();
}
Snippet from control of the UpdatePanel I'm trying to use
<!--update wishlist on cartadd-->
<asp:UpdatePanel ID="udpWishlist" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:LinkButton ID="lbwishlist" runat="server" href="/wishlist.aspx"></asp:LinkButton>
</ContentTemplate>
<Triggers>
</Triggers>
</asp:UpdatePanel>
Well, you can create a public Method inside the user control, like this:
public void Update()
{
udpWishlist.Update();
}
Inside the page that contains the UserControl:
YourUserControlType uc = (YourUserControlType)Page.FindControl("YourUserControlID");
uc.Update();
Since the update panel lives in another .aspx, it's out of scope for FindControl(). You may be able to do something like:
udp = this.Page.Master.FindControl("udpWishlist") as UpdatePanel;
I've been trying to add/remove controls to an updatepanel when updating it. Those controls are dynamically filled depending on the info in the page session.
The Updatepanel_Load event is triggered correctly but the controls I've changed won't show properly. They'll only show after a full postback!
Now I know that you need an onInit event to add / alter controls on the page but is this also necessary for an updatepanel? Can someone please explain the right order to do this?
ORDER RIGHT NOW:
Button click
LoginProcedure over ajax
OnInit
UpdatePanel1_Load (Generates controls)
onInit.
So no controls are added / altered until full post back. What is the correct order / method to add / alter controls within an updatepanel without a full postback?
add async postback to your updatePanel like:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Init..."></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="TextBoxTrigger" EventName="TextChanged" />
</Triggers>
</asp:UpdatePanel>
How do I force full post-back from a button within an UpdatePanel?
You can use the Triggers property of the UpdatePanel to register actions that trigger a full postback.
Add a PostBackTrigger object to that property, containig the ControlID of the control which needs to trigger a full postback.
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
<ContentTemplate>
...
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="myFullPostBackControlID" />
</Triggers>
</asp:UpdatePanel>
Just adding this because nobody else has. It is possible to do this in code-behind in one line of code without any of the above methods. Just put this in page_load:
Visual Basic
ScriptManager.GetCurrent(Me).RegisterPostBackControl(myButtonID)
C#
ScriptManager.GetCurrent(this).RegisterPostBackControl(myButtonID);
From here:
Use the PostBackTrigger control to enable controls inside an UpdatePanel to cause a postback instead of performing an asynchronous postback.
<Triggers>
<asp:PostBackTrigger ControlID="controlID" />
</Triggers>
I had the same problem using an ImageButton inside a WebDataGrid.
I put the Line from EvilDr inside the preRender for the webdatagrid instead. Worked great!
for (int i = 0; i < wdgMyData.Rows.Count; i++)
{
ScriptManager.GetCurrent(this).RegisterPostBackControl((ImageButton)wdgMyData.Rows[i].Items[3].FindControl("btnDownloadExcel"));
}
Its an old question there is bit tricky approach as well, when everything is in update panels and you want to do full post back so that your Document.Ready code works on click.
1. Create a dummy button outside the update panel and click it from code behind like this
ScriptManager.RegisterStartupScript(Page, this.GetType(), "ResetDoc", "ResetDocumentReady();", true);
2. Define the function on front end like this
function ResetDocumentReady() {
$("[id$=DummyButton]").click();
}
NOTE: But the best way is using trigger, the answer posted by #Thibault Falise :)