在按钮单击 MVC 上显示部分视图

Question

我有一个主视图和两个部分视图。主视图由导航链接组成。部分视图1由一个按钮组成，我需要在单击按钮时显示部分视图2

PartialView1有一个按钮，当我点击按钮时，我需要PartView2（Shoe PartialView2）

主视图

  <div class="container my-3">
    <div class="card">   
<div class="card-header bg-white border-bottom flex-center p-0">
            <ul class="nav nav-pills card-header-pills main-nav-pills" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" href="#">CART</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="javascript:void(0)"><i data-feather="arrow-right"></i></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">DELIVERY</a>
                </li>
            </ul>
        </div>
      <div class="card-body px-1 px-md-5 pt-5">
            @Html.Partial("_PartialView1")
            @*@Html.Partial("_PartialView2)*@
        </div>
      </div>
</div>

部分视图1

//Some code here
 <a href="#" class="btn btn-primary rounded-pill btn-lg "id="iddelivery">Delivery<i data-feather="arrow-right"></i></a>

Jquery

$("#iddelivery").click(function(){
});

Answer 1

编写一个操作并返回 PartialView2，编写一个函数来调用该操作的 ajax

Answer 2

如前所述，有很多方法可以做到这一点。如果不想使用新内容重新加载/刷新页面，最简单的方法是在控制器中创建 ActionResult 并返回部分视图。在 jQuery 函数中，您需要做的第一件事是调用 preventDefault 函数来防止对按钮执行任何默认操作。接下来是进行 Ajax 调用并从控制器接收视图内容。然后，您可以将div 的内容替换为从控制器获得的结果。