c# - Cuadro de diálogo con opciones recuperadas de la base de datos

asp.net database

Question

Tengo una tabla de la base de datos Prospect que almacena clientes potenciales con identificación y versión de clave principal. Existe un radbutton Generate Proposal en un formulario web, que al hacer clic debería mostrar un cuadro de diálogo para permitir al usuario seleccionar la versión del cliente potencial para generar desde un cuadro desplegable. Tengo un método que recuperará las versiones de la base de datos para el prospecto GetVersions() pero no tengo idea de cómo ponerlo en un cuadro de diálogo para permitir que el usuario seleccione la versión. Cualquier ayuda es muy apreciada.

Answer 1

¿Sería JQuery UI una opción?

Debería agregar las referencias de JQuery UI que se pueden encontrar aquí

Aquí está la documentación en el diálogo de la interfaz de usuario de JQuery.

El siguiente código fue tomado de una solución que implementé. He eliminado bastantes piezas de código para simplificar. Avísame si necesitas alguna aclaración.

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

Aquí un pequeño fragmento para que comiences. Esto usa el cuadro de diálogo jQuery .

En la página 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>

Y luego en código detrás.

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