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

问题

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

回答1:

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>

回答2:

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.

回答3:

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>

来源：https://stackoverflow.com/questions/34605384/what-is-the-correct-way-to-put-multiple-controls-inside-update-panel

标签

ASP.NET

telerik

updatepanel