Bootstrap Modal-添加服务器代码ASP.Net

本文关键字：ASP Net 代码 服务器 Modal- 添加 Bootstrap | 更新日期: 2023-09-27 18:29:06

Net网络表单应用程序实现Bootstrap。目前，我在Bootstrap-Modal中显示了一个标签和一个文本框，我正试图将服务器c#文件中的数据发送到该文本框。由于某些原因，Modal会消失，并且不会在UI上显示任何内容。

ASPx文件

<!-- Button to trigger modal -->
<a href="#myModal" role="button" runat="server" class="btn btn-lg btn-success" data-toggle="modal">Launch demo modal</a>
<%--<asp:Button ID="Button1" role="button" type="button" runat="server" Text="Modal" class="btn btn-lg btn-success"  data-toggle="modal" data-target="#myModal"/>--%>
<!-- Modal -->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">Modal header</h3>
            </div>
            <div class="modal-body">
                <asp:Label ID="Label1" runat="server"></asp:Label>
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
                <button class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

C#文件

protected void Click_Me(object sender, EventArgs e)
{
    Label1.Text = "test label";
    TextBox1.Text = "text box text";
    modal_Img.Src = "test path";
}

请告知

ps：我需要使用更新面板吗？

Bootstrap Modal-添加服务器代码ASP.Net

更新面板可能不是最好的解决方案，因为只有部分html被更新，并且在部分回发后不会再次调用模态的Javascript/Jquery。

您需要在回发后再次调用Javascript。您可以调用打开Click_Me事件上的模态所需的Javascript。

    protected void Click_Me(object sender, EventArgs e)
    {
      // do stuff
      Label1.Text = "test label";
      TextBox1.Text = "text box text";
      modal_Img.Src = "test path";
      // make sure the modal opens
      ScriptManager.RegisterClientScriptBlock(this.Page, this.Page.GetType(), "script", "<script type='text/javascript'>$( document ).ready(function() { $('#MyModal').modal('show')});</script>", false);
    }
相关文章：