Question

在asp.net webform中，我有一些jquery控制页面上元素的位置。由于这是一个webform，其中一些控件与服务器通信以使jquery工作，我将控件嵌套在AJAX UpdatePanel中，以防止回发重置我的控件。

ASPX：

<asp:UpdatePanel ID="searchupdatePanel" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <div id="searchholder" >
            <div id="searchoptions">
                <a href="#" id="btnClose">Close</a> <a href="#" id="btnAdvanceSearch">Advanced Search</a>
                <br />
                <a href="#" id="btnFilters">Filters</a>
            </div>
            <div id="search" class="searchcontainer">
                <asp:TextBox ID="tbsearchterm" CssClass="watermark" runat="server" OnTextChanged="tbsearchterm_TextChanged" />
                <div class="buttons">
                    <asp:LinkButton runat="server" Text="Search" class="button search-big" ID="btnSearch" OnClick="btnSearch_Click" />
                    <asp:LinkButton runat="server" Text="Fx" class="button left big" ID="btnOperators" />
                    <asp:LinkButton runat="server" Text="Save" class="button right big" ID="btnSave" />
                </div>
            </div>
            <div id="divAdvSearch">
            </div>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

<div id="divBody">
    <asp:UpdatePanel runat="server" UpdateMode="Always">
        <ContentTemplate>
            <div id="divSearchResults" visible="true" runat="server">
                <uc:SearchResultsControl ID="SearchResultsControl" runat="server"></uc:SearchResultsControl>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>

当点击搜索按钮时，我修改了搜索控件的css类，以重新定位我的搜索div层，即更新面板“searchudpatepanel”

searchcontrol.js

$(function () {
    $("#searchupdatePanel").addClass("searchmenubar");
    $("#btnClose").hide();
});

$(function () {
    $("#btnSearch").click(function () {
        $(".searchmenubar").animate({ "margin-top": "5px" }, "fast");
        $("#btnAdvanceSearch").show();
        $("#btnFilters").show();
        $("#btnClose").hide();
        $("#divAdvSearch").hide();
        alert("search");
    });
});

按钮单击还调用服务器端代码以在名为SearchResultsControl（第二个更新面板）的用户控件中检索和填充结果

我感到困惑的是，当searchResult控件加载了结果时，对jquery类的所有引用都将丢失。因此，隐藏的每个div元素或被调用的按钮单击都将停止工作。在调试中完成此操作我可以看到，当调用用户控件时，第二次调用default.aspx文件的Page_Load。我假设这个部分负载正在丢弃对js文件的引用，我只是不知道如何纠正这个问题。

我在页面加载中尝试使用IsStartupScriptRegistered进行测试以查看js是否被调用

string csname = "PopupScript";
Type cstype = this.GetType();

ClientScriptManager cs = Page.ClientScript;

if (!cs.IsStartupScriptRegistered(cstype, csname))
{
    StringBuilder cstext1 = new StringBuilder();
    cstext1.Append("<script type=text/javascript> alert('Hello World!') </");
    cstext1.Append("script>");
    cs.RegisterStartupScript(cstype, csname, cstext1.ToString());
}

这里关于页面的初始化我会看到弹出窗口然而当加载UserControl时我会在页面加载中第二次通过这个但是警报从未显示（我假设这是到期的）部分加载，因此浏览器认为脚本已经注册）。

我能想到的另一件事是我在加载自定义结果集时覆盖正在加载的UserControl的渲染。

protected override void Render(HtmlTextWriter htw)
{
    if (IsPostBack)
    {
        QueryResponse qr = iu.GetSearchResults(SearchTerm);
        int num = qr.TotalMatchesReturned;

        SearchData sd = new SearchData();
        htw.Write("<table style='width: 100%; height:100%'><tr ><td style='width: 50%'>");
        htw.Write("<div id='divResultDetail' runat=server >");
        htw.Write("<script type='text/javascript' src='../js/paging.js'></script><div id='pageNavPosition'></div><table id='results'>");

        for (int i = 0; i < num; i++)
        {
            ...edited for brevity.

关于为什么我丢失对jquery函数的引用的任何建议或指导？我没有使用母版页，所以我没有使用ASP ScriptManager。

在使用UpdatePanel之前，这一切都运行良好。我将“精细”定义为：回发每次重新加载/注册js文件，因此它们被重置（这没关系）。但是，现在需要进行一些其他更改，我需要考虑利用UpdatePanel s。

感谢您的任何建议或想法。

Answer 1

您可以使用live或delegate jQuery方法将处理程序绑定到添加到页面的任何元素。

或者，如果除了原始页面加载之外，如果您需要在每次部分回发后始终进行某些设置，则可以使用pageLoad方法而不是document.ready。 ASP.NET在页面加载和每次部分回发之后调用它。

function pageLoad()
{
    // Setup code here
}

查看此文章了解更多信息： http://encosia.com/document-ready-and-pageload-are-not-the-same/

Answer 2

您需要使用delegate进行按钮点击。它将确保所有元素存在和将来都将绑定到事件处理程序。

http://api.jquery.com/delegate/

$("body").delegate("#btnSearch", "click", function () {
    $(".searchmenubar").animate({ "margin-top": "5px" }, "fast");
    $("#btnAdvanceSearch").show();
    $("#btnFilters").show();
    $("#btnClose").hide();
    $("#divAdvSearch").hide();
    alert("search");
});

Answer 3

更新面板完成更新后，您需要重新绑定元素。像这样，

var prm = Sys.WebForms.PageRequestManager.getInstance();

    prm.add_endRequest(function () {
        $('#add').click(function () {              
        });

        $('#addPrevious').click(function () {               
        });
    });

希望这有帮助。

如何纠正部分回发时丢失的ASP.NET webform jquery引用

3 个答案: