对话框，其中包含从数据库检索的选项

本文关键字：数据库 检索 选项 包含 对话框 | 更新日期: 2023-09-27 18:17:18

我有一个数据库表Prospect，它存储主键id &的版本。在web表单中有一个按钮Generate Proposal，当点击该按钮时，将显示一个对话框，允许用户从下拉框中选择要生成的潜在客户的版本。我有一个方法，将检索版本从数据库的前景GetVersions()，但不知道如何把它放在一个对话框，让用户选择版本。非常感谢任何帮助。

对话框，其中包含从数据库检索的选项

是否可以选择JQuery UI ?

你必须添加JQuery UI参考，可以在这里找到

这是JQuery UI对话框的文档

下面的代码取自我实现的一个解决方案。为了简单起见，我删除了相当多的代码。如果你需要任何说明，请告诉我。

HTML: 

<div id="MenuChangeSelection" title="Change Selection" class="MainDialog">
    <div id="MenuChangeSelectionContent"></div>
 </div>
JQuery: 

        $("#YourRadBtnID").click(function () {
            var yourDropDownMarkup = "<select><option value='Opt1'>Opt1</option></select>"; // Insert your dropdown markup or get your dropdown from the dom.
            $("#MenuChangeSelectionContent").html(yourDropDownMarkup);
            $("#MenuChangeSelection").dialog({
                autoOpen: true,
                modal: true,
                width: 600,
                height: 150,
                buttons: {
                    "Save And Close": function() {
                        //Do something when Save And Close is clicked. eg. asynchronously post back to server.
                    },
                    "Cancel": function() {
                        $(this).dialog("close");
                    }
                },
                open: function () {
                    $('.ui-widget-overlay').addClass('custom-overlay');
                },
                close: function () {
                    $('.ui-widget-overlay').removeClass('custom-overlay');
                }
            });
        });
CSS: 

    .ui-widget-overlay.custom-overlay
    {
        background-color:black;
        opacity:0.4;
        filter:alpha(opacity=40); /* For IE8 and earlier */
    }

这里有一小段代码供您入门。这使用jQuery对话框。

在aspx页面

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<asp:Button ID="generateProposal" runat="server" Text="Generate Proposal" OnClick="generateProposal_Click" />
<div id="popupContent" style="display: none">
    <asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList>
    <br />
    <br />
    <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click1" />
</div>
<script type="text/javascript">
    function showPopup() {
        $(function () {
            $("#popupContent").dialog();
        });
    }
</script>

然后在代码后面。

protected void generateProposal_Click(object sender, EventArgs e)
{
    //the id of the prospect. Not clear from your question where this should come from
    int proposalID = 6;
    //sometimes a counter is just a counter
    int counter = 0;
    //clear old items from the dropdownlist
    DropDownList1.Items.Clear();
    //load the prospects from the database here and attach to dropdownlist
    using (SqlConnection connection = new SqlConnection(connectionString))
    using (SqlCommand command = new SqlCommand("prospect_select", connection))
    {
        command.CommandType = CommandType.StoredProcedure;
        command.Parameters.Add("@id", SqlDbType.Int).Value = proposalID;
        try
        {
            //open the database connection
            connection.Open();
            SqlDataReader reader = command.ExecuteReader();
            //loop all rows and add them to the dropdownlist
            while (reader.Read())
            {
                DropDownList1.Items.Insert(counter, new ListItem(reader["prospect_name"].ToString(), reader["prospect_version"].ToString(), true));
                counter++;
            }
        }
        catch (Exception exception)
        {
            //handle the error if you want
        }
    }
    //call the javascript function to open the dialog box
    ScriptManager.RegisterStartupScript(Page, Page.GetType(), "showPopup", "showPopup();", true);
}
相关文章：