c# - In ASP.net, what kind of IF statement could I use to hide a div if the image inside it matches the current page URL?

Question

This is within Sitefinity if that matters, and I am really new at ASP.NET and C#.

I have an image-based navigation element at the bottom of a page that links to different articles using the same template. There are 5 articles, and I would like the link to the active page/article to be hidden so there is a grid of 4 image links.

Here's a screenshot:

https://i.imgur.com/PG2Sfpo.png

Here is the code behind it:

@{
    string navTitle = string.Empty;
    string url = string.Empty;

    if (Model.CurrentSiteMapNode != null && Model.CurrentSiteMapNode.ParentNode != null)
    {
        if (Model.CurrentSiteMapNode.Title == "Home")
        {
            navTitle = Model.CurrentSiteMapNode.ParentNode.Title;
        }
        else
        {
            navTitle = Model.CurrentSiteMapNode.Title;
        }
        url = Model.CurrentSiteMapNode.ParentNode.Url;
    }
}
 <div class="foundation-stories-container">
    @foreach (var node in Model.Nodes)
    {
        @RenderRootLevelNode(node);
    }
</div>

@*Here is specified the rendering for the root level*@
@helper RenderRootLevelNode(NodeViewModel node)
{
string[] thisPage = (node.Url).Split('/');
string thisImage = thisPage[4] + ".jpg";
 <a href="@node.Url" target="@node.LinkTarget">
     <div class="foundation-story-block">
         <div class="hovereffect">
             <img src="[OUR WEBSITE URL]/stories/@thisImage" class="img-fluid">
             <div class="overlay">
                 <h2>@node.Title</h2>
             </div>
         </div>
     </div>
 </a>
}

So we're already getting the page URL and image file name

string[] thisPage = (node.Url).Split('/');
string thisImage = thisPage[4] + ".jpg";

Is this as easy as doing the following?

if (thisImage = thisPage) 
{
   foundation-story-block.AddClassToHtmlControl("hide")
}

Seems easy enough, but I don't know where to start.

I'm better at Javascript, so I do have a JS solution in place for this already, but I'd really like to find a cleaner way to do it.

<script type="text/javascript">

$(document).ready(function() {

    var active = window.location.pathname.split("/").pop()

    var name = active;
    name = name.replace(/-/g, ' ');

    jQuery.expr[":"].Contains = jQuery.expr.createPseudo(function(arg) {
    return function( elem ) {
        return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 
    0;
    };
});

$("h2:Contains('" + name + "')").closest(".foundation-story-block").addClass("hide");

});

</script>

This exists on the main template page.

1. Gets the last part of the URL
2. Sets that as a variable called "name"
3. Changes the dash to a space if there is one (most of the pages are associated with names so it's like /first-last)
4. Then it goes and looks at the which is where the title of the page lives, and if it equals the "name" variable, the ".hide" class is added to the block.

Thanks for any help anyone can provide.

标签： c#asp.netasp.net-mvc

Answer 1

这是可能的，是的。方法如下：

...
@{
  var hiddenClass = thisImage == thisPage ? "hide" : string.Empty;
}
<div class="foundation-story-block @hiddenClass">
    <div class="hovereffect">
        <img src="[OUR WEBSITE URL]/stories/@thisImage" class="img-fluid">
        <div class="overlay">
              <h2>@node.Title</h2>
         </div>
    </div>
</div>