Pasted

/********************************
*** 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;
        });
    }
})