将多个控件放入更新面板的正确方法是什么？

Question

我有一个注册表单，其中包含 3 到 4 个下拉控件和 2 个日期选择器，现在当下拉控件值被选中时（selectedindex 更改被触发）那么我不希望我的页面post返回。

我已经使用更新面板来阻止 post 的这种行为，如下所示：

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

所以我只想问一下，在更新面板下放置多个控件是否正确？

Answer 1

订阅 client-side 上 initializeRequest 的 ajax 事件。在这种情况下，如果需要，我们可以取消 ajax post 返回。

The initializeRequest method is raised before processing of the asynchronous request starts. You can use this event to cancel a postback.

在这种情况下，我们将检查是否由于 ddlCountry 而启动异步 post 返回，如果是，则取消 ajax post 返回所以没有 post 返回。

要解决您的问题，只需执行以下操作：将以下内容 JavaScript 添加到您的 aspx 页面。 在下面的代码中， pageLoad 方法由 ASP.Net Framework 在 client-side 上自动调用，当浏览器加载页面时，并且在加载所有脚本以及创建的所有 client-side 对象之后。

JavaScript取消组合框post返回

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

以下只是一个建议，并不是解决您具体问题的一部分：另外，我建议远离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>

Answer 2

使用 telerik Ajaxloadingpanel 除了 UpdatePanel 这对你的代码有好处试试这个例子

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

Answer 3

老实说，UpdatePanel 我发现麻烦多于它的价值。

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.

我经常发现控件的实现会导致更多的问题，而不是值得的。所以我经常实现自己的 Ajax 服务，来处理这样的逻辑。你可以用老派的方式做到这一点，非常简单。

// 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). 
     }
}

然后您的页面将 Ajax 数据，点击服务，然后通过 Ajax 调用中的 .success 构建您的控件。如果您采用这种方法，您也承诺通过 Ajax 保存您的数据。记住这一点。当我回答这个问题时，我不禁觉得你的问题实际上源于控件执行AutoPostback。您实际上可以禁用它。

AutoPostBack = "false";

Telerik 可能有所不同，但文档应该清楚地说明如何禁用此功能。这将消除您对 UpdatePanel 的需求。允许您在 PostBack 上正确保存数据。

将多个控件放入更新面板的正确方法是什么？

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

c#

asp.net

updatepanel

telerik