Dialog box with parameters retrieved from the database

Question

I have a Prospect database table that stores prospects with an identifier and version of a primary key. The web form has a Generate Proposal radton, which when clicked should display a dialog box that allows the user to select the version of the perspective to generate from the drop-down list. I have a method that will retrieve versions from the database for the GetVersions() perspective, but have no idea how to put it in the dialog so that the user can select the version. Any help is appreciated.

Answer 1

Would a jQuery user interface be an option?

You will need to add the jQuery UI replicas that can be found here.

Here is the documentation for the jQuery dialog interface.

The following code was taken from a solution that I implemented. I just deleted some code snippets 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 is a small snippet to get you started. This uses the jQuery dialog box .

On 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 the code.

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