如何从部分视图中获取 _Layout 页面内的元素答案

【问题标题】：How to get an element inside a _Layout page from a Partial View如何从部分视图中获取 _Layout 页面内的元素
【发布时间】：2017-09-27 10:34:58
【问题描述】：

我有一个包含标准元素的_Layout 页面。

  <body id="layoutBody">
   <div class="wrapper">
    @Html.Partial("_TopMenu")
    @Html.Partial("_LeftMenu")
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <!-- Main content -->
        <section class="content">
            @RenderBody()
        </section><!-- /.content -->
    </div><!-- /.content-wrapper -->
    <footer class="main-footer">
        <div class="pull-right hidden-xs">
            <b>Version</b> 1.0
        </div>
    </footer>
   </div><!-- ./wrapper -->

   @Scripts.Render("~/bundles/jquery")
   @Scripts.Render("~/bundles/bootstrap"
  </body>

在此布局中，@RenderBody 内有一个“主页”、“索引”页面，其中包含以下 div：

<div class="small-box bg-yellow">
   <div class="inner">
      <h4>Phone Directory</h4>
      <h5>New</h5>
   </div>
   <div class="icon">
      <i class="mi mi-contact-phone"></i>
   </div>
   <a id="newUserCollapse" role="button" class="list-group-item" data-toggle="collapse" data-target="#new">
      <span class="glyphicon glyphicon-chevron-right"></span>
      Add New User
      <span class="fa fa-user-plus pull-right"></span>
   </a>
   <div id="new" class="sublinks collapse">
      <iframe src="~/PhoneMasters/Create" id="addUserIframe" align="middle" frameborder="0" style="width: 100%; height :100%; min-height: 600px; padding-top: 0px"></iframe>
   </div>
</div>

我要做的是在newUserCollapse 位于show.bs.collapse 时禁用_Layout 视图中的滚动条。有什么办法可以实现吗？

提前致谢！

【问题讨论】：

标签： jquery html asp.net-mvc

【解决方案1】：

要访问 JQuery 中的 PartialView 元素，您需要使用 Document：

$(document).find("#YourScrollId").prop('disabled', true);

【讨论】：

感谢您的回答。但是，问题是我试图从局部视图中调用它以获取 _Layout 页面内的元素。如果相反，您提供的解决方案将起作用。
@1moreLearner 我敢肯定，当您使用 Document 时，您会阅读页面的所有元素，因此无论您从哪里调用都没关系。您是否尝试过实现这一点？
我想我知道问题所在了。如果我将事件从 $('#newUserCollapse').on('show.bs.collapse', function () { 更改为 $('#newUserCollapse').click( function () 您的解决方案有效。我没有理解为什么，因为我在该元素中有一个 data-toggle="collapse"。现在，如果我离开点击事件，滚动条保持禁用状态，这不是我想要的。我仍然希望切换功能到位。奇怪。
我现在的问题是如何使切换开关来回工作？
@1moreLearner 这个小技巧你可以用这个JFiddle

【解决方案2】：

在页面某处添加以下 Javascript 代码：

    <script>
       $(document).ready(function(){
          /* Event to disable scrolling when #newUserCollapse is visible */
          $('#newUserCollapse').on('show.bs.collapse', function () {
             $('html, body').css({ overflow: 'hidden', height: '100%' });
          });

          /* Event to restore scrolling when #newUserCollapse is hidden */
          $('#newUserCollapse').on('hidden.bs.collapse', function () {
             $('html, body').css({ overflow: 'auto', height: 'auto' });
          });
       });
    </script>

【讨论】：

感谢您的回答，但与我回复马修斯的情况相同。这是从试图从 _Layout 检索元素的局部视图中调用的。