在 asp.net 和 c# 中从 webform 调用多个模式弹出窗口答案

【问题标题】：Call multiple modal popups from webform in asp.net and c#在 asp.net 和 c# 中从 webform 调用多个模式弹出窗口
【发布时间】：2016-06-19 14:51:57
【问题描述】：

我正在尝试从同一个网络表单调用多个模式弹出窗口，但我不想将它们全部写入同一个 aspx 文件中，所以这就是我考虑使用母版页的原因。

这是目前为止的部分代码：

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Trabajadores.master.cs" Inherits="Trabajadores" %>


    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <asp:ContentPlaceHolder ID="Modal" runat="server">
                </asp:ContentPlaceHolder>
            </div>
        </div>
    </div>
    <!-- Modal -->


                <ul class="nav nav-pills nav-stacked small">
                    <li><a href="~/Empresas/Trabajadores/Ventanas/Empresas.aspx" data-toggle="modal" data-target="#myModal">Empresas</a></li>
                    <li><a href="~/Empresas/Trabajadores/Ventanas/Obras.aspx" data-toggle="modal" data-target="#myModal">Obras</a></li>
                    <li><a href="~/Empresas/Trabajadores/Ventanas/Haberes.aspx" data-toggle="modal" data-target="#myModal">Haberes</a></li>
                    <li><a href="~/Empresas/Trabajadores/Ventanas/Descuentos.aspx" data-toggle="modal" data-target="#myModal">Descuentos</a></li>
                </ul>

这是模式弹出窗口之一：

<%@ Page Title="Haberes" Language="C#" MasterPageFile="~/Trabajadores.Master" AutoEventWireup="true" CodeFile="Haberes.aspx.cs" Inherits="Empresas_Trabajadores_Ventanas_Haberes" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="Modal" runat="server">

                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Login</h4>
                </div>
                <div class="modal-body">
                    <form>
                    <div class="form-group">
                        <label>Email address</label>
                        <input type="email" class="form-control" placeholder="Enter Email">
                    </div>
                    <div class="form-group">
                        <label>Password</label>
                        <input type="password" class="form-control" placeholder="Enter Password">
                    </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-default">Submit</button>
                </div>

</asp:Content>

但它不起作用。但是，我认为如果我使用母版页，它将重定向页面以打开模式弹出窗口，所以我想知道是否有办法在不重定向页面的情况下打开多个模式弹出窗口（所以也许我不应该使用母版页，而是一个 c# 函数）。

【问题讨论】：

MasterPages 用于布局（主题/菜单/导航窗格等）共享。您可以根据 jQuery/javascript 中的一些标准（如果它们不是太多）在页面中编写所有这些模态 html 以加载到弹出窗口中，或者使用诸如 jQuery 之类的异步方式调用服务器端服务并动态获取模态 html。

标签： c# asp.net master-pages bootstrap-modal

【解决方案1】：

您的模态弹出逻辑应包裹在父级 <div> 周围，该父级具有以下样式规则 class="modal fade"。

在下面的示例中，我在母版页中定义了两个不同的模式弹出窗口，那么从子页面调用它们所需要做的就是 call$('#modalPopupID').modal('show');

母版页：

%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="jqgrid_example.SiteMaster" %>

<!DOCTYPE html>
<html lang="en">
<head runat="server">
    <meta charset="utf-8" />
    <title><%: Page.Title %> - My ASP.NET Application</title>
    <asp:ContentPlaceHolder runat="server" ID="HeadContent" />
</head>
<body>
    <form runat="server">
        <div id="body">
            <asp:ContentPlaceHolder runat="server" ID="FeaturedContent" />
            <asp:ContentPlaceHolder runat="server" ID="MainContent" />
        </div>
    </form>
    <div class="modal fade" tabindex="-1" role="dialog" id="modal1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Modal 1</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label>Email address</label>
                            <input type="email" class="form-control" placeholder="Enter Email">
                        </div>
                        <div class="form-group">
                            <label>Password</label>
                            <input type="password" class="form-control" placeholder="Enter Password">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-default">Submit</button>
                </div>
            </div>
        </div>
    </div>
        <div class="modal fade" tabindex="-1" role="dialog" id="modal2">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Modal 2</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label>Email address</label>
                            <input type="email" class="form-control" placeholder="Enter Email">
                        </div>
                        <div class="form-group">
                            <label>Password</label>
                            <input type="password" class="form-control" placeholder="Enter Password">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-default">Submit</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

子页面：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ModalPopupExample.aspx.cs" Inherits="jqgrid_example.ModalPopupExample" MasterPageFile="~/Site.Master" %>


<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script type="text/javascript">
        $(function () {
        $('#modal1').modal('show');
        //Or uncomment the line below to show the other modal popup
        //$('#modal2').modal('show');
        });
    </script>
</asp:Content>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
</asp:Content>

【讨论】：