Bootstrap Modal 使用 ASP.NET webforms 弹出

Question

我有一个 admissionform.aspx，其中有 5 个文本框和一个服务器控件提交按钮，我有一个带有“新建”按钮的 mainpage.aspx，mainpage.aspx 有一个 master page。

我希望当我单击 mainpage.aspx 上的新按钮时，它会打开在 admissionform.aspx 中具有 formfeilds 的模式弹出窗口。

是否可以在 ASP.NET 网络表单中访问它？

Answer 1

如前所述，您可以/可以在 iframe 中弹出页面。但是，问题就变成了如何关闭页面，因为 iframe 内部的操作不能用于关闭对话框。

下一步？

引导对话框看起来不错，但从开发人员的角度来看，它们是垃圾，而且很难处理。

所以，我建议对于对话框，“尤其是”您想要丰富内容的情况（例如添加新记录或弹出某种允许编辑数据的对话框形式？

好吧，一个 jQuery.UI 对话框可以启动 + 显示其他 .aspx 页面。这实际上工作得很好。然而，出现了几个问题。

最值得注意的是，此类页面在 jQuery.UI 中“启动”显示良好，但该页面中的任何回发都会折叠对话框。

第二期：

正确关闭页面然后在现有页面上运行代码可能是一个“挑战”。

那么，如何解决这个问题？

我建议你把有问题的aspx页面，采用用户控件。

基于现有页面的内容非常容易创建用户控件。

那么，最后的结果呢？

另一个页面可以继续工作，但现在将有 2 个部分。现有页面（比如 dmissionform.aspx）。并且该页面可以/将/使用/应该因此具有具有准入框等的用户控件

现在在任何其他页面（例如您的示例）中，您还可以放入用户控件。

如果需要，用户控件可以有回发。

那么，让我们做一个例子。

我有酒店的网格视图。我想要一个编辑按钮，点击后会弹出酒店编辑表单

所以，我们的网格视图看起来像这样：

    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
    DataKeyNames="ID" 
    CssClass="table table-hover" Width="60em" AllowPaging="True" GridLines="None"
    ShowHeaderWhenEmpty="true"  >
    <Columns>
        <asp:BoundField DataField="FirstName" HeaderText="FirstName" />
        <asp:BoundField DataField="LastName" HeaderText="LastName"   />
        <asp:BoundField DataField="City" HeaderText="City"  />
        <asp:BoundField DataField="HotelName" HeaderText="HotelName"  />
        <asp:BoundField DataField="Description" HeaderText="Description" />
        <asp:TemplateField>
            <ItemTemplate>
                <asp:Button ID="cmdEdit" runat="server" Text="Edit" CssClass="btn myshadow"
                    OnClick="cmdEdit_Click" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
    <PagerStyle CssClass="GridPager" />
</asp:GridView>

所以，我们有一个简单的 gv.

加载gv的代码是这样的：

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    If Not IsPostBack Then
        LoadGrid()
    End If

End Sub

Sub LoadGrid()

    GridView1.DataSource = Myrst("SELECT * FROM tblHotelsA ORDER BY HotelName")
    GridView1.DataBind()

End Sub

现在我们看到/有这个：

好的，现在编辑按钮代码：

Protected Sub cmdEdit_Click(sender As Object, e As EventArgs)

    Dim btn As Button = sender
    Dim gRow As GridViewRow = btn.NamingContainer
    Dim intPK As Integer = GridView1.DataKeys(gRow.RowIndex).Item("ID")

    Call EditOne(intPK)

End Sub

Sub EditOne(intPK As Integer)

    Me.EHotel.MyPk = intPK
    Me.EHotel.LoadData()

    ScriptManager.RegisterClientScriptBlock(UpdatePanel1, UpdatePanel1.GetType,
                                        "popedit", "popedit()", True)

End Sub

以上就是获取行数据库PK id，设置“用户控件”id加载数据，然后我们调用js代码弹出对话框。

上面的jQuery.UI对话框代码是这样的：

   <script>
       function popedit() {

            MyPWidth = "62em"

            var myDialog = $("#EditRecord");
            myDialog.dialog({
                title: "Edit Hotel",
                width: MyPWidth,
                modal: true,
                appendTo: "form",
                dialogClass : "dialogWithDropShadow",
                close: myclose
            });
       }

       function myclose() {
           var myDialog = $("#EditRecord");
           myDialog.dialog('close')
           // myDialog.find("form").remove();
           // destory the instance, but only
           // if exists (if we dont' clean up then button 
           // clicks don't work on 2nd use of dialog)
           if (myDialog.hasClass('ui-dialog-content')) {
               myDialog.dialog('destroy');
           }
       }

所以，在页面上（在网格视图下方），我们放入了一个简单的 div，在 div 的内部，我们有用户控件。 （或内容）。

所以，这个：

        <div id="MyEditArea" runat="server">

            <uc1:MyEditHotelC ID="EHotel" runat="server"
                MyEditArea="MyEditArea"
                MyGridArea="MyGridArea"
                MyTable="tblHotelsA"
                MyTitle="Edit Hotel Informaton" />

        </div>

所以，效果和结果是这样的：

还有几件事：

作为一般规则，您“弹出”的页面不能有回发。但是，如果您将 div 和用户控件包装在一个更新面板中，那么它就可以有回发，而且您通常需要这种能力。

但是，通常我会利用回发这一事实来发挥我的优势，因为任何回发通常都会关闭（折叠）对话框。所以，在某些情况下，这正是我们想要的。

所以，我在这里建议两种方式：

将标记推送到 div 中，您“隐藏”在页面上。

例如：

在编辑时将带有标记的 div 说成“pop”：

<div id="EditRecord" runat="server"
    style="float: left; display: none;border:solid 2px;padding:15px;border-radius:20px" clientidmode="Static" >
<br />
<div style="float: left" class="iForm">

    <label>HotelName</label>
    <asp:TextBox ID="txtHotel" runat="server"  Width="280">
    </asp:TextBox>
    <br />
    <label>First Name</label>
    <asp:TextBox ID="tFN" runat="server"  Width="140"></asp:TextBox>
    <br />
    <label>Last Name</label>
    <asp:TextBox ID="tLN" runat="server"  Width="140"></asp:TextBox>
    <br />

   etc. etc. etc.

然后当然 jQuery.UI 代码将如下所示：

        <script>
            function popedit() {

                var myDialog = $("#EditRecord");
                myDialog.dialog({
                    title: "Edit Hotel",
                    width: "62em",
                    modal: true,
                    appendTo: "form",
                    dialogClass: "dialogWithDropShadow",
                    close: myclose
                });
            }

            function myclose() {
                var myDialog = $("#EditRecord");
                myDialog.dialog('close')
                if (myDialog.hasClass('ui-dialog-content')) {
                    myDialog.dialog('destroy');
                }
            }

但是，如前所述，如果您“想要”另一个页面，那么您当然可以创建一个用户控件。 （这样你就不必从你想要弹出的其他页面上剪切和粘贴一大堆代码和标记）。

最后但同样重要的是：

您可以使用 jQuery.UI 弹出另一个 .aspx 页面，但在大多数情况下必须重新设计该页面，并且不执行任何回发才能正常运行。

这在很大程度上取决于其他页面的作用。 （同样，iFrame 是一个可能的选择，但我认为只需将您想要弹出的内容放在一个“div”中是最简单的。但是，对于编辑表单等，以及需要使用更多页面的页面（或可能会使用），然后如前所述，获取其他页面的“内容”，转换为用户控件。然后将该 UC 放入其他现有页面，以便它可以继续作为有效 URL 以及任何其他地方工作你需要通过 jQuery.UI 的“相同”弹出对话框，然后我认为将“其他”页面内容部分转换为 UC 是一个不错的选择，从那时起你可以重新使用该页面并使用 jQuery.UI 来弹出这样的页面。