Dialog box with options retrieved from database

Question

I have a database table Prospect which stores prospects with primary key id & version. There is a radbutton Generate Proposal in a webform, which when clicked should display a dialog box to allow the user to select the version of the prospect to generate from a dropdown box. I have a method which will retrieve the versions from the database for the prospect GetVersions() but have no idea how to put it in a dialog box to allow the user to select the version. Any help is greatly appreciated.

Answer 1

Would JQuery UI be an option?

You would have to add the JQuery UI refferences which can be found Here

Here is the documentation on the JQuery UI dialog.

The below code was taken from a solution that I implemented. I have removed quite a few pieces of code for simplicity. Let me know if you need any clarification.

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

Here a little snippet to get you started. This uses the jQuery Dialog Box.

In the aspx page

<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>

And then in code behind.

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