如何从局部视图获取 _Layout 页面内的元素

Question

I have a _Layout page that contains the standard elements.我有一个包含标准元素的_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>

Inside of this layout I have a "Home", "Index" page inside the @RenderBody with the following div:在此布局中，我在@RenderBody有一个“主页”、“索引”页面， @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>

What I am trying to do is disable the scrollbar in the _Layout view when the newUserCollapse is on show.bs.collapse .我想要做的是当newUserCollapse在show.bs.collapse上时禁用_Layout视图中的滚动条。 Any way that can be accomplished?有什么办法可以实现吗？

Thanks in advance!提前致谢！

Answer 1

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

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

Answer 2

Add the following Javascript code somewhere on the page:在页面的某处添加以下 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 页面内的元素

问题描述

2 个解决方案

解决方案1
0 2017-09-26 20:57:22

解决方案2
0 2017-09-27 02:34:58

如何从局部视图获取 _Layout 页面内的元素

问题描述

2 个解决方案

解决方案1 0 2017-09-26 20:57:22

解决方案2 0 2017-09-27 02:34:58

解决方案1
0 2017-09-26 20:57:22

解决方案2
0 2017-09-27 02:34:58