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

How to set UpdatePanel to automatically update while registering AsyncPostBackTrigger programmatically?

I have a Button which will trigger an UpdatePanel, but it is in a different container so if I put my code like below :
<asp:UpdatePanel ID="uptxtQuickSearch" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false" style="height: 100%;">
<ContentTemplate>
<asp:TextBox ID="txtQuickSearch" CssClass="textinput" onmouseover="this.select()" onfocus="this.select()" onkeydown="QuickSearch()" runat="server"></asp:TextBox>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSearchFilter" />
</Triggers>
</asp:UpdatePanel>
There will be a runtime server error : "A control with ID 'btnSearchFilter' could not be found for the trigger in UpdatePanel 'uptxtQuickSearch'."
So I've to register it on the Page_load event with ScriptManager :
ScriptManager scriptManager = ScriptManager.GetCurrent(this.Page);
scriptManager.RegisterAsyncPostBackControl(btnSearchFilter);
but in this case, I still have to update the UpdatePanel manually by using Update() method on the end of btnSearchFilter_click event.
Is there any way to update the panel automatically while registering the trigger on the code-behind?

I've found a solution for this issue. It turns out that you don't really need to register the control using RegisterAsyncPostBackControl method.
you just need to add the trigger on Page_Init event and use the control.UniqueID if the control cannot be found on the runtime.
So the aspx will be like this :
<asp:UpdatePanel ID="uptxtQuickSearch" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false" style="height: 100%;">
<ContentTemplate>
<asp:TextBox ID="txtQuickSearch" CssClass="textinput" onmouseover="this.select()" onfocus="this.select()" onkeydown="QuickSearch()" runat="server"></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
and in code-behind :
protected void Page_Init(object sender, EventArgs e)
{
uptxtQuickSearch.Triggers.Add(new AsyncPostBackTrigger() { ControlID = btnSearchFilter.UniqueID });
}

partial page postback using javascript/jquery

I have two asp.net updatepanels on my page. One of them has a checkbox and other one has some labels. I want to update the contents of second updatepanel when checkbox is checked/unchecked. I am using following code:
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm._doPostBack('UpdatePanel2', '');
but it is doing full page post back.
Please suggest a solution.

You can set checkbox's AutoPostback to True and make it a trigger of the second UpdatePanel:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="True" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="CheckBox1" EventName="CheckedChanged" />
</Triggers>
</asp:UpdatePanel>
And then you can add label changing code in checkbox's "CheckedChanged" event handler, e.g.
protected void CheckBox1_CheckedChanged(object sender, EventArgs e)
{
Label2.Text = DateAndTime.Now;
}

It seems you are looking for update panel triggers, you don't need to trigger it by javascript...

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

Need help with updatePanel

My content page
<asp:updatePanel id="Panel1" runat="server" Visible="true">
<ContentTemplate>
<div>
blah blah
</div>
</ContentTemplate>
</asp:updatePanel>
<asp:updatePanel id="Panel2" runat="server" Visible="false">
<ContentTemplate>
<div>
yada yada
</div>
</ContentTemplate>
</asp:updatePanel>
Code file ..The following code is at the end of Submit button click event :-
Panel1.Visible = false;
Panel2.Visible = true;
Now earlier I was using asp:Panel..then it was working fine..like Panel 1 would hide and Panel 2 would show up instead..it was AFTER I changed asp:Panel to asp:updatePanel that things got screwed up...now the Submit button just won't work !!
What's gone wrong suddenly ?? I changed it to updatePanel so the page doesn't refresh..isn't this how we implement this thing ???
<asp:updatePanel id="Panel1" runat="server">
<ContentTemplate>
<div>
<p>
Type ur name
<asp:TextBox ID="name" runat="server">
</asp:TextBox>
</p>
<asp:Button ID="btn" OnClick="btn_Click" runat="server"
Text="Submit" />
</div>
</ContentTemplate>
</asp:updatePanel>
<asp:updatePanel id="Panel2" runat="server" Visible="false">
<ContentTemplate>
<div>
Thank You!
</div>
</ContentTemplate>
</asp:updatePanel>

At http://msdn.microsoft.com/en-us/magazine/cc163413.aspx#S3 , you can read
Multiple UpdatePanels
A page can host several UpdatePanels. By default, when one UpdatePanel on a page updates, the other UpdatePanels on the page also update. Sometimes that’s what you want, but more often than not, you don’t need every UpdatePanel updating in response to other UpdatePanels.
You can be selective about which UpdatePanel instances update (and when) by setting the UpdateMode property of each UpdatePanel control on the page to "Conditional." Then, when one UpdatePanel updates and calls a server-side event handler, call UpdatePanel.Update on the other panels you want to update. This reduces the load on the server by reducing the number of controls that render, and it reduces the volume of data in the response because UpdatePanels that don’t update don’t add anything to the response.

If you set Visible="false" on an UpdatePanel, it won't be rendered to the client at all. Therefore, if you're doing an Ajax postback, the client isn't going to be able to make the invisible UpdatePanel visible, because it just isn't there.
Think of UpdatePanels just as markers, showing which bits of your page you want to update on an Ajax postback. For your scenario, I think the easiest solution would be to use both UpdatePanels and Panels. Also, because the two things you're updating (the two Panels) are right next to each other, there's no need for two separate UpdatePanels:
<asp:updatePanel id="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel id="Panel1" Visible="true" runat="server">
blah blah
</asp:Panel>
<asp:Panel id="Panel2" Visible="false" runat="server">
yada yada
</asp:Panel>
</ContentTemplate>
</asp:updatePanel>
Then in the code-behind, change the Visible property on the Panel controls.

I do not know where your Submit button is, but maybe try updating those panels with:
Panel1.Update();
Panel2.Update();