Question

我有一个ASP.NET网站也使用jQuery Mobile进行渲染。大多数情况下，这非常有效，但是我遇到了一个小问题。该网站开展了一项调查。页面上有几个“提交”按钮。为了防止整个站点重新加载，提交按钮位于UpdatePanels中，因此只有按钮才会重新呈现。

（我还应该提一下，我们在另一个页面上有一个Report控件，我将要描述同样的问题）。

单击提交按钮时，该按钮会重新呈现，但现在它看起来像一个“普通”按钮，因为jQuery Mobile添加的所有CSS现在都已丢失。

所以...我知道问题在于，因为整个页面没有重新加载，jQuery Mobile不会拦截回发并向按钮注入必要的CSS。

我不知道的是如何修复它。

我想我知道足够在回发上做一个javascript调用，但我不知道jQuery Mobile例程要调用什么（我假设有某种document.Ready（）调用，但是如果我能找到的话它）为了解决它。

我确实在jQuery Mobile网站上发布了这个问题但没有得到回复。在这一点上，我有点绝望，因为客户正在呼吸着我的脖子。

任何帮助都将不胜感激。

Answer 1

我找到了解决方案，并希望将其发布给其他人。我的解决方案有点矫枉过正，但在大多数情况下应该“正常工作”。在一天结束时，您需要做的是在需要更新的元素上触发“创建”事件。这就是jQuery Mobile正在寻找的东西以及重新解析HTML的方法。以下语句将抓取页面上的所有<div>（自然包括所有更新面板），并将重新呈现其中的任何控件。我将它添加到后面的ASP.NET代码中的提交按钮的Click（）事件中。（请注意，将javascript添加到按钮的客户端onclick（）似乎不起作用）

ScriptManager.RegisterStartupScript(Page, GetType(), "temp", "<script type='text/javascript'>$('div').trigger('create');</script>", false);

请注意，如果您对要重新解析的内容有更好的处理，那么您可以定位需要更新的确切<div>，而不是抓取页面上的每个<div>。并只更新所需的内容。这将提供更好的性能，但即使在复杂的页面上解析也非常快。

Answer 2

UpdatePanel本质上意味着您的站点中运行了ASP.NET AJAX 每次部分回发后都会调用pageLoad ( not exactly DOM Ready ) 。使用该事件并在其中编写纠正代码。

function pageLoad(sender, args){
    //Jquery Code
}

P.S：UpdatePanels are really dangerous。我已经分享了我的眼泪请不要在将来与其他图书馆一起使用。

希望这有帮助，真的。

Answer 3

您需要在浏览器中管理服务器UpdatePanel控件的部分页面更新。了解更多：Sys.WebForms.PageRequestManager。请检查我两页的（主和子）代码。

母版页

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="App.Site" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title>NFP5</title>
    //All CSS references

    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
    </head>
<body>
<form id="frmPage" runat="server">
    <asp:ScriptManager ID="sm1" runat="server">

    </asp:ScriptManager>

    <asp:ContentPlaceHolder ID="MainContent" runat="server">

    </asp:ContentPlaceHolder>
</form>
<script><!--All JSreferences--></script>
</body>
</html>

子页面

<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Site.master" CodeBehind="WebForm1.aspx.cs" Inherits="App.WebForm1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
    <script type="text/javascript">
        function pagLoad() {
            $('.txtID').Zebra_DatePicker({
                format: 'd/m/Y',
                default_position: 'below'
            });
        }
        $(document).ready(pagLoad);
    </script>
</asp:Content>

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <script type="text/javascript">
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(pagLoad);
    </script>
    <asp:UpdatePanel ID="UpdatePanel2" runat="server">
        <ContentTemplate>
            <asp:TextBox ID="txtID" runat="server" CssClass="validate[required] txtID"></asp:TextBox>
            <asp:Button ID="Button1" runat="server" OnClientClick="javascript:$('#frmPage').validationEngine('attach'); return $('#frmPage').validationEngine('validate');" Text="Button" />
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

jQuery Mobile和ASP.NET Update Panel问题

3 个答案: