单击按钮时调用 JavaScript 函数的代码 - C#答案

【问题标题】：Code Behind calling a JavaScript function on a button click - C#单击按钮时调用 JavaScript 函数的代码 - C#
【发布时间】：2016-05-18 06:25:40
【问题描述】：

我有一个调用引导模式弹出窗口的 Js 函数。我在单击按钮时从后面的代码中调用此 Js 函数。问题是当我单击按钮时它显示模式弹出窗口，但是当我导航到另一个页面时（当我单击另一个按钮时，它导航到谷歌文档阅读器）并返回主页，它又是无需单击任何按钮即可加载弹出窗口。谁能帮我解决这个问题。

JS函数

<head>
 <script type="text/javascript">
            function showModal() {
                $('#viewOc').modal();
            };
    </script>
</head>

模态弹出代码

 <div class="modal fade" id="viewOc" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4>TRIAL</h4>
                </div>
                <div class="modal-body">
                    LOREM IPSUM
                </div>
                <div class="modal-footer">
                    <a class="btn btn-primary" data-dismiss="modal">
                        Close
                    </a>
                </div>
            </div>
        </div>
    </div>

后面的代码

 protected void LinkButton1_Click(object sender, CommandEventArgs e)
            {
                //some operations here
                string script = "window.onload = function() { showModal(); };";
                ClientScript.RegisterStartupScript(this.GetType(), "modalShow", script, true); 
            }

HTML代码

<asp:LinkButton ID="LinkButton1" runat="server" Text="Click Here" CausesValidation="false" commandArgument='<%#Eval("value")%>' OnCommand="LinkButton1_Click"/>

Google Docs 按钮点击事件

 protected void btnView_View(object sender, CommandEventArgs e)
        {
            //not sure if the below code is correct or wrong. But as of now im using this in my application. Didnt try it on server yet.
            string path = e.CommandArgument.ToString();
            Response.Redirect("http://docs.google.com/viewer?url=" + Server.UrlEncode(path),true);
        }

页面加载

protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                IndexDocuments();

            }
        }

P.S：我知道类似的问题，但在 SO 中提出了不同的问题。由于我没有足够的声誉来评论这个问题，我不得不发表一个新帖子。

【问题讨论】：

标签： javascript c# html asp.net twitter-bootstrap

【解决方案1】：

你应该在按钮点击时调用模型

$('buttonID').click(function(){ $('modalID').modal('show'); });

您正在调用 window.onload 上的模式，这就是为什么它在页面加载时显示弹出窗口的原因。

【讨论】：

我必须在后面的代码或 JS 函数中更改这个吗？
在JS中进行修改，只需写$('buttonID').click(function(){ $('#viewOc').modal('show'); }); ，当您不需要在模态中显示任何动态数据时，无需从后面的代码中调用它，JS会完成所有工作。
所以我只需要在 JS 中进行此更改并保持按钮单击事件不变并删除调用方法？
不。我也试过了。它没有打开任何模式弹出窗口
但是我需要从后面的代码中获取一些数据，然后在模态弹出窗口中显示它。所以我认为我不能使用你说的方法

【解决方案2】：

Vishal 在下面提到了一种更好的处理方法。

$('buttonID').click(function(){ $('modalID').modal('show'); });

您可以使用带有上述代码的普通 HTML 按钮，而不是使用 ASP 按钮。

谢谢，苏维克

【讨论】：

protected void btnView_View(object sender, CommandEventArgs e) { string path = e.CommandArgument.ToString(); Response.Redirect("http://docs.google.com/viewer?url=" + Server.UrlEncode(path),true); }

【解决方案3】：

每次加载窗口时，您都会绑定 showModal()。像这样更改代码隐藏：

protected void LinkButton1_Click(object sender, CommandEventArgs e)
        {
            //some operations here
            ScriptManager.RegisterStartupScript(this, this.GetType(), "modalShow", "showModal()", true); 
        }

【讨论】：

我试过这个。但如果我使用此代码，它从未显示模式弹出窗口。
抱歉，我不知道您使用的是“ClientScript”。它应该与 ScriptManager.RegisterStartupScript 一起使用
我什至试过这个..它没有显示任何模式弹出窗口..我不知道为什么会这样。仅当我使用 window.onLoad 时才显示模式弹出窗口
我用您提供的内容创建了一个简单的页面，它对我有用。您能从开发者控制台看到任何错误（如果您使用的是 Chrome，请按 F12）？
对我来说，它会抛出这样的错误。 Home.aspx:277 Uncaught ReferenceError: showModal is not defined

【解决方案4】：

添加 js 和 css 引用

<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"> </script>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<script type="text/javascript">
        function showModal() {
            $('#viewOc').modal();
        };
</script>

</head>

使用此代码：

protected void LinkButton1_Click(object sender, CommandEventArgs e)
{
    //some operations here
    if(!ClientScript.IsStartupScriptRegistered("JSScript"))
    {
      ClientScript.RegisterStartupScript(this.GetType(),"JSScript",
      @"<script type='text/javascript'>showModal()</script>");
    } 
}

【讨论】：

试过这个。它没有打开任何弹出窗口。
您是否将 jquery 和 bootstrap js 和 css 文件放在了顶部
是的.. 将它们放在顶部后，我尝试过，我正面临这个问题。 $(...).modal 不是函数
您是否检查了我更新的答案作为所有内容以及必须包含的位置。请尝试一下
嗨，Karthik。将所有 bootstrap.css、jquery 和 js 脚本的位置更改为标题后，我尝试了两种代码。一个是你的，另一个是 Neo Nguyen 的。两者的行为方式与我在 Neo Nguyen 中提到的相同cmets..你可以看看那些 cmets 一次。