Hộp thoại có các tùy chọn được truy xuất từ ​​cơ sở dữ liệu

Question

Tôi có bảng cơ sở dữ liệu Prospect để lưu trữ khách hàng tiềm năng có id khóa chính & phiên bản. Có một nút radio Generate Proposal trong biểu mẫu web, khi được nhấp vào sẽ hiển thị hộp thoại để cho phép người dùng chọn phiên bản của khách hàng tiềm năng để tạo từ hộp thả xuống. Tôi có một phương pháp mà sẽ lấy các phiên bản từ cơ sở dữ liệu cho các khách hàng tiềm năng GetVersions() nhưng không có ý tưởng làm thế nào để đặt nó trong một hộp thoại để cho phép người dùng chọn phiên bản. Bất kỳ trợ giúp nào cũng được đánh giá rất cao.

Answer 1

Giao diện người dùng JQuery có phải là một tùy chọn không?

Bạn sẽ phải thêm LIỆU THAM KHẢO JQuery UI có thể tìm thấy Here

Here is the documentation on the JQuery UI dialog.

Mã dưới đây được chụp từ một giải pháp mà tôi thực hiện. Tôi đã xóa một vài đoạn mã để đơn giản. Hãy cho tôi biết nếu bạn cần làm rõ.

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

Dưới đây là một đoạn nhỏ để giúp bạn bắt đầu. Điều này sử dụng jQuery Dialog Box.

Trong trang 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> 

Và sau đó trong mã phía sau.

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