ASP.NET core MVCでのＵＩ変更（随時更新）

2023.05.09

正直自分はHTMLとかCSSとかはさっぱりわからない。とりあえず現在はBootstrap(https://getbootstrap.com/)に行ってサンプルを持ってきて記載する、しかできないので、その辺のメモを記載。

ドロップダウン

Navbarで検索。

       <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>

リンク作成

例えば上記のActionと表示されているところでPage1/Createに飛びたいときは

<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
  <li><a class="dropdown-item"
    asp-area=""
    asp-controller="Page1"
    asp-action="Create">Action</a>
  </li>
</ul>

HTML,XAMLはほんと苦手、、、

フォーム

名字と名前を入力するようなフォーム

<form method="post">
    <div class="mb-3">
        <label class="form-label">名</label>
        <input type="text" class="form-control" id="firstName">
    </div>
    <div class="mb-3">
        <label class="form-label">姓</label>
        <input type="text" class="form-control" id="secondName">
    </div>
    <button type="submit" class="btn btn-dark">決定</button>
</form>

探してコピペしかできんな。

テーブル

表みたいな表示をしたいときは、Tableで探す。

<table class="table">
  <thead>
    <tr>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Otto</td>
      <!--Razorを使うときはここでループを書く-->
      <!-- 
      @foreach (var item in items)
      {
        <tr>
          <td>@item.Name</td>
        </tr>
      }
      -->
    </tr>
  </tbody>
</table>