从 CodeBehind 调用 JavaScript 函数不适用于 FileUpload答案

【问题标题】：Calling JavaScript Function From CodeBehind doesn't work with FileUpload从 CodeBehind 调用 JavaScript 函数不适用于 FileUpload
【发布时间】：2015-07-23 03:46:22
【问题描述】：

我正在创建以下功能：使用已加载的 excel 文件中的数据在按钮单击时创建表，并将此表保存到 xml 文件。保存后，我想显示带有一些消息的模式窗口（引导程序）。由javascript函数管理的窗口，我从后面的代码中调用了这个函数。

这是我的 HTML 页面：

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="../js/bootstrap.js" type="text/javascript"></script>
</head>
<body>
  <form id="form1" runat="server">

    <div id="modalSaved" class="modal hide fade">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        </div>
        <div class="modal-body">
            <p>
                Changes were saved successfully!
            </p>
        </div>
        <div class="modal-footer">
            <button type="button" runat="server" id="ok" class="btn btn-default" data-dismiss="modal">OK</button>
        </div>
    </div>

    <asp:ScriptManager ID="ScriptManager" runat="server"></asp:ScriptManager>
    <div id="file">               
      <asp:FileUpload runat="server" ID="OpenFile" accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />
    </div>

    <div id="actions" runat="server">
      <asp:Button ID="CreateRepBtn" runat="server" OnClick="CreateRepBtn_Click" />
      <asp:Button ID="SaveToXml" runat="server" OnClick="SaveToXml_Click" />
    </div>

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

  </form>
</body>

以及调用javascript函数的C#代码：

protected void SaveToXml_Click(object sender, EventArgs e)
{
   /* save to xml code */   
   ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "openModalSaved();", true);
}

问题是模式窗口没有出现。我支持它以某种方式与 FileUpload 元素连接，因为在没有 FileUpload 的另一个页面上，这样的代码可以完美运行。

我也尝试过使用 UpdatePanel（FileUpload 元素在外面），但没有帮助。

有人知道如何解决这个问题吗？欢迎任何建议。

【问题讨论】：

为什么不将#modalSaved 的runat 属性设置为服务器，然后直接从后面的代码中控制其可见性
尝试 RegisterClientScriptBlock 而不是 RegisterStartupScript。
@MairajAhmad 我已经在所有页面元素之前替换了脚本块并尝试了这个：ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "Pop", "openModalSaved();", true) .但不幸的是它并没有帮助

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

【解决方案1】：

    protected void SaveToXml_Click(object sender, EventArgs e)
{  
   ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "$(function(){openModalSaved();});", true);
}

【讨论】：

【解决方案2】：

对于您的各种解决方案可能无法正常工作，请稍微更改实现并从按钮单击回调中删除脚本注册。

添加包含客户端脚本的标记隐藏占位符，并在文档准备好时调用 openModalSaved：

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

 <asp:PlaceHolder id="plhFileUploaded" runat="server" Visible="false">
 <script type="text/javascript">
        $(document).ready(function() {
            openModalSaved();
        });
        </script>
    <asp:PlaceHolder>

后面的代码：

protected void SaveToXml_Click(object sender, EventArgs e)
{
   /* save to xml code */   
   plhFileUploaded.Visible = true;//this will render your placeholder contacting the script
}

【讨论】：

对不起，检查控制台错误或其他东西，看看你的事件点击是否工作只需放入占位符脚本如果保存后没有出现警报，那么你的底部回调有问题，调试你的代码，看看 page_load 和 button_click 事件会发生什么:)