在页面的不同部分显示 DIV

Question

我有一个 C# ASP.Net 网络表单应用程序，我们正在使用 Bootstrap 4. 根据某些标准，我想在页。例如，如果 Jill 已登录，我想在页面右侧显示一些与她所在部门相关的数据。其他一切都在左边。如果 Pete 已登录，他所在部门的信息应显示在右侧。否则，所有其他数据都在左侧。

我乐于接受建议和要搜索的内容。试用过的卡片、面板等

如果皮特登录...

Answer 1

对于这两个部分，我建议使用两张卡片： 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>

更新

要使所有内容都动态化，Vue.js 是一个不错的选择，如果您熟悉的话。以优雅和简单的方式将数据绑定到 DOM 非常方便。您只需为每个部分编写一个 div 的代码，并使用 v-for 属性绑定数据。在这个例子中，logged-on/off 同事每秒刷新一次（setInterval() 函数）。我建议使用 Ajax 检索您的 logged-on/off 同事，并在后面的代码中使用 ASP.NET [WebMethod] 实现检索方法。

具有动态内容的新 CodePen：

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

参考文献：

Web methods

Ajax using Axios in the Vue methods

在页面的不同部分显示 DIV

Show DIV on different part of page

c#

webforms