Как я могу отобразить каждый складной индивидуально? (MVC) - PullRequest
Новая
       43

Как я могу отобразить каждый складной индивидуально? (MVC)

2 голосов
/ 22 апреля 2020

В текстовом файле есть строка, например:

oranges, 0

'userData' - это массив, отвечающий за чтение строк из этого текстового файла, которые затем разделяются с помощью ' delimiterChar 'для разделения' апельсинов 'и' 0 '. 0 считается первичным ключом апельсинов и поэтому выступает в качестве уникального идентификатора позиций.

«Апельсины» затем отображаются как заголовок складного bootstrap. Теперь очевидно, что пользователь может добавить столько строк в текстовый файл, сколько потребуется, что приведет к множеству разборных позиций, которые должны открываться независимо от других. Однако, как я понимаю, если я хочу открыть только одну складную машину, все складные машины тоже откроются.

Как показано на рисунке следующим образом:

enter image description here

После нажатия «Апельсины» (или любой другой заголовок по этому вопросу), все три разборные будут открываться одновременно.

Ниже приведен код для разборной: 

@Model.result
        @if (Model.result == "")
        {
            foreach (String dataLine in Model.userData)
            {



                <p>
                    <a data-toggle="collapse" href="#dataLine" role="button" aria-expanded="false" aria-controls="collapseExample">
                        @dataLine.Split(Model.delimiterChar)[0]
                    </a>                    
                </p>

                <div class="collapse" id="dataLine">
                    <div class="card card-body w-25 p-3 collapsible" id="@dataLine.Split(Model.delimiterChar)[1]">
                        <!-- Collapsible content -->
                    </div>
                </div>

            }

        }

Любые предложения о том, как это исправить, будут очень благодарны, спасибо!

1 Ответ

1 голос
/ 22 апреля 2020

В приведенном ниже коде мы добавили переменную счетчика count, которую добавляем к идентификатору цели сворачивания и href сворачиваемого триггера. 

@Model.result
   @if (Model.result == "")
   {
      int count = 0;

      foreach (String dataLine in Model.userData)
      {
         string countString = count.ToString();
         string target = "dataLine"+countString;
         string trigger = "#"+target;

         <p>
            <a data-toggle="collapse" href="@trigger" role="button" aria-expanded="false" aria-controls="collapseExample">
               @dataLine.Split(Model.delimiterChar)[0]
            </a>                    
         </p>

         <div class="collapse" id="@target">
            <div class="card card-body w-25 p-3 collapsible" id="@dataLine.Split(Model.delimiterChar)[1]">
               <!-- Collapsible content -->
            </div>
         </div>

         count++;
      }
   }
...