2016-11-11 66 views
5

检索选项对话框中我有一个数据库表Prospect存储与主键ID &版本前景。有一个在一个WebForm,点击它应显示一个对话框,允许用户选择前景的版本,从下拉框生成时radbutton Generate Proposal。我有这将检索数据库的版本前景GetVersions()的方法,但不知道如何把它放在一个对话框,允许用户选择的版本。任何帮助是极大的赞赏。从数据库

回答

2

会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 */ 
    } 
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); 
}