Как я могу получить количество существующих элементов HTML из кода перед их рендерингом?

Question

В настоящее время я пытаюсь выяснить, как я могу отфильтровать некоторые элементы HTML внутри моего кода.

В основном у меня есть несколько div контейнеров, каждый из которых содержит некоторые вещи, которые я хочу отобразить. Но я только хочу отобразить установленное количество (например, 1 или 3) тех контейнеров, которые будут выбраны случайным образом. У меня в основном есть логика для их случайного выбора в коде. У меня проблема в том, что мне нужно каким-то образом получить количество контейнеров, которые я на самом деле должен выбрать из них. Я не хочу зависеть от способности других людей, работающих с тем же кодом, фактически обновлять количество контейнеров вручную, когда они добавляют или удаляют один.

Контейнеры в файле выглядят примерно так:

<div id="mainContainer">
    <div id="element1">
        //first container
    </dev>
    <div id="element2">
        //second container
    </dev>
    <div id="element3">
        //third container
    </dev>
</div>

Я хочу получить номер этого элемента из кода, чтобы я мог отфильтровать их перед отображением веб-сайта. Я мог бы выполнить фильтрацию с использованием TypeScript или JavaScript, но для этого мне нужно было бы сначала загрузить все контейнеры, которые я хочу предотвратить из-за производительности / пользовательского опыта.

Есть ли возможность получить список всех контейнеров или что-то в этом роде?

Я был бы очень признателен за помощь здесь:)

Answer 1

Принимая другой подход к проблеме, как насчет размещения разметки для каждого элемента в отдельном частичном представлении в известной папке. Затем вы можете отсканировать файлы в известной папке и выбрать, какие из них / сколько вывести на фактическую страницу, используя @Html.RenderPartial.

Answer 2

Насколько мне известно, вы не можете «прочитать» DOM из ракурса Razor, поэтому вам нужен другой способ решения проблемы.Как насчет этого, который довольно точно соответствует вашему текущему макету Razor:

@{
    List<string> elementsToRender = new List<string>(5) { "element1", "element3" };
}

<div id="mainContainer">
    @if (elementsToRender.Contains("element1", StringComparer.OrdinalIgnoreCase))
    {
        <div id="element1">
            @* first container *@
        </div>
    }
    @if (elementsToRender.Contains("element2", StringComparer.OrdinalIgnoreCase))
    {
        <div id="element2">
            @* second container *@
        </div>
    }
    @if (elementsToRender.Contains("element3", StringComparer.OrdinalIgnoreCase))
    {
        <div id="element3">
            @* third container *@
        </div>
    }
</div>

Вы все еще можете позволить другим разработчикам добавлять и поддерживать элементы, все, что им нужно сделать, это убедиться, что у каждого из них есть уникальный ключв тесте elementsToRender.Contains.Для простоты я использовал обертку элемента div Id, но это не обязательно.Затем вы можете контролировать, какие элементы показывать, выбирая, какие ключи вы добавляете к elementsToRender.

Вы можете переместить совокупность elementsToRender в ViewModel, а затем заполнить ее динамически, основываясь на любой логике, которую вы хотите.