В ASP.net, какой оператор IF я могу использовать, чтобы скрыть div, если изображение внутри него соответствует URL текущей страницы?

Question

Это внутри Sitefinity, если это имеет значение, и я действительно новичок в ASP.NET и C #.

У меня есть элемент навигации на основе изображений в нижней части страницы, который ссылается на различные статьи, используятот же шаблон.Есть 5 статей, и я хотел бы, чтобы ссылка на активную страницу / статью была скрыта, чтобы была сетка из 4 ссылок на изображения.

Вот скриншот:

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

Вот код, стоящий за этим:

@{
    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>
}

Итак, мы уже получаем URL страницы и имя файла изображения

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

Это так же просто, как сделатьследующий?

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

Кажется достаточно простым, но я не знаю, с чего начать.

Я лучше в Javascript, поэтому у меня уже есть решение JS для этого уже, но мне бы очень хотелось найти более понятный способ сделать это.

<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>

Это существует на главной странице шаблона.

1. Получает последнюю часть URL
2. Устанавливает это как переменную с именем "name"
3. Изменяет тире на пробел, если он есть (большинство страниц связано с именами, поэтому оно похоже на / first-last)
4. Затем он идет и смотрит на то, где находится заголовок страницы, и если он равен переменной "name", класс ".hide" - это added to the block.

Спасибо за любую помощь, которую может оказать любой.

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>

Answer 2

Вы можете привязать событие click к вашим элементам с помощью класса foundation-story-block.Причина, по которой я использую .on вместо .click, заключается в том, что при использовании UpdatePanel s событие click не срабатывает после того, как UpdatePanel инициирует событие обновления - вы можете столкнуться с аналогичной проблемой с динамическим связыванием, поэтому я использовал .on чтобы избежать этого.

$(".foundation-story-block").on("click", function() {
    // Remove the "hide" class from any elements that have it applied
    $.each($(".foundation-story-block.hide"), function(index, value) {
        // Remove the class using the "this" context from the anonymous function
        $(this).removeClass("hide");
    });

    // Add the "hide" class to the element that was clicked
    $(this).addClass("hide");
});

Я не запускал это, хотя в IDE, поэтому он может быть не на 100% правильным, но он укажет вам правильный путь.