在 ASP.NET/VB.NET 中为触发模态弹出 window 的按钮添加服务器端事件

Question

我有一个按钮可以触发 aspx 页面中的模式弹出窗口 window。我想在单击按钮时用数据库中的内容填充 window。

喜欢，

单击按钮时，应执行后端代码，填充模态 window 然后显示模态 window。

如何做到这一点？

这是我试过的。

ASPX 页面：

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="WebApplication2.WebForm1" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script runat="server">
    Sub ServerButton_Click(ByVal sender As Object, ByVal e As EventArgs)
        myfunction()
        ClientScript.RegisterStartupScript(Me.GetType(), "key", "launchModal();", True)
    End Sub
</script>

<script type="text/javascript">
    var launch = false;
    function launchModal() 
    {
        launch = true;
    }
    function pageLoad() {
        if (launch) {
            $find("mpe").show();
        }
    }
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="ClientButton" runat="server" Text="Launch Modal Popup (Client)" />
    <asp:ScriptManager ID="asm" runat="server" />
    <asp:Panel ID="ModalPanel" runat="server" Width="500px">
        This is my modal window<br />
        <asp:Label runat="server" ID="mylbl" />
        <br />
    <asp:Button ID="OKButton" runat="server" Text="Close" />
    </asp:Panel>

    <cc1:ModalPopupExtender ID="mpe" runat="server" TargetControlId="ClientButton" PopupControlID="ModalPanel"  OkControlID="OKButton" />

</div>
</form>
</body>
</html>

隐藏代码：

Imports System.Web
Imports System.Web.Services
Imports System.Web.Script.Services
<WebMethod>
Protected Sub myfunction()
    mylbl.Text = "mylabel text"
End Sub

在上面的代码中，我试图从客户端脚本访问一个方法（myfunction），该脚本用 "runat=server" 声明。

Answer 1

好的。我已经在 Monodevelop 中创建了一个解决方案（但您可以毫无问题地将它迁移到 VS，只需移动文件夹和文件）。我想你想要这样的东西：

按钮 "Show popup" 在页面中，在同一层，有一个 webusercontrol，这是弹出窗口（好吧，实际上 webusercontrol 在 divs 里面，我把这些 divs 遵循 bootstrap 模态的结构):

    <style type="text/css">
        .popup-someEntity{width: 500px;}
    </style>

</asp:Content>
<asp:Content ContentPlaceHolderID="cphContent" ID="cphContentContent" runat="server">

    <div class="page-header">
        <h3>My POPUP:</h3>
    </div>

    <!-- ======== POPUP : set Visible property to false. this must be shown from codebehind depending of an event... === -->
    <div class="">
        <asp:LinkButton ID="btnShowPopup" runat="server" OnClick="btnShowPopup_Click" 
            CssClass="btn btn-primary" 
            Text="Show Popup"></asp:LinkButton>
    </div>

    <!-- Modal popup: Note that you must wrap the control with outer divs -->
    <div class="modal fade"  tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">                    
                </div>
                <div class="modal-body">

                    <uc1:WucPopup runat="server" id="WucPopup"  Visible="false"/>

                 </div>
                <div class="modal-footer">
                </div>
            </div>
        </div>
    </div>
    <!-- /Modal popup: -->
</asp:Content>

当你点击按钮 "Show popup" 然后在后面的代码中执行这个：

protected void btnShowPopup_Click(object sender, EventArgs e)
{
  this.WucPopup.ShowControl();
}

正如您在 html 代码中注意到的那样，"WucPopup" 是 Visible=False，因此 ShowControl() 方法填充 table 并更改为 Visible=true。下面是 WucPopup 后面的代码：

protected void Page_Load(object sender, EventArgs e)
{
}

protected void btnClose_Click(object sender, EventArgs e)
{
    CloseControl();
}
public void CloseControl()
{
    this.Visible = false;
}


public void ShowControl()
{
    PopulateTable();
    this.Visible = true;
}
private void PopulateTable()
{
    List<SomeEntity> collection = new List<SomeEntity>()
    {
        new SomeEntity()
        {
            Date = DateTime.Now.ToFileTimeUtc().ToString(),
            Col1 = "Col 1", Col2 = "Col 2", Col3 = "Col 3"
        },
        new SomeEntity()
        {
            Date = DateTime.Now.ToFileTimeUtc().ToString(),
            Col1 = "Col 1", Col2 = "Col 2", Col3 = "Col 3"
        },
        new SomeEntity()
        {
            Date = DateTime.Now.ToFileTimeUtc().ToString(),
            Col1 = "Col 1", Col2 = "Col 2", Col3 = "Col 3"
        }
    };
    PagedDataSource pds = new PagedDataSource(){DataSource= collection};
    myRepeater.DataSource = pds;
    myRepeater.DataBind();
}

如您所见，有一个 ID="myRepeater 的 Repeater 控件。这是 html 代码（这里我再次放置 divs 以遵循 bootstrap' 的结构模态):

 <div class="myPopup popup-someEntity">

    <!-- ============ Modal header ============ -->
    <div class="modal-header">

        <!-- == Close button == -->
        <asp:LinkButton ID="lnkBtnClose" runat="server"  ToolTip="Close"
            CssClass="close"  aria-hidden="true"
            OnClick="btnClose_Click">
            <i class="fa fa-remove"></i>
        </asp:LinkButton>
        <!-- == /Close button == -->

        <h4 class="modal-title" id="myModalLabel">            
            My Modal Popup
        </h4>

    </div>
    <div class="row-separator"></div>
    <!-- ============ /Modal header ============ -->



    <!-- === Table == -->
    <div class="div-row">
        <div class="row-fluid table-responsive">
            <table class="table table table-striped table-bordered table-hover">
                <thead>
                    <tr>
                        <th>Date UTC</th>
                        <th>Col2</th>
                        <th>Col3</th>
                        <th>Col4</th>

                    </tr>
                </thead>
                <tbody>     

            <asp:Repeater ID="myRepeater" runat="server">
                <HeaderTemplate>                    
                </HeaderTemplate>
                <ItemTemplate>
                    <tr>
                        <td><%# Eval("Date") %></td>
                        <td><%# Eval("Col1") %></td>
                        <td><%# Eval("Col2") %></td>
                        <td><%# Eval("Col3") %></td>
                    </tr>
                </ItemTemplate>
                <FooterTemplate>                    
                </FooterTemplate>
            </asp:Repeater>
                </tbody>
            </table>
        </div>
    </div>
    <!-- === /Table == -->
</div>

最终生成的html（table填充和可见的弹出窗口）将返回到client.As你已经注意到弹出窗口的html代码控件有一个 div 作为容器，它必须 css classes，myPopup 和 popup-someEntity，我使用第一个作为选择器（所有 div class 将显示为弹出窗口），我使用第二个来设置弹出窗口的宽度）。现在在客户端使用 jquery 我这样做：

 $(document).ready(function () {

    //This uses bootstrap 3 modal:
    if ($(".myPopup").length > 0) {
        $(".myPopup").each(function (popupIndex) {
            var $curPopup = $(this);
            var $modalBody = $curPopup.parent();
            var $modalContent = $modalBody.parent();
            var $modalDialog = $modalContent.parent();
            var $modal = $modalDialog.parent();

            if ($curPopup.children('.modal-header').length > 0) {

                //Hide external modal-headers:
                if ($modalContent.children('.modal-header').length > 0) {
                    $modalContent.children('.modal-header').each(function () {
                        var $externModalHeader = $(this);
                        $externModalHeader.css({ 'display': 'none' });
                    });
                }
            }

            var contentWidth = $curPopup.width();
            contentWidth += 40; //add padding width
            $modalDialog.width(contentWidth);


            $modal.modal({ show: true, backdrop: "static", keyboard: false }).draggable({
                handle: ".modal-header"
            }); /*.on('shown.bs.modal', function () {
                $modalContent.css({ width: contentWidth + 'px', height: 'auto', 'max-height': '100%' });
                });*/

        });//each
    }//if myPopup 
});//ready

瞧，显示弹出窗口！

我省略了一些东西（例如 bootstrap、font-awesome、.. 我在示例中使用过）但我相信您很快就能理解代码。

您可以从这里下载代码： Modal popup with webforms C# (Monodevelop project)

在 ASP.NET/VB.NET 中为触发模态弹出 window 的按钮添加服务器端事件

Adding server side event for the button which triggers modal popup window in ASP.NET/VB.NET

asp.net

.net

vb.net

modalpopupextender