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

【问题标题】：Show Partial Views on Button Click MVC在按钮单击 MVC 上显示部分视图
【发布时间】：2019-01-04 18:06:49
【问题描述】：

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

PartialView1 有一个按钮，当我点击按钮时，我需要 PartialView2(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(){

});

【问题讨论】：

只需将部分视图 2 包裹在隐藏的 div 中，并在点击事件中显示。或者，您可以进行 ajax 调用以获取局部视图并将其动态加载到元素中。有多种方法可以实现这一点，具体取决于您的要求
简单的方法是在隐藏的 div 中渲染 div，并在单击按钮时交换可见性。

标签： c# jquery asp.net-mvc partial-views

【解决方案1】：

编写一个动作并返回PartialView2，编写一个函数来对该动作进行ajax调用

【讨论】：

【解决方案2】：

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

【讨论】：