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

Question

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??

Without the actual layout and goals of the page noone can answer your question, because the answer depends on the level of granularity you want to achieve. With the provided information, though, I would leave only Updatepanel1 (the top level one), the nested one(s) seem redundant to me. — rdmptn, Jan 18 '16 at 11:13
@rdmptn:I have multiple dropdown controls and datepicker with autopostback propertry set to true and when selecting those dropdowns and datepickers my page is getting postback and in my page i have kept update panel for each dropdown and for datepicker so i want just one update panel solution which can control postback of all my control on selection — I Love Stackoverflow, Jan 23 '16 at 06:04
Post your current setup and issue. Everything else is guessing otherwise, bounty or no bounty. What I can say now is to try and avoid nested update panels. — rdmptn, Jan 23 '16 at 07:45
@rdmptn:i have search alot on this update panel but i havent found any such good article or post on internet or on SO from which i can get something but yes i have found some of your answer on update panel so it seemd like you have good understanding on update panel — I Love Stackoverflow, Jan 23 '16 at 08:29
When you say "I don't want it to post back", is that because it is causing other problems for you? Don't fight against WebForms - work with it ;) — Squiggle, Jan 23 '16 at 10:25
If you do not want a post, why do you set the AutoPostBack to True? What is a purpose of the server-side execution then? — Mikhail, Jan 26 '16 at 17:37
Just to elaborate on what was already added. It's not clear from yor code what the purpose of your Telerik Controls are for are they related? what is their data source and most importantly why are they in an update panel to begin with? If their datasource changes based on some unseen control then I would just put them in one update panel and add a trigger for that control I can provide the rest of the answer if you provide more details... — DaniDev, Jan 29 '16 at 20:09

Sunil · Accepted Answer · 2016-01-24T17:21:01.923

3

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>

edited Jan 24 '16 at 17:21

answered Jan 23 '16 at 16:52

Sunil

20,653
28
112
197

but i have country,state and city dropdown too with country and state dropdown autopostback property set to true. – I Love Stackoverflow Jan 25 '16 at 03:21
You mean you want to stop post back of other controls and not just `ddlCountry`? – Sunil Jan 25 '16 at 03:56
What is the id of states drop down? – Sunil Jan 25 '16 at 03:59
ddlCountry,ddlState,ddlCity,DdlBranch.All this dropdown control are set with autopostabck propertry=true. and yes i want to stop post back of all this control but on copuntry dropdown change i am filling my state dropdown and on state dropdown i am filling my city dropdown and on branch dropdown selection i am having some logic on my server side – I Love Stackoverflow Jan 25 '16 at 04:05
moreover in CancelComboBoxPostback function the if condition is false so that line inside if condition is not firing – I Love Stackoverflow Jan 25 '16 at 04:19
If you stop post back of ddlCountry, then states drop down of ddlState will not populate. So, your ddlState will never populate. I don't understand your question. – Sunil Jan 25 '16 at 04:19
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/101554/discussion-between-learning-and-sunil). – I Love Stackoverflow Jan 25 '16 at 04:26
can you help me with this question:http://stackoverflow.com/questions/35356677/handle-multiple-delete-events-from-grid-with-single-events-handlers-asp-net – I Love Stackoverflow Feb 12 '16 at 11:04
I have just posted an answer to your question. – Sunil Feb 12 '16 at 15:13

score 3 · Answer 2 · answered Jan 29 '16 at 17:46

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.

so you are using that you use jquery ajax instead of update panel right?? — I Love Stackoverflow, Jan 30 '16 at 03:42
Yes, the UpdatePanel is memory heavy. Why not use actual Ajax, it may create more generic or multiple services but will be faster and easier to work with. — Greg, Jan 30 '16 at 07:36
can you please help me with this question.:http://stackoverflow.com/questions/35098923/javascript-function-is-not-getting-call-from-code-behind-when-it-is-put-on-maste — I Love Stackoverflow, Jan 30 '16 at 07:38

score 2 · Answer 3 · answered Jan 29 '16 at 10:41

2

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>

answered Jan 29 '16 at 10:41

Muhammad Asad

1,772
16
23

1

If you are using Telerik controls then use Telerik ajax panel that's help you allot in future if you want to upload file with update panel you also add trigger tag for update panel and every time your application post back your uploaded file lost if u are using telerik then try to use all telerik controls it's reduce the complexity of your code – Muhammad Asad Jan 29 '16 at 10:49
can you help me with this question:http://stackoverflow.com/questions/35356677/handle-multiple-delete-events-from-grid-with-single-events-handlers-asp-net – I Love Stackoverflow Feb 12 '16 at 11:05

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

3 Answers3

Linked