データベースから検索されたオプションのダイアログボックス

Question

私はプライマリキーid &バージョンの見込み客を格納するデータベーステーブルProspectを持っています。ラジオボタンGenerate Proposalがウェブフォームにあります。このボタンをクリックすると、ユーザーがドロップダウンボックスから生成する見込み客のバージョンを選択できるダイアログボックスが表示されます。私は、見込み客のためにデータベースからバージョンを取得するメソッドを持っていますGetVersions()しかし、バージョンを選択できるようにダイアログボックスに配置する方法がわかりません。どんな助けでも大歓迎です。

Answer 1

JQuery UIはオプションですか？

あなたは以下のコードは、私が実装溶液から取られたHere

Here is the documentation on the JQuery UI dialog.

を見つけることができますjQueryのUIのrefferencesを追加する必要があります。簡単にするためにかなりの数のコードを削除しました。明確化が必要な場合はお知らせください。

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