首先，你不要展示、提及或分享你正在使用的模态对话系统。（并且有大量的船只可供选择）。

此示例代码假定 jQuery，并且 jQuery.UI 已安装且可用。

当然，问题是如果你有一个按钮，当点击它时会弹出一个对话框？好吧，如果你然后回发运行一些服务器端代码，那么你会得到一个全新的网页重新加载，因此你的对话框弹出窗口将消失。

然后是第二种情况，您有一个弹出对话框，然后单击该对话框中的 asp.net 按钮（服务器端按钮）。再一次，当你点击这样的按钮时，你再次得到一个回发，因此结果再次是整个浏览器重新加载，因此，任何弹出对话框都将再次关闭。在某些情况下，您可能希望对话框保持打开状态。

所以，这里有 2 种不同的情况。 但是，让我们来看看第二种情况。 所以，逻辑：

单击一个按钮（服务器端）。 加载并获取一些数据 - 填写一些控件，然后弹出对话框。

在此示例中，让我们使用组合框来代替按钮单击。 它将回发。（就像点击按钮一样）

然后，我们使用代码加载控件，然后弹出对话框。

因此，我们的标记将有一个下拉列表（用于选择酒店）。

该标记：

        <h3>Select Hotel to Edit</h3>

        <asp:DropDownList ID="cboHotel" runat="server"
            DataValueField="ID"
            DataTextField="HotelName"
            AutoPostBack="true"
            OnSelectedIndexChanged="cboHotel_SelectedIndexChanged" 
             Width="261px"                
            >
        </asp:DropDownList>

在我们的页面加载事件中，我们加载上面的组合框

此代码：

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

    If Not IsPostBack Then
        ' this is the REAL first page load
        ' load up default controls, combo box etc.

        Dim strSQL As String =
            "SELECT ID, HotelName FROM tblHotelsA 
            ORDER BY HotelName"

        cboHotel.DataSource = MyRst(strSQL)
        cboHotel.DataBind()
        cboHotel.Items.Insert(0, "Select Hotel")

    End If

End Sub

好的，这样就可以处理我们的组合框了。

因此，在组合框的正下方，让我们添加一个“div”区域，并放入一堆控件。这可能是你的例子，或者其他什么。

但是，无论我们放入此“div”区域的内容，都将是我们的弹出区域。

因此，说一些控件来编辑酒店，如下所示：

        <br />
        <br />
        <div id="editarea" style="display: none" class="Ebox">

            <div style="float: left" class="iForm">
                <br />
                
                <label>Hotel Name</label>
                <asp:TextBox ID="txtHotel" runat="server" Width="280"></asp:TextBox>
                <br />

                <label>City</label>
                <asp:TextBox ID="tCity" runat="server" f="City" Width="140"></asp:TextBox>
                <br />

                <label>Province</label>
                <asp:TextBox ID="tProvince" runat="server" Width="75"></asp:TextBox>
                <br />

            </div>
            <div style="float: left; margin-left: 20px" class="iForm">
                <label>Description</label>
                <br />
                <asp:TextBox ID="txtNotes" runat="server" Width="400" TextMode="MultiLine"
                    Height="130px" f="Description"></asp:TextBox>
                <br />
                <asp:CheckBox ID="chkActive"  runat="server" style="margin-right:5px" /><b>Active</b> 

                <asp:CheckBox ID="chkBalcony" runat="server" style="margin-left:20px;margin-right:5px" /><b>Has Balcony</b>
            </div>
            <div style="clear: both"></div>


            <asp:LinkButton ID="cmdSave" runat="server" CssClass="btn myshadow"
                OnClick="cmdSave_Click">
                        <span class="fa fa-floppy-o fa-lg"> Save</span>
            </asp:LinkButton>


            <asp:LinkButton ID="cmdCancel" runat="server" class="btn myshadow" Style="margin-left: 15px">
                        <span class="fa fa-arrow-circle-left fa-lg"> Back/Cancel</span>
            </asp:LinkButton>

            <asp:LinkButton ID="cmdDelete" runat="server" class="btn myshadow" Style="margin-left: 15px">
                        <span class="fa fa-trash-o fa-lg"> Delete</span>
            </asp:LinkButton>


        </div>

好的，现在我们需要填写上面的控件。 （请注意，在开发过程中，使用 display： normal，并且仅在您拥有所需的布局后，然后作为最后一步，更改编辑区域的样式并使用“display： none”

所以，现在我们的代码来加载控件。（所选组合框更改了索引事件）。

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

    Dim cmdSQL As New SqlCommand("SELECT * FROM tblHotelsA 
                                 WHERE ID = @ID")

    cmdSQL.Parameters.Add("@ID", SqlDbType.Int).Value = cboHotel.SelectedItem.Value

    Dim rstData As DataTable = MyRstP(cmdSQL)

    Dim OneRow = rstData.Rows(0)

    txtHotel.Text = OneRow("HotelName")
    tCity.Text = OneRow("City")
    tProvince.Text = OneRow("Province")
    txtNotes.Text = OneRow("Description")
    chkActive.Checked = OneRow("Active")
    chkBalcony.Checked = OneRow("Balcony")

    ' now pop the dialog
    Dim sJava As String = "mypop()"

    ScriptManager.RegisterStartupScript(Page, Page.GetType, "my java", sJava, True)


End Sub

我们还需要一个 JavaScript 例程。

因此，在编辑区域 div 之后，我们有以下代码：

    <script>

        function mypop() {

            myDialog = $("#editarea")

            myDialog.dialog({
                autoOpen: false,
                modal: true,
                appendTo: "form",
                closeText: "",
                width:"840px",
                title: "Edit Hotel",
                dialogClass: "dialogWithDropShadow"
            })

            myDialog.dialog('open')
        }

    </script>

因此，效果和结果如下所示：

而且，保存按钮代码看起来？

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

    Dim cmdSQL As New SqlCommand("SELECT * FROM tblHotelsA 
                                 WHERE ID = @ID")

    cmdSQL.Parameters.Add("@ID", SqlDbType.Int).Value = cboHotel.SelectedItem.Value

    Dim rstData As DataTable = MyRstP(cmdSQL)

    Dim OneRow = rstData.Rows(0)

    OneRow("HotelName") = txtHotel.Text
    OneRow("City") = tCity.Text
    OneRow("Province") = tProvince.Text
    OneRow("Description") = txtNotes.Text
    OneRow("Active") = chkActive.Checked
    OneRow("Balcony") = chkBalcony.Checked

    SaveData(rstData, cmdSQL)


End Sub

那么，仔细看上面？

我使用了一些“辅助”例程。将这些添加到 Module1 的“常规”代码中。这些例程可以一遍又一遍地用于您创建的每个网页。

这些常规例程（例如在 Module1 中）是：

Public Function GetConStr() As String

    Return My.Settings.TEST4
    ' ConfigurationManager.ConnectionStrings("RECETAConnectionString").ConnectionString

End Function



Public Function MyRst(strSQL As String) As DataTable
    ' general get any data from SQL
    Dim rstData As New DataTable
    Using conn As New SqlConnection(GetConstr)
        Using cmdSQL As New SqlCommand(strSQL, conn)
            conn.Open()
            rstData.Load(cmdSQL.ExecuteReader)
            rstData.TableName = strSQL
        End Using
    End Using
    Return rstData
End Function

Public Function MyRstP(cmdSQL As SqlCommand) As DataTable
    ' general get any data from SQL command
    Dim rstData As New DataTable
    Using conn As New SqlConnection(GetConstr)
        Using (cmdSQL)
            cmdSQL.Connection = conn
            conn.Open()
            rstData.Load(cmdSQL.ExecuteReader)
        End Using
    End Using

    Return rstData

End Function

Public Sub MyRstPE(cmdSQL As SqlCommand)
    ' General execute sql - no return of data

    Dim rstData As New DataTable
    Using conn As New SqlConnection(GetConStr)
        Using (cmdSQL)
            cmdSQL.Connection = conn
            conn.Open()
            cmdSQL.ExecuteNonQuery()
        End Using
    End Using

End Sub

Public Sub SaveData(rstData As DataTable, cmdSQL As SqlCommand)

    Using conn As New SqlConnection(GetConStr)
        Using (cmdSQL)
            cmdSQL.Connection = conn
            conn.Open()
            Dim da As New SqlDataAdapter(cmdSQL)
            Dim daU As New SqlCommandBuilder(da)
            da.Update(rstData)

        End Using
    End Using

End Sub

所以，代码不多，但这些例程就像“黄金”一样，因为网页上的隐藏代码现在变得非常像在 VB6 中工作，或者像在 MS-Access 中工作一样。将上述设计用于所有代码。

第二部分，以及对话框中的回发

因此，第一部分展示了如何加载一些数据，并显示一个对话框。但是，问题是如何允许标准 asp.net 按钮在弹出对话框中工作，并且不关闭对话框。

简单的解决方案是使用更新面板。更新面板的位置在这里很重要，它应该放在弹出的 div 内部。

所以，这种格式

   div
       update panel
   end div

因此，让我们将组合框移动到该弹出式 div 中。我们删除了在选择酒店时弹出对话框的代码。但是，保存按钮现在将保存数据，因此在保存后，我们清除控件，并将组合框重新设置回“选择酒店”。

保存按钮和组合框将触发回发，但请注意弹出对话框如何保持打开状态。

因此，我们的标记现在变成这样：

一、显示弹窗的按钮

    <div style="padding:35px; margin-left: 40px;">
        <asp:Button ID="cmdShowPop" runat="server" Text="Show Pop"
            OnClientClick="mypop();return false"                
            />

现在，我们将所有以前的标记，包括组合框（下拉列表）移动到内容模板的内部，如下所示

之前的关闭按钮没有代码（但确实导致了关闭对话框的回发）。该按钮代码现在必须关闭对话框，因此是这样的：

<asp:LinkButton ID="cmdCancel" runat="server" class="btn myshadow" 
    Style="margin-left: 15px"
    OnClientClick="$('#editarea').dialog('close');return false;">
    <span class="fa fa-arrow-circle-left fa-lg"> Close</span>
</asp:LinkButton>

结果现在是一个弹出对话框，可以在回传中幸存下来，如下所示：

对组合框代码的更改只是删除了弹出对话框代码，现在是这样的：

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

    Dim cmdSQL As New SqlCommand("SELECT * FROM tblHotelsA 
                                 WHERE ID = @ID")

    cmdSQL.Parameters.Add("@ID", SqlDbType.Int).Value = cboHotel.SelectedItem.Value

    Dim rstData As DataTable = MyRstP(cmdSQL)
    Dim OneRow = rstData.Rows(0)

    txtHotel.Text = OneRow("HotelName")
    tCity.Text = OneRow("City")
    tProvince.Text = OneRow("Province")
    txtNotes.Text = OneRow("Description")
    chkActive.Checked = OneRow("Active")
    chkBalcony.Checked = OneRow("Balcony")

    '' now pop the dialog
    'Dim sJava As String = "mypop()"
    'ScriptManager.RegisterStartupScript(Page, Page.GetType, "my java", sJava, True)

End Sub

因此，您可以在弹出的 div 中插入一个更新面板，这将防止对话框因标准按钮回发而关闭。唯一的附加部分是有一个关闭按钮来关闭对话框，如上所述。