Question

我创建了以下功能：使用加载的excel文件中的数据创建用于按钮单击的表，并将此表保存到xml文件中。保存后我想用一些消息显示模态窗口（bootstrap）。由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元素在外面），但它没有帮助。

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

Answer 1

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

Answer 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
}

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

2 个答案: