Razor Pages, another way to write in it...ala React :-)
Published: 2020-10-05 14:29:19

I am a little desesparated whenever I see very long HTML code in Razor pages.
So I showed my co workers antoher way to write code in Razor Pages, it is like JSX in Razor :-)

```csharp
@{
  void Style(string color)
  {
    <style>
      .ba-bg-lghtgrey {
        background: #F0F0F0;
      }

      .ba-hide {
        display: none;
      }

      .ba-barre {
        background: @color !important;
        color: black;
        height:50px;
      }

      .ba-barre-left {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
        color: white;
      }

      .ba-barre-right {

        margin-left: 0.5rem;
        margin-right: 0.5rem;
        color: white;
      }

      .ba-barre-center {
        text-align: center;
        width:75%;
      }

      .ba-grow-input-group {
        flex-grow: 1;
        -webkit-transition: all .3s -.1s ease-in-out;
        transition: all .3s -.1s ease-in-out;
        margin-left: 0.25rem;
        margin-right: 0.25rem;
      }

      .ba-brand {
        font-size: 1.5rem;
        color: white;
      }

      .ba-btn-clear {
        height: 38px;
        border-top: 1px solid rgb(206, 212,218) !important;
        border-bottom: 1px solid rgb(206, 212,218) !important;
        border-radius: 0;
        background: white;

      }

      .ba-btn-search {
        border-top: 1px solid rgb(206, 212,218) !important;
        border-bottom: 1px solid rgb(206, 212,218) !important;
        height: 38px;
      }

      .ba-form-control {
        border-top-left-radius: 3px !important;
        border-bottom-left-radius: 3px !important;
      }

      input::-ms-clear {
        display: none
      }
    </style>
  }

  void ClearIcon()
  {
    <svg height="18" width="18" viewBox="0 2 16 16" fill="black">
      <path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
    </svg>
  }

  void SearchIcon()
  {
    <svg width="18" height="18" viewBox="2 3 20 20">
      <path fill="#000000" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"></path>
    </svg>
  }

  void Logo()
  {
    <div>
      <span class="d-none d-lg-block ">
        <svg height='45px' width='45px' fill='#ff0000' version='1.1' viewBox='-2 -2 35 35'
             x='0px' y='0px' xmlSpace='preserve'>
          <g>
            <path d='M20.682,3.732C20.209,3.26,19.582,3,18.914,3s-1.295,0.26-1.77,0.733l-1.41,1.412   C15.261,5.617,15,6.245,15,6.914c0,0.471,0.129,0.922,0.371,1.313L1.794,13.666c-0.908,0.399-1.559,1.218-1.742,2.189   c-0.185,0.977,0.125,1.979,0.834,2.687l12.72,12.58c0.548,0.548,1.276,0.859,2.045,0.877C15.669,32,15.711,32,15.729,32   c0.202,0,0.407-0.021,0.61-0.062c0.994-0.206,1.808-0.893,2.177-1.828l5.342-13.376c0.402,0.265,0.875,0.407,1.367,0.407   c0.67,0,1.297-0.261,1.768-0.733L28.4,15c0.477-0.474,0.738-1.103,0.738-1.773s-0.262-1.3-0.732-1.768L20.682,3.732z    M16.659,29.367c-0.124,0.313-0.397,0.544-0.727,0.612c-0.076,0.016-0.153,0.022-0.229,0.021c-0.254-0.006-0.499-0.108-0.682-0.292   L2.293,17.12c-0.234-0.233-0.337-0.567-0.275-0.893c0.061-0.324,0.279-0.598,0.582-0.73l6.217-2.49   c4.189,1.393,8.379,0.051,12.57,4.522L16.659,29.367z M26.992,13.58l-1.414,1.413c-0.195,0.196-0.512,0.196-0.707,0l-1.768-1.767   l-1.432,3.589l0.119-0.303c-3.01-3.005-6.069-3.384-8.829-3.723c-0.887-0.109-1.747-0.223-2.592-0.405l8.491-3.401l-1.715-1.715   c-0.195-0.195-0.195-0.512,0-0.707l1.414-1.415c0.195-0.195,0.512-0.195,0.707,0l7.725,7.727   C27.189,13.068,27.189,13.385,26.992,13.58z'
                  fill='#ffffff' />
            <path d='M16.5,21c1.378,0,2.5-1.121,2.5-2.5S17.879,16,16.5,16c-1.379,0-2.5,1.121-2.5,2.5S15.122,21,16.5,21z    M16.5,17c0.828,0,1.5,0.672,1.5,1.5S17.328,20,16.5,20c-0.829,0-1.5-0.672-1.5-1.5S15.671,17,16.5,17z'
                  fill='#ffffff' />
            <path d='M29.5,0C28.121,0,27,1.121,27,2.5S28.121,5,29.5,5S32,3.879,32,2.5S30.879,0,29.5,0z M29.5,4   C28.672,4,28,3.328,28,2.5S28.672,1,29.5,1S31,1.672,31,2.5S30.328,4,29.5,4z'
                  fill='#ffffff' />
            <path d='M8,17c0,1.103,0.897,2,2,2s2-0.897,2-2s-0.897-2-2-2S8,15.897,8,17z M10,16c0.552,0,1,0.447,1,1   s-0.448,1-1,1s-1-0.447-1-1S9.448,16,10,16z'
                  fill='#ffffff' />
            <circle cx='13' cy='23' fill='#ffffff' r='1' />
            <circle cx='29' cy='8' fill='#ffffff' r='1' />
          </g>
        </svg>
      </span>
    </div>
  }

  void SearchComp()
  {
    <div class="input-group">
      <label for="search" style="width:0; height:0">Search</label>
      <input type="search" placeholder="What're you searching for?" class="form-control ba-form-control">
      <div class="input-group-append">
        <button id="button-search" type="submit" class="ba-btn-clear btn btn-light" aria-label="search button">
          @{ ClearIcon();}
        </button>
      </div>
      <div class="input-group-append">
        <button id="button-search" type="submit" class="btn btn-light ba-btn-search ba-bg-lghtgrey" aria-label="search button">
          @{ SearchIcon();}
        </button>
      </div>
    </div>
  }

  void LeftPart()
  {
    <div class="ba-barre-left d-flex align-items-center">
      <div>Hamb</div>
      <div class="ml-2 mr-2">@{Logo();}</div>
      <div class="ba-brand">Anomalie</div>
    </div>
  }

  void CenterPart()
  {
    SearchComp();
  }

  void RighPart()
  {
    <div class="ba-barre-right d-flex justify-content-around">
      <div>Filtres&nbsp;(2)</div>
      <div>Effacer</div>
      <div>Applis</div>
      <div>Av</div>
      <div>Profile</div>
      <div></div>
    </div>
  }

  async Task BarreAppli()
  {
    <nav>
      <div class="ba-barre d-flex justify-content-between align-items-center box-shadow">
        <div class="ba-barre-left">@{LeftPart();}</div>
        <div class="ba-barre-center">@{CenterPart();}</div>
        <div class="ba-barre-right">@{RighPart();}</div>
      </div>
    </nav>
  }
}

// Entry Point
@{
  Style("#005E8A");
  await BarreAppli();
}

<script>
  // Elements
  const searchGroup = document.querySelector("input[type='search']");
  const barreLeft = document.getElementsByClassName("ba-barre-left")[0];
  const barreRight = document.getElementsByClassName("ba-barre-right")[0];
  const ancestorSearchGroup = searchGroup.parentElement.parentElement;

  /*-------------------------- Events ------------------------*/
  // Hide side parts
  function hideSideParts(hide) {
    if (hide) {
      barreLeft.classList.add("ba-hide");
      barreRight.classList.add("ba-hide");
    }
    else {
      barreLeft.classList.remove("ba-hide");
      barreRight.classList.remove("ba-hide");
    }
  }

  // Expand Input on focus
  searchGroup.addEventListener("focus", function (e) {
    e.preventDefault();
    hideSideParts(true);
    ancestorSearchGroup.classList.add("ba-grow-input-group");
  })

  // Restore Input
  document.addEventListener("click", function (e) {
    e.target != searchGroup && hideSideParts(false);
  })

</script>
```