代码之家 › 专栏 › 技术社区 › Ed James

更新面板内的javascript代码

updatepanel javascript asp.net c#

Ed James · 技术社区 · 16 年前

好的:我在ASPX页面上有一个更新面板,其中包含一个占位符。

在这个占位符中,我将根据某些外部条件(这是一个配置页)附加一个用户控件选择。

在每个用户控件中都有一个binducevents()javascript函数,它将各种jquery和javascript事件绑定到用户控件内的按钮和验证器。

我遇到的问题是用户控件的javascript无法识别。通常,当updatepanel回发时,会执行updatepanel中的javascript,但是页面找不到这些代码(我尝试通过firebug的控制台手动运行函数,但它告诉我找不到函数)。

有人有什么建议吗?

干杯,Ed.

编辑:

切断(但功能)示例:

Markup:

<script src="/js/jquery-1.3.2.min.js"></script>
  <form id="form1" runat="server">
    <div>

    <asp:ScriptManager ID="Script" runat="server" />

    <asp:Button ID="Postback" runat="server" Text="Populate" OnClick="PopulatePlaceholder" />

    <asp:UpdatePanel ID="UpdateMe" runat="server">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="Postback" EventName="Click" />
    </Triggers>
        <ContentTemplate>
            <asp:Literal ID="Code" runat="server" />
            <asp:PlaceHolder ID="PlaceMe" runat="server" />
        </ContentTemplate>
    </asp:UpdatePanel>
    </div>
 </form>

protected void PopulatePlaceholder(object sender, EventArgs e)
{
    Button button = new Button();
    button.ID = "Push";
    button.Text = "push";
    button.OnClientClick = "javascript:return false;";
    Code.Text = "<script type=\"text/javascript\"> function bindEvents() { $('#" + button.ClientID + "').click(function() { alert('hello'); }); }  bindEvents(); </script>";
    PlaceMe.Controls.Add(button);
}

您将看到该按钮不会弹出警报消息,即使代码出现在页面上。

编辑2:

好吧,为了说明这一点,生产代码比绑定到文本上的单个函数要复杂得多,并且包含大量

<%= Control.ClientID %>

将很难分解成非特定函数的代码位,因为它们都只在一个地方使用(我们讨论的是非常具体的验证和奇怪的弹出触发器+一些逻辑)。

5 回复 | 直到 16 年前

internet man 16 年前

去掉这个文本控件,并使用脚本管理器来注册脚本。你所做的工作不是出于同样的原因

window.document.getElementById('someId').innerHtml = "<script type=\"text/javascript\">alert('hey');</script>";

不起作用。试试这个:

protected void PopulatePlaceholder(object sender, EventArgs e)
{
    Button button = new Button();
    button.ID = "Push";

    button.Text = "push";
    button.OnClientClick = "return false;";


    string script = "function bindEvents() { $('#" + button.ClientID + "').click(function() { alert('hello'); }); }  bindEvents();";

  ScriptManager.RegisterClientScriptBlock(this.Page, typeof(SomeClass), Guid.NewGuid().ToString(), script, true);


  PlaceMe.Controls.Add(button);
}

RegisterClientScriptBlock的参数可能需要更改,但您已经了解了这一点。

Justin 16 年前

为了在一个更新面板启动后重新运行一些JS,我一直使用这个

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(
    function(sender, args) {
        //update whatever here
    });

另外,如果在更新面板中有对元素的任何引用,也可以在该函数中刷新这些变量,否则将使用不起作用的旧引用。

riffnl 16 年前

将脚本管理器(Ajax扩展)添加到您的页面中,并将脚本引用添加到该管理器中。管理器将在基于Ajax的页面加载(而不仅仅是初始加载)上加载每个脚本标记——将所有需要的javascript代码移到updatepanel中,您就完成了很多工作。

    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Path="../lib/jquery-1.2.6.pack.js" />

阅读问题不够好(没有样本)。看看我的新反应。

DanielAt 16 年前

也许你在找这个: http://api.jquery.com/live/

几乎与.bind()兼容(上面链接中列出的异常),但也绑定到稍后添加/更改的元素。

或者也可以给.delegate()一次尝试-不能直接替换.bind()调用,但在大多数情况下要快得多。

-1

riffnl 16 年前

不知何故,它似乎是你的代码。文本在翻译中迷失在某个地方——不知道具体细节,也许是设计造成的;不管怎样,下一个确实有效:

    protected void PopulatePlaceholder(object sender, EventArgs e)
    {
        Button button = new Button();
        button.ID = "Push";
        button.Text = "push";
        button.OnClientClick = "javascript:return false;";
//        Code.Text = 
        PlaceMe.Controls.Add(button);
        PlaceMe.Controls.Add(new LiteralControl("<script type=\"text/javascript\"> function bindEvents() { $('#" + button.ClientID + "').click(function() { alert('hello'); }); }  bindEvents(); </script>"));
    }

既然您已经从代码隐藏中构建了JavaScript代码,那么您也可以动态地添加控件。