Develop Reference

ASP.NET UpdatePanel not working, it refreshes the whole page

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();

UpdatePanel doesnt work as intended for file upload control

When I click on the attach button, It adds a new row to the grid with the postedFile name.
But its also causing the whole page to refresh, as if the updatePanel doesnt exist. Whereas, I would like just the gridview to update. Why does this have to be this way with file upload controls. The UpdatePanel works as desired for other controls/grids on page.
I do not have a knowledge on jquery, so have to work it out only with c#. Any suggestions.
<asp:updatepanel runat="server" updatemode="conditional">
<triggers>
<asp:postbacktrigger controlid="btnAttach"/>
</triggers>
<contenttemplate>
<asp:gridview ...../>
<asp:fileupload id="fup" runat="server">
<asp:button id="btnAttach" text="attach" runat="server/>
</contenttemplate>
</asp:updatepanel>

i suggest you to use the ajax asyncFileUploader
Link
Link
it will help you without postback and without jquery
it use plain javascript and its easy the following link containing the example also

Fileupload is one of the controls that is not compatible with updatepanel:
Read here

Right order to add/remove controls to updatepanel on update

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>

ASP Button Event not firing into UserControl UpdatePanel

I have a page with an UpdatePanel that calls a UserControl with another UpdatePanel. The LinkButton event into the user control UpdatePanel is not firing.
<asp:UpdatePanel ID="updPost" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="linkComment" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:LinkButton ID="linkComment" runat="server"
OnClick="linkComment_Click" OnClientClick="return showCommentBox()"
CssClass="PostComment" Text="Comment" />
</ContentTemplate>
</asp:UpdatePanel>
This code is into a usercontrol called in other page update panel.
Anyone can help me?
Thanks

Please show your markup so we can see how your triggers are defined, you should have at least one trigger, something like so:
<Triggers>
<asp:AsyncPostBackTrigger ControlID="MyButton" EventName="Click" />
</Triggers>

Just to clear up the simple stuff, have you included the ScriptManager tag on your page?
i.e. <asp:ScriptManager ID="ScriptManager1" runat="server" />

A control with ID could not be found for the trigger in UpdatePanel

I have an update panel that has UpdateMode of Conditional and ChildrenAsTriggers set to false. I only want a few controls to cause an asynchronous postback:
<asp:UpdatePanel ID="updPnlMain" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
<ContentTemplate>
// ...
<asp:Repeater ID="rptListData" runat="server">
<ItemTemplate>
<asp:Button ID="btnAddSomething" runat="server" OnClick="btnAddSomething_Click" />
</ItemTemplate>
</asp:Repeater>
// ...
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnAddSomething" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
I am getting the following error when I try and load this page:
A control with ID 'btnAddSomething' could not be found for the trigger in UpdatePanel 'updPnlMain'.
Since my btnAddSomething control is in a repeater and might not be there right away it acts like it is nonexistent. How can I get around this?

Because your control is in the repeater control and it is out of scope to the Trigger collection. By the way you don't need to add trigger because your button control is already in the UpdatePanel, it will update when you click the button.
Edit: There is a solution if you really want to update your updPnlMain updatepanel. You can put in another updatepanel and put your button in that panel. e.g.
<asp:UpdatePanel ID="updButton" runat="server" UpdateMode="Conditional">
<asp:Button ID="btnAddSomething" runat="server" OnClick="btnAddSomething_Click" />
</ContentTemplate>
and then simply call the updPnlMain.Update(); method in btnAddSomething_Click event.
It will actually do what you are looking for :)