Question

我有一个数据库表Prospect，用于存储主键ID为＆amp;的潜在客户。版。在webform中有一个radbutton Generate Proposal，点击它时会显示一个对话框，允许用户从下拉框中选择要生成的潜在客户的版本。我有一个方法，它将从数据库中为潜在客户GetVersions()检索版本，但不知道如何将其放在一个对话框中以允许用户选择版本。任何帮助是极大的赞赏。

Answer 1

JQuery UI是一个选项吗？

您必须添加可以找到的Here

的JQuery UI参考

Here is the documentation on the JQuery UI dialog.

以下代码取自我实施的解决方案。为简单起见，我删除了相当多的代码。如果您需要任何澄清，请与我们联系。

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 */
    }

Answer 2

这里有一个小片段可以帮助您入门。这使用jQuery Dialog Box。

在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);
}

带有从数据库检索的选项的对话框

2 个答案: