仅在主页中显示图像的 div 并从其他页面隐藏答案

【问题标题】：show a div of image only in homepage and hide from other pages仅在主页中显示图像的 div 并从其他页面隐藏
【发布时间】：2021-12-01 13:16:46
【问题描述】：

<div class="container">
    
                        @section HeroSection{
                            @foreach (var category in Model.AllCategory.Where(m => m.IsFeatured).FirstOrDefault().CategoryPictures.Select(m => m.Picture).Distinct())
                            {
                                <div class="hero__item set-bg" data-setbg="/FileStore/images/@category.Url">
                                    <div class="hero__text">
                                        <span>FRUIT FRESH</span>
                                        <h2>Vegetable <br />100% Organic</h2>
                                        <p>Free Pickup and Delivery Available</p>
                                        <a href="#" class="primary-btn">SHOP NOW</a>
                                    </div>
                                </div>
                            }
                           }
                        </div>
                </div>
            </div>

        }
</div>

我尝试在 _layout 页面中 @Render //@section HeroSection// 为 false 。这样它只会出现在 home/index ..而不是其他页面中！

【问题讨论】：

为什么不将此代码添加到您的主页视图中？
实际上它出现在带有下拉列表和搜索框的标题 div 之后，还有图像的#div .. 因为我使用的是唯一的一个 _layout ..图像 div 出现在所有视图中..我只想将图像 div 保留在主页中。和其他部分作为下拉列表和搜索框将在_layout中是全局的.. Tnx提前！
我不确定你打算实现什么，但你可以在控制器的方法中设置一个布尔变量，你想在它的视图上显示这个图像，然后根据它显示或隐藏视图中的布尔变量
colorlib.com/wp/template/ogani 。在此模板上，仅使用（蔬菜 100% 有机）图像横幅！在主页中，但在同一部分下拉列表中，搜索 div 在布局中将是全局的。我正在努力解决这个问题！

标签： c# html asp.net model-view-controller

【解决方案1】：

我可以想到两种方法。第一个不太实用，它制作了 2 种不同的布局，一种没有 div，一种有 div。你可以像这样在剃刀文件中更改主页的布局

@{Layout = "YourNewLayOut"}

我认为更好的另一种方法是使用 JavaScript。您可以使用window.location.href 获取当前网址并检查它是否是您针对 div 的主页的 url 并使其隐藏在其他情况下可见。

你的函数应该是这样的：

function someFunctionName() {
  let div = document.querySelector("#yourDiv");
  if (window.location.href === "your home page url ") {
    div.style.display = "none";
  } else {
    div.style.display = "block or flex or what ever you're using";
  }
}

然后像这样在加载时调用这个函数

window.onload = function() {
someFunctionName();
};

【讨论】：