问题描述
我有一个 Asp.net DropDownList 从第一个表中返回数据并插入到第二个表中,我们将名称、年龄和位置插入到第二个表中,该位置从第一个表中返回数据。问题是我们将首先在第一个表中添加新记录的位置,然后刷新页面以获取新记录。有没有办法当点击现有记录末尾的下拉列表将是一个按钮“添加新”,当点击打开一个弹出窗口添加新记录之后,记录添加到第一个表中并且也可以在下拉列表中使用而没有刷新页面。 这可能吗?
解决方法
直到不想重新刷新页面的问题都很棒。
页面回传有多大意义?我的意思是,如果您在该表单上有多个按钮,那么该页面应该能够容忍回发。这个问题/问题/点的原因是,当您可以允许回发时,您将有很多选项和选项,可以在弹出的对话框中自由推入,让您添加新值组合框。请记住,将新行添加到组合框(下拉列表)的弹出选项必须与刚刚添加的行重新绑定。
如果推送迫在眉睫,而您真的无法容忍回发,那么您可以将组合框和“添加”到组合框放在更新面板中。
接下来: 因为我们要弹出一个对话框?我建议采用 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 按钮(添加城市按钮)来连接我们的添加事件。完成后,我们通过将 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.
好的,现在有了上面的内容?好吧,那么我们现在有了这个设置:
,代码很有帮助,但是当添加所有代码时弹出不触发,第二件事如何使下拉ID连接到城市表ID列而不是城市列这是我的代码:Download The Code>