barebones

/********************************
*** SignupController.cs ***
*********************************/

namespace assignment_5.Controllers
{
    public class SignupController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
}

/********************************
*** ParticipantsController.cs ***
*********************************/

namespace assignment_5.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class ParticipantsController : ControllerBase
    {
        private readonly ApplicationDbContext _context;

        // Dependency Inject Database Context
        public ParticipantsController(ApplicationDbContext context)
        {
            _context = context;
        }

        // Grab all participants from the database and return them as a list
        // GET api/Signup
        [HttpGet]
        public async Task<ActionResult<IEnumerable<Participant>>> GetParticipantsAsync()
        {
            return await _context.Participants.ToListAsync();
        }
}

/**************************
****** index.cshtml *******
**************************/

<!-- Du trenger kun et element som Vue kan "hekte" seg på. ID == navnet som skal stå i el i site.js -->
div id="app"></div>

/**************************
********* site.js *********
**************************/

<script src="...link-til-axios"></script>

let url = "/api/participants/";

let app = new Vue({
    el: "#app",
    data: {
        participants: []
    },

    // Her ser du koss man iterere over data fra APIen. Data feltet vårt har en entry "participants".
    // I metoden, created, som kalles automatisk når vue opprettes, så sørge me for at this.participants
    // mottar data ved å bruke axios.get på URL. Merk at url = /api/participants. Den bruke altså "HTTP GET" metoden
    // i ParticipantsController.

    template: `
    <div>
        <ol>
            <li v-for="participant in participants">
                <p>{{ participant.id }} - {{ participant.name }} - {{ participant.email }} - {{ participant.age }} </p>
            </li>
        </ol>
    </div>

    created() {
        axios.get(url).then((response) => {
            this.participants = response.data;
        });
    }
})