Question

我有一个Contact / Index页面，它分为两列（每列一个PartialView）。左侧显示所有联系人的列表，右侧显示从该列表中选择/单击的联系人的详细信息。

...并且预览效果很好->在用户单击列表中的记录后，我只是为控制器中的某个操作调用了“ @ Url.Action”，该操作返回了包含详细信息的局部视图。


    <div class="row">
      <div class="col-md-8 col-sm-12">
        <div id="sectionList">
          @{await Html.RenderPartialAsync("_PartialList", Model.Contacts);}
        </div>
      </div>

      <div class="col-md-4 col-sm-12">
        <div id="sectionPreview" style="display: block">
          @{await Html.RenderPartialAsync("_PartialPreview", Model.Contact);}
        </div>

        <div id="sectionEdit" style="display: none">
          @{await Html.RenderPartialAsync("_PartialEdit", Model.Contact);}
        </div>
      </div>
    </div>

但是我对“编辑”有疑问。在详细信息表单上，我有一个用于编辑的按钮，当用户单击它时，我想隐藏PartialView进行预览（id =“ sectionPreview”）并显示其中一个进行编辑（id =“ sectionEdit”）。

我已经尝试过将不同的样式（显示：阻止或不显示）保存到ViewBag并将其应用于每个部分，但是这感觉不正确，因为所有PartialViews（即使显示设置为none））仍会呈现。

完成这项工作的最佳方法/做法是什么？

Answer 1

在这种情况下，我建议您使用引导导航。因此，当您单击另一个视图时，它将隐藏当前视图

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

您可以阅读更多here

Answer 2

另一种方法是使用ajax加载部分视图。在客户端上，使用ajax调用服务器端函数并传递filter参数（id）。在服务器端，您可以使用ID查询数据库并返回带有模型的PartialView。

然后在Ajax的成功回调函数中，您可以使用jQuery将部分视图的html加载到页面中的相关区域：

success: function (result) {
    $("#searchResultsGrid").html(result);
}

并隐藏类似的div：

$("#sectionPreview").hide();

您可以单击here以获得代码示例。

ASP.NET Core MVC显示隐藏的局部视图

2 个答案: