在 asp.net 的 Ajax 更新面板中使用 Jquery JqTransform 插件时出现问题答案

【问题标题】：Issue While using an Jquery JqTransform plugin within Ajax update panel in asp.net在 asp.net 的 Ajax 更新面板中使用 Jquery JqTransform 插件时出现问题
【发布时间】：2011-05-11 13:50:32
【问题描述】：

我在使用带有控件的 Jquery JqTransform 插件时遇到了一个问题，该插件包含在 asp.net 的 Ajax 更新面板中。代码如下：

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" EnablePartialRendering="true"></asp:ToolkitScriptManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
      <asp:DropDownList ID="ddlArtist" runat="server" AutoPostBack="True" onselectedindexchanged="ddlArtist_SelectedIndexChanged"></asp:DropDownList>
      <p class="maintext"><asp:Literal ID="ltrArtistDesc" runat="server"></asp:Literal></p>
    </ContentTemplate>

    <Triggers>
       <asp:AsyncPostBackTrigger ControlID="ddlArtist" EventName="SelectedIndexChanged" />
    </Triggers>

</asp:UpdatePanel>

当页面加载时，它会应用 jqtransform 来转换下拉列表和其他控件并应用一些样式。但是，一旦我从下拉列表中选择一个专辑，它就会回发并从数据库中检索更多详细信息。为了避免完整的回发，我使用了更新面板。但是在使用它之后，我开始遇到“我在页面上的控件没有被 jqtransform 转换”的问题。

在页头有一个脚本，即调用JqTransform 的文件。这里是：

<script language="javascript" type="text/javascript">
        $(function(){
            $('form').jqTransform({imgPath:'jqtransformplugin/img/'});
        });
</script>

请帮助我，我只是希望 jqTransform 将应用于控件，即使我从下拉列表中选择了一个专辑并且它会导致部分回发。

【问题讨论】：

patmortech 你能解决面临的问题吗

标签： c# jquery asp.net jquery-plugins

【解决方案1】：

在<ContentTemplate> 中创建一个新的 div 并为该 div 调用 jqTransform 插件。

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
    <div class="formstyle">
        ......... Your form elements
    </div>
    </ContentTemplate>
</asp:UpdatePanel>

然后调用jqTransform插件如下：

<script type="text/javascript">
  $(function () {
    //Initial bind
    $(document).ready(function () {
      BindControlEvents();

      //Re-bind for callbacks
      var prm = Sys.WebForms.PageRequestManager.getInstance();
      prm.add_endRequest(function () {
        BindControlEvents();
      });

      function BindControlEvents() {
        $('.formstyle').jqTransform();
      }
    });
  });
</script>

即使在通过更新面板获得回发后，jqTransform 对我来说也能正常工作。

【讨论】：

【解决方案2】：

我以前遇到过这种情况，这不是设计问题。您正在做的是将新列表重新加载到组合框中，从而有效地破坏已经呈现的内容。听起来部分回发是一个 ajax 调用，例如，如果您的 ajax 函数看起来像这样

$.ajax({
url: 'ajax/updatelist.html',
  success: function(data) {
      ...your code to update list...then
      $('form').jqTransform({imgPath:'jqtransformplugin/img/'}); //this will re render your form!
   }
});

您甚至可以继续并重新 jqTransform 组合框，如果那是只更新项目而不是整个表单以提高性能。希望对您有所帮助！

【讨论】：

【解决方案3】：

如果是 Microsoft 更新面板

$(document).ready(function () {
        var prm = Sys.WebForms.PageRequestManager.getInstance();

     prm.add_endRequest(EndRequest);

     function EndRequest(sender, args) {

             $('form.jqtransform').removeClass('jqtransformdone');
             $('form.jqtransform').removeClass('jqTransformHidden');

                    $("form.jqtransform").jqTransform({ selectwidth: 240 });
            }
});

【讨论】：

【解决方案4】：

如果您想在每次回发时调用您的 jquery 方法，那么您需要有一个 Ajax pageLoad，而不仅仅是在准备好文档时。要让 jqTransform 在 pageLoad 上工作，请使用以下命令：

<script type="text/javascript">

    function pageLoad() {
        $("form").removeClass("jqtransformdone");
        $("form").jqTransform(); 
    };

</script>

【讨论】：