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

Question

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

  

    

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

  

主视图

<activity
        android:name=".SettingsActivity"
        android:label="@string/app_name"
        android:theme="@style/SplashScreen">
        <intent-filter>
            <action android:name="android.intent.action.VIEW" />
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>

        <meta-data android:name="android.app.shortcuts"
            android:resource="@xml/shortcuts" />
    </activity>

PartialView1

  <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>

jQuery

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

Answer 1

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

Answer 2

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