從數據庫

Question

檢索選項對話框中我有一個數據庫表Prospect存儲與主鍵ID &版本前景。有一個在一個WebForm，點擊它應顯示一個對話框，允許用戶選擇前景的版本，從下拉框生成時radbutton Generate Proposal。我有這將檢索數據庫的版本前景GetVersions()的方法，但不知道如何把它放在一個對話框，允許用戶選擇的版本。任何幫助是極大的讚賞。

Answer 1

會JQuery用戶界面是一種選擇？

您必須添加可發現Here

Here is the documentation on the JQuery UI dialog.

下面的代碼是從我實現了一個解決方案所採取的JQuery用戶界面參考文獻的。爲了簡單起見，我刪除了很多代碼。讓我知道你是否需要任何澄清。

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