Question

У меня есть приложение C# ASP. Net для веб-форм, и мы используем Bootstrap 4. Исходя из некоторых критериев, я хотел бы показать div в другом разделе страницы. Например, если Джилл вошла в систему, я хочу показать некоторые данные, связанные с ее отделом, в правой части страницы. Все остальное слева. Если Пит залогинен, информация его отдела должна отображаться справа. В противном случае все остальные данные будут слева.

Я открыт для предложений и вещей для поиска. Пробные карты, панели и др. c.

Если Пит залогинен ...

DPAMonty · Answer 1 · 16 марта 2020

Для двух разделов я рекомендую использовать две карты: https://getbootstrap.com/docs/4.4/components/card/

Для ящиков коллег группа пользовательских списков контента выглядит адаптированной: https://getbootstrap.com/docs/4.4/components/list-group/#custom -content

https://codepen.io/dpamonty/pen/YzXLGbY

<div class="row">
  <div class="col-md-6">
    <div class="card">
      <div class="card-header">
        Section A
      </div>
      <div class="card-body">
        <div class="list-group">
          <a href="#" class="list-group-item list-group-item-action">
            <div class="d-flex w-100 justify-content-between">
              <h5 class="mb-1">Bob</h5>
              <small class="text-muted">Other useful info</small>
            </div>
            <p class="mb-1">Bob's stuff here.</p>
          </a>
          <a href="#" class="list-group-item list-group-item-action">
            <div class="d-flex w-100 justify-content-between">
              <h5 class="mb-1">Jill</h5>
              <small class="text-muted">Other useful info</small>
            </div>
            <p class="mb-1">Jill's stuff here.</p>
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="card">
      <div class="card-header">
        Section B
      </div>
      <div class="card-body">
        <div class="list-group">
          <a href="#" class="list-group-item list-group-item-action active">
            <div class="d-flex w-100 justify-content-between">
              <h5 class="mb-1">Pete</h5>
              <small>Other useful info</small>
            </div>
            <p class="mb-1">Pete's stuff here.</p>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

ОБНОВЛЕНИЕ

Сделать все динамично c, приятно опция может быть Vue. js, если вы с ней знакомы. Это очень удобно для связывания данных с DOM элегантным и простым способом. Вам нужно всего лишь написать код одного отдельного элемента div для каждого раздела и связать данные с помощью атрибута v-for. В этом примере зарегистрированные коллеги обновляются каждую секунду (функция setInterval()). Я рекомендую использовать Ajax для извлечения ваших вошедших / выключенных коллег и реализации методов поиска с помощью ASP. NET [WebMethod] в коде позади.

Новый CodePen с Dynami c Содержание:

https://codepen.io/dpamonty/pen/RwPyojq

Ссылки:

Методы веб

Ajax используя Ax ios в методах Vue