Показать / Скрыть элементы на основе изменения значения в модели - PullRequest
Новая
       17

Показать / Скрыть элементы на основе изменения значения в модели

0 голосов
/ 21 октября 2019

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

Раскрывающийся список создается с помощью @ Html.EnumDropDownListFor (m => m.SomeType). Значения будут примерно такими: TypeA TypeB TypeC. У меня есть два div, которые мне нужно скрыть в зависимости от выбранного значения. Если это TypeA, он покажет один div, TypeB покажет другой, а затем TypeC покажет оба этих div.

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

@model MVC_Proj.Models.SomeViewModel
@{
}

<div>

    @if(Model.SomeType == TypeA || Model.SomeType == TypeC)
    {
        <div>
            Showing first block
        </div>
    }

    @if(Model.SomeType == TypeB || Model.SomeType == TypeC)
    {
        <div>
            Showing second block
        </div>
    }

</div>

Одна вещь, которая меня интересует, - это поведение @if() операторовв бритвенных взглядах. Это то, на что просто смотрят, когда оно «компилируется» и служит представлению? Или он может быть сформирован так, чтобы он работал динамически и отражал изменение стоимости? В качестве альтернативы, есть ли другой «встроенный» способ справиться с этим, или я собираюсь использовать jQuery или что-то подобное?

(я просмотрел это, но не смог получитьэто работает для моей ситуации Как скрыть элемент div в зависимости от значения модели? MVC )

Ответы [ 2 ]

2 голосов
/ 21 октября 2019

Вы не сможете динамически обновить RazorPage без JavaScript, эти значения оцениваются только на стороне сервера во время рендеринга.

Вам потребуется использовать AJAX и JavaScript для динамического обновления страницы на основепри изменении значений с сервера.

0 голосов
/ 22 октября 2019

Следуя предыдущему ответу, здесь я публикую пример того, как вы можете это сделать: 

    $.post("yourcontroler/LoadSections", AddAntiForgeryToken({ typeId: selectedType }),
    function (response) {
        $(".types-container").html(response);
    }).done(function () {});

* Игнорируйте метод «AddAntiForgeryToken», если вам это не нужно, это просто что-то для безопасности. используйте для моих запросов Post, отправленных с помощью Ajax.

Ответ, добавленный в контейнер с ".html (response)", заключается в том, что контроллер отправит обратно частичное представление, которое содержит правильный сгенерированный HTML, уже обработанный с условиямиты упомянул. Как упомянуто user1538301 , решение по выбору пользователя должно быть обработано на стороне сервера, чтобы представление могло «измениться» и соответственно отобразить разделы.

Вот пример кодана стороне сервера: 

    public ActionResult LoadSections(string typeId)
    {
        var model = this.LogicService.ProcessSelectedType(productId).Result;

        return PartialView("_Sections", model);
    }

И теперь PartialView получит модель со значением свойства, которое помогает решить, какой раздел будет отображаться: 

    @model Project.ViewModels.Sections.SectionsViewModel

    @if (string.IsNullOrEmpty(Model.TypeId) && Model.TypeId == "TypeA")
    {
       <div class="row ml-0">
         <p class="w-110px">Here I show the TypeA section</p>
         <div class="TypeA">
            // TypeA content goes here
         </div>
       </div>
    }
    @else if (string.IsNullOrEmpty(Model.TypeId) && Model.TypeId == "TypeB")
    {
        <div class="row ml-0">
        <p class="w-110px">Here I show the TypeA section</p>
          <div class="TypeA">
            // TypeB content goes here
          </div>
       </div>
    }

Я надеюсь, что это может датьу вас есть представление о том, как вы можете реализовать то, что вам нужно.

Другой вариант, который у вас есть, - это манипулировать каждым контейнером раздела, показывающим / скрывающим в зависимости от выбора пользователя. Тем не менее, я буду рекомендовать первый вариант.

regards,

...