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:
Create the two PartialViews that you want to switch between. Give them unique ids, such as "partialView1" and "partialView2".
Create a button that will trigger the change. Give it an id such as "changePartialViewBtn".
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>
Asked: 2021-10-31 11:00:00 +0000
Seen: 8 times
Last updated: Dec 28 '21