如何从代码隐藏中触发 jQuery 函数？答案

【问题标题】：How to trigger a jQuery function from code-behind?如何从代码隐藏中触发 jQuery 函数？
【发布时间】：2013-07-19 14:03:54
【问题描述】：

我正在尝试从后面的 ASP.NET 代码调用一个 jQuery 函数。

我不希望它被 jQuery click 事件触发；我想在我的控件后面的代码中触发jQuery函数--->“显示对话框”。

$(document).ready(function () {
    $("#LinkButton1").click(function(){
        $("#hightlight_show1").toggle();
    });

    var dialog1 = $("#Add").dialog({
            autoOpen: false,
            width: 620,
            height: 400
    });

    // Move the dialog back into the <form> element 
    dialog1.parent().appendTo(jQuery("form:first"));

    $("#BT_add").click(function () {
       $("#Add").dialog("open");
       return false;
});

我尝试过类似的方法，但没有成功：

$(document).ready(function () {
    $("#LinkButton1").click(function () {
        $("#hightlight_show1").toggle();
    });

    var dialog1 = $("#Add").dialog({
        autoOpen: false,
        width: 620,
        height: 400
    });

    // Move the dialog back into the <form> element 
    dialog1.parent().appendTo(jQuery("form:first"));

    function a() {
        $("#Add").dialog("open");
        return false;
    };

});

我在后面的代码中使用 Page.ClientScript.RegisterStartupScript() 指定了这一点：

Page.ClientScript.RegisterStartupScript(
    this.GetType(),
    "a",
    "a();",
    true
 );

【问题讨论】：

标签： c# javascript jquery asp.net

【解决方案1】：

首先，将您的function a() { 移出$(document).ready()。

但是您可能仍然对执行顺序有疑问。

如果这是一个完整的回发，则将 a() 调用与另一个 $(document).ready() 一起包含在您的 RegisterStartupScript 中。如果它是来自UpdatePanel 的部分回发，只要在第一次加载页面时正确创建了对话框，它就应该可以工作。

【讨论】：

您是否遇到任何错误？检查浏览器的 javascript 控制台。
我使用了不同的方法来解决它，在 jquery 上花费了太多时间。谢谢

【解决方案2】：

您无法从后面的代码触发 JavaScript 函数。您可以在 html 页面上定义 JavaScript 函数并使用 Control.Attributes.Add 在服务器端绑定单击事件。您将需要服务器控制来绑定事件，您可以通过 put runat="server"

使 html 控制服务器可访问

Javascript

function  YourFun(){
    $("#hightlight_show1").toggle();
}

背后的代码

hightlight_show1.Attributes.Add("onclick", "YourFun();");

【讨论】：

【解决方案3】：

服务器端 (c#) 操作似乎很难影响客户端 (jQuery) 事件。您将需要使用 ajax 从启动事件的服务器请求信息。

请记住，c# / ASP 代码在网络服务器上运行，它的工作只是根据请求将 HTML 发送到浏览器。之后，它的作用就基本完成了。 JavaScript 和 jQuery 等由 浏览器 解释，但仅在文档已经离开服务器很久之后。有一些“方法”可以让 c# 在非常松散的意义上触发 jQuery 事件，但最终你仍然必须认识到客户端（浏览器）和 Web 服务器之间的区别。

【讨论】：

【解决方案4】：

您在 document.ready 函数中声明 function a()。

Register.StartupScript 会将代码添加到 document.onload，您确定哪个事件正在触发（就绪或 onload）？

在 document.ready 之外声明它，它可能会起作用。像这样的：

<script type="text/javascript>

function a() {
    $("#Add").dialog("open");
    return false;
};

$(document).ready(function () {
     $("#LinkButton1").click(function(){
         $("#hightlight_show1").toggle();
     });

     // Move the dialog back into the <form> element 
     dialog1.parent().appendTo(jQuery("form:first"));

     var dialog1 = $("#Add").dialog({
         autoOpen: false,
         width: 620,
         height: 400
     });
});

【讨论】：

【解决方案5】：

这样做

标记

<script type="text/javascript">
    function ShowPopup(message) {
        $(function () {
            $("#dialog").html(message);
            $("#dialog").dialog({
                title: "jQuery Dialog Popup",
                buttons: {
                    Close: function () {
                        $(this).dialog('close');
                    }
                },
                modal: true
            });
        });
    };
</script>
<div id="dialog" style="display: none">
</div>
<asp:Button ID="btnShowPopup" runat="server" Text="Show Popup" OnClick="btnShowPopup_Click" />

背后的代码

  protected void btnShowPopup_Click(object sender, EventArgs e)
{
    string message = "Message from server side";
    ClientScript.RegisterStartupScript(this.GetType(), "Popup", "ShowPopup('" + message + "');", true);
}

下载 C# 和 VB 中的工作演示 here

【讨论】：

这可能是一个很好的解决方案，但它不适用于我的情况，也许我在其他地方搞砸了。
您使用的是哪个版本的J-query库。如果您的东西在更新面板中，那么您需要在结束请求函数中再次初始化对话框。

【解决方案6】：

不确定这是否真的是您的问题，但在“您尝试过的代码”中，您的脚本标签声明中缺少右双引号 (")。

你写道：type="text/javascript

但从未关闭声明...这肯定会使原本可以工作的 JS 搞砸。

【讨论】：