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.
Related
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 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.
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>
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.
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 :)