如何在ASP.NET C#中实现带复选框与确认功能的弹出框？

Hey there! Let's build that confirmation popup with a checkbox for your ASP.NET C# project. I'll walk you through a straightforward approach using Bootstrap (it's widely used and keeps the UI clean) plus server-side handling to make sure the submission only runs when the user confirms.

First, if you aren't already using Bootstrap, add these references to your page (place them in the <head> or at the end of <body>):

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<!-- jQuery and Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>

Here's the full modal structure, including the trigger button, confirmation message, checkbox, and submit button that stays disabled until the checkbox is ticked:

<!-- Button to open the confirmation modal -->
<asp:Button ID="btnTriggerPopup" runat="server" Text="Initiate Submission" 
            OnClientClick="$('#confirmationModal').modal('show'); return false;" />

<!-- Confirmation Modal -->
<div class="modal fade" id="confirmationModal" tabindex="-1" role="dialog" aria-labelledby="confirmModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="confirmModalLabel">Confirm Your Submission</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>*Important:* Are you sure you want to submit this request? This action cannot be undone.</p>
        <div class="form-check mt-3">
          <input class="form-check-input" type="checkbox" id="confirmCheckbox">
          <label class="form-check-label" for="confirmCheckbox">
            I understand and confirm I want to proceed with submission
          </label>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        <asp:Button ID="btnFinalSubmit" runat="server" Text="Submit Request" 
                    CssClass="btn btn-primary" Enabled="False" OnClick="btnFinalSubmit_Click" />
      </div>
    </div>
  </div>
</div>

<!-- JavaScript to toggle submit button state -->
<script>
$(document).ready(function() {
  $('#confirmCheckbox').on('change', function() {
    // Enable/disable the submit button based on checkbox state
    $('#<%= btnFinalSubmit.ClientID %>').prop('disabled', !$(this).is(':checked'));
  });
});
</script>

Now add the code-behind logic to handle the actual submission when the user confirms:

protected void btnFinalSubmit_Click(object sender, EventArgs e)
{
    // Replace this with your actual submission logic:
    // - Save data to database
    // - Send notifications
    // - Process files, etc.

    // After successful processing, show a confirmation and close the modal
    string script = @"
        alert('Submission completed successfully!');
        $('#confirmationModal').modal('hide');
    ";
    ClientScript.RegisterStartupScript(this.GetType(), "submissionSuccess", script, true);
}

Quick Notes for ASP.NET MVC (Razor Syntax) #

If you're working with MVC instead of Web Forms, adjust the code like this:

<!-- Trigger Button -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#confirmationModal">
  Submit Request
</button>

<!-- Modal with Form -->
<div class="modal fade" id="confirmationModal" tabindex="-1" role="dialog" aria-labelledby="confirmModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <!-- ... modal header and body same as above ... -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        @using (Html.BeginForm("ProcessSubmission", "YourController", FormMethod.Post))
        {
            <input type="submit" id="btnMvcSubmit" class="btn btn-primary" disabled="disabled" value="Submit" />
        }
      </div>
    </div>
  </div>
</div>

<script>
$(document).ready(function() {
  $('#confirmCheckbox').change(function() {
    $('#btnMvcSubmit').prop('disabled', !$(this).is(':checked'));
  });
});
</script>

And the controller action:

[HttpPost]
public ActionResult ProcessSubmission()
{
    // Your submission logic here
    TempData["SuccessMessage"] = "Submission was successful!";
    return RedirectToAction("Index");
}

That's it! This setup ensures users must explicitly confirm their intent by checking the box before the submission runs.

内容的提问来源于stack exchange，提问作者sanjeev