ASP.NET Core MVC显示隐藏部分视图 [英] ASP.NET Core MVC Show hide partial views

问题描述

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

I have a Contact/Index page split into two columns (for each column one PartialView). On the left I show the list of all my contacts and on the right the details of the selected/clicked contact from the said list.

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

...and the preview works great -> after a user clicks a record from the list I just call a '@Url.Action' for an action in my controller that returns a partial view with the details.

    <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").

But I'm having a problem with 'edit'. On the details form I have a button for EDIT and when a users clicks it I want to HIDE the PartialView for preview (id="sectionPreview") and SHOW the one for edit (id="sectionEdit").

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

I already tried playing around with saving different styles (disply: block or none) to ViewBag and applying that to each section, but it doesn't feel like the right approach, because all the PartialViews (even with display set to none) still get rendered.

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

What is the best way/practice to make this work?

推荐答案

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

Another approach is to use ajax to load the partial view .On client side use ajax to call server side function and pass the filter parameter(id) . On server side , you can query the database with ID and return PartialView with models .

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

Then in success callback function of Ajax , you can load the html of partial view to related area in page using jQuery :

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

并隐藏相关的div，例如:

And hide related div like :

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

您可以单击

You can click here for code sample .

这篇关于ASP.NET Core MVC显示隐藏部分视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！