asp.net - asp.net webform vb 在下拉列表中添加新记录

关于不想重新刷新页面的问题的一切都很棒。

页面回帖有多大意义？我的意思是，如果您在该表单上有多个按钮，那么该页面应该能够容忍回发。这个问题/问题/观点的原因是，当您可以允许回发时，您有很多选项和选项可以让您在对话框弹出窗口中自由推挤，让您添加新的价值组合框。请记住，将新行添加到组合框（下拉列表）的弹出选项必须与刚刚添加的行重新绑定。

如果迫在眉睫并且您真的无法容忍回发，那么您可以将组合框和“添加”到组合框放在更新面板中。

接下来：因为我们想弹出一个对话框？我建议采用 jQuery.UI。您很有可能已经将 jQuery 包含在您的项目中，因此采用 jQuery.UI 并没有太多意义。

也有引导对话框 - 但它们真的很难使用。

所以，让我们来说明这将如何工作。

因此，假设我们对一些文本框和那个下拉菜单进行了一些标记。

说这个：

<div style="padding:5px;float:left;width:250px;text-align:right">
    Hotel Name: <asp:TextBox ID="txtHotelName" runat="server"  Width="130px" />
    <br />
    First Name: <asp:TextBox ID="txtFirst" runat="server"  Width="130px" />
    <br />
    Last Name: <asp:TextBox ID="txtLast" runat="server" Text ='<%# Eval("LastName") %>'  Width="130px" />
    <br />

    <div>
    City : <asp:DropDownList ID="cboCity" runat="server" DataTextField="City" 
        DataValueField="City" Width="110px">
        </asp:DropDownList>
        <div style="float:right;text-align:center;margin-left:4px;margin-top:-1px">
        <asp:Button ID="cmdAddCity" runat="server" Text="+" 
                OnClientClick="AddCity();return false"
                style="padding-left:4px;padding-right:8px;width:12px;height:16px;Font-Size:8px"
            />
        </div>
    </div>
    Active: <asp:CheckBox ID="chkActive" runat="server" Checked = '<%# Eval("Active") %>'/>
</div>

上面没有太多，我们得到这个：

当然，在页面加载时，我用代码填充了下拉列表。我有这个：

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

    If IsPostBack = False Then

        LoadCombo

    End If

End Sub

Sub LoadCombo()

    Using cmdSQL As New SqlCommand("SELECT City from tblCity ORDER BY City", New SqlConnection(My.Settings.TEST3))

        cmdSQL.Connection.Open()
        cboCity.DataSource = cmdSQL.ExecuteReader
        cboCity.DataBind()

    End Using

End Sub

如前所述，我们确实倾向于在页面加载事件中编写 statup + load up 代码，但请注意我如何仅测试第一个回帖。因此，您可以编写很多可以“浏览”回帖的页面。

好的，现在我们需要一个 jQuery.UI 的弹出窗口。这些很好，因为我们不必创建一个全新的网页。当前页面中此弹出表单（一个 div）的标记可以/将如下所示：

   <div id="CityDialog" style="display:Normal" title="Add New City">
        <br />
        <asp:TextBox ID="txtNewCity" runat="server" Placeholder="Enter New City" ClientIDMode="Static" ></asp:TextBox>
        <br />
        <br />

        <asp:Button ID="cmdOkAddCity" runat="server" Text="Add" ClientIDMode="Static" />
        <asp:Button ID="cmdCityCancel" runat="server" Text="Cancel" ClientIDMode="Static" 
            OnClientClick="$('#CityDialog').dialog('close');return false;"
            style="margin-left:20px"/>
    </div>

所以我们给 div 添加一个标题。要添加的新城市的文本框。和两个简单的标准 asp.net 按钮。

因此，我们将上面的内容添加到上面的页面中。然后双击 cmdOkAdd 按钮，并编写代码以将新行添加到组合框中。

该代码如下所示：

Protected Sub cmdOkAddCity_Click(sender As Object, e As EventArgs) Handles cmdOkAddCity.Click

    If txtNewCity.Text <> "" Then

        Using cmdSQL As New SqlCommand("INSERT INTO tblCity (City) VALUES (@City)", New SqlConnection(My.Settings.TEST3))

            cmdSQL.Parameters.Add("@City", SqlDbType.NVarChar).Value = txtNewCity.Text
            cmdSQL.Connection.Open()
            cmdSQL.ExecuteNonQuery()

            ' re-load combo
            LoadCombo()

            '
            ' set cbo to the new value we just added
            cboCity.Text = txtNewCity.Text

        End Using

    End If

End Sub

再次，真正简单的代码。（以及到目前为止所有简单的代码）。所以上面所做的是检查用户是否确实在文本框中输入了那个新城市，如果是，那么我们将该行添加到数据库中，然后重新加载组合框，然后我们将组合框设置为新的刚刚添加的城市。这使得流程变得简单，因为用户可以点击组合框旁边的那个小“+”按钮，我们会弹出一个对话框，然后用户进入城市，然后点击 ok 按钮运行上面的代码存根。

好的，现在我们必须设置 jQuery.UI。是的，这是一点点 JavaScript，但并不多。

那么，下拉菜单旁边的那个“+”按钮呢？它是一个普通的 asp 按钮，它将弹出那个 jQuery.UI 对话框。该按钮如下所示：

 <asp:Button ID="cmdAddCity" runat="server" Text="+" 
    OnClientClick="AddCity();return false"
   style="padding-left:4px;padding-right:8px;width:12px;height:16px;Font-Size:8px"
    />

请注意我们如何拥有 OnClientClick= - 这将运行我们的 JavaScript 代码存根。

所以，在最后一个标签之后，我们有这个代码：

</form>
    <script>
        function AddCity() {
            $("#CityDialog").dialog({
                modal: true,
                width: "220px",
                resizable: false,
                appendTo: "form"
            });
        }
    </script>

代码不多。该代码的作用是将“div”作为一种很酷的对话框形式弹出。它将其余的背景变成“禁用的灰色”。

所以，它运作良好。最后但并非最不重要？我们必须隐藏那个对话框 div。记住，一开始不要隐藏它，因为我们需要双击 Ok 按钮（添加城市按钮）来连接我们的 add 事件。完成后，我们通过将 display:normal 更改为 Display:none 来隐藏该 div。例如这个：

   <div id="CityDialog" style="display:none" title="Add New City">
        <br />
        <asp:TextBox ID="txtNewCity" runat="server" Placeholder="Enter New City" ClientIDMode="Static" ></asp:TextBox>
        <br />
        <br />

        <asp:Button ID="cmdOkAddCity" runat="server" Text="Add" ClientIDMode="Static" />
  ... etc. etc.

好的，现在有了上面的内容？好吧，那么我们现在有了这个设置：

asp.net - asp.net webform vb 在下拉列表中添加新记录

问题描述

解决方案

推荐阅读