Veritabanından alınan seçeneklerle iletişim kutusu

Question

Birincil anahtar kimliği & sürümü ile potansiyelleri saklayan bir veritabanı tablosu Prospect var. Bir web formunda Generate Proposal numaralı bir radyatör vardır; tıklandığında, kullanıcının bir açılır kutudan oluşturmak için potansiyel müşterinin sürümünü seçmesini sağlayan bir iletişim kutusu görüntülenmelidir. Ben GetVersions() umut için veritabanından sürümleri almak için bir yöntem var, ancak kullanıcının sürümü seçmesine izin vermek için bir iletişim kutusuna nasıl koyacağınız hakkında hiçbir fikrim yok. Herhangi bir yardım büyük beğeni topluyor.

Answer 1

JQuery UI bir seçenek olabilir mi?

Sen Here is the documentation on the JQuery UI dialog.

Aşağıdaki kod

Here Ben uygulanan bir çözeltisinden alındı ​​bulunabilir JQuery UI REFERANSLAR eklemek gerekir. Sadelik için birkaç parça kod kaldırdım. Herhangi bir açıklamaya ihtiyacınız olursa haberim olsun.

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

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

Answer 2

başlamak için biraz pasajı. Bu jQuery Dialog Box kullanır. aspx sayfa

<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ılında

Sonra kodda

.

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