Revision history [back]

To change a PartialView located within a modal to a different PartialView when a button is clicked, you can use jQuery to swap out the content. Here are the steps:

1. Create the two PartialViews that you want to switch between. Give them unique ids, such as "partialView1" and "partialView2".

2. Create a button that will trigger the change. Give it an id such as "changePartialViewBtn".

3. Add an event listener to the button using jQuery. When the button is clicked:

a. Determine which PartialView is currently being displayed by checking its ID.

b. Hide the current PartialView using .hide().

c. Show the new PartialView using .show().

Here is the code example:

<!-- Create the PartialViews -->
<div id="partialView1">
  <!-- Content of PartialView 1 -->
</div>

<div id="partialView2">
  <!-- Content of PartialView 2 -->
</div>

<!-- Create the button to trigger the change -->
<button id="changePartialViewBtn">Change PartialView</button>

<script>
  // Add event listener to the button
  $("#changePartialViewBtn").on("click", function() {
    // Determine which PartialView is currently being displayed
    var currentView = $(".modal-body").children(":visible").attr("id");

    // Hide the current PartialView
    $("#" + currentView).hide();

    // Display the new PartialView
    if (currentView == "partialView1") {
      $("#partialView2").show();
    } else {
      $("#partialView1").show();
    }
  });
</script>