Choosing a Front-End for .NET Development

Here’s a practical guide to pairing .NET with front-end options, including code examples to help you decide:

---

1. Traditional HTML/JavaScript + Lightweight Libraries

Example 1: HTMX + .NET API

• Goal: Fetch data from a .NET API and update the page without writing JavaScript.
• Backend (C#) Return HTML instead of JSON using Razor views:

// WeatherController.cs  
[HttpGet("html")]  
public IActionResult GetWeatherHtml()  
{  
    var forecasts = new[] { "Sunny", "Cloudy", "Rainy" };  
    return PartialView("_WeatherPartial", forecasts);  
}  

Create a Razor partial view (_WeatherPartial.cshtml):

@model string[]  
<ul class="weather-list">  
    @foreach (var forecast in Model)  
    {  
        <li>@forecast</li>  
    }  
</ul>  

• Frontend (HTML with HTMX)

<!-- Load HTMX -->  
<script src="https://unpkg.com/htmx.org"></script>  

<!-- Button triggers HTML response, replaces #weather-container -->  
<button  
  hx-get="/weather/html"  
  hx-target="#weather-container"  
  hx-indicator="#loading"  
>  
  Load Weather  
</button>  

<!-- Loading spinner (shown during request) -->  
<div id="loading" class="hidden">Loading...</div>  

<!-- Where the HTML response will be inserted -->  
<div id="weather-container"></div>  

<style>  
  .hidden { display: none; }  
  [hx-indicator="#loading"]:not([hx-disabled-elt]) + #loading {  
    display: block;  
  }  
</style>  

Example 2: Alpine.js + Razor Pages

• Goal: Create a reactive counter without complex setup.
• Frontend (Razor Page):

  <!-- Counter.cshtml -->
  <div x-data="{ count: 0 }">
      <button @click="count++">+</button>
      <span x-text="count"></span>
      <button @click="count--">-</button>
  </div>
  <script src="https://unpkg.com/alpinejs" defer></script>

---

2. Modern Frameworks (React/Vue/Angular)

Example 1: React + .NET Web API

• Goal: Build a dynamic list of items fetched from a .NET API.
• React Component:

  // App.jsx
  import { useEffect, useState } from 'react';

  function App() {
      const [items, setItems] = useState([]);

      useEffect(() => {
          fetch('/api/items')  // Calls your .NET API
              .then(res => res.json())
              .then(data => setItems(data));
      }, []);

      return (
          <ul>
              {items.map(item => <li key={item.id}>{item.name}</li>)}
          </ul>
      );
  }

• Setup: Use the dotnet new react template for a preconfigured React + .NET project.

Example 2: Vue + .NET

• Goal: Display a form that submits data to a .NET API.
• Vue Component:

  <!-- FormComponent.vue -->
  <template>
    <form @submit.prevent="submitForm">
      <input v-model="name" placeholder="Enter name" />
      <button type="submit">Save</button>
    </form>
  </template>

  <script>
  export default {
      data() {
          return { name: '' };
      },
      methods: {
          submitForm() {
              fetch('/api/users', {
                  method: 'POST',
                  headers: { 'Content-Type': 'application/json' },
                  body: JSON.stringify({ name: this.name })
              });
          }
      }
  };
  </script>

---

3. Blazor (C# on the Front-End)

Example: Blazor Component

• Goal: Create an interactive list using C# instead of JavaScript.
• Component:

  <!-- Weather.razor -->
  @page "/weather"
  @inject HttpClient Http

  <h3>Weather Forecast</h3>

  @if (forecasts == null) {
      <p>Loading...</p>
  } else {
      <ul>
          @foreach (var forecast in forecasts)
          {
              <li>@forecast</li>
          }
      </ul>
  }

  @code {
      private string[] forecasts;

      protected override async Task OnInitializedAsync()
      {
          // Calls your .NET API directly
          forecasts = await Http.GetFromJsonAsync<string[]>("api/weather");
      }
  }

---

When to Use What?

Scenario	Recommended Approach
Simple CRUD app	HTML + HTMX/Alpine.js + Razor
Team knows JavaScript well	React/Vue + .NET Web API
Avoid JavaScript entirely	Blazor
Legacy app maintenance	jQuery + MVC

Key Takeaways:

• For quick results, stick to Razor Pages with Alpine.js or HTMX.
• For complex UIs (e.g., dashboards), use React/Vue with a .NET Web API.
• If you hate JavaScript, Blazor is your friend.