Untitled

/* View - cshtml */
@{
  ViewData["Title"] = "Dashboard";
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>TestDashboard1</title>
</head>
<body>
<script>
async function fetchData() {
  try {
    const response = await fetch('/api/APIController/availableListings.json'); //I keep getting 404 not found here!!
    if (!response.ok) {
      throw new Error(`Error fetching data: ${response.status}`);
    }
    const data = await response.json();
    displayData(data);
  } catch (error) {
    console.error('Error:', error);
    // Handle errors here, like displaying an error message to the user
  }
}

function displayData(data) {
  const listingsContainer = document.getElementById('listings-container'); // Replace with your container element ID
  listingsContainer.innerHTML = ''; // Clear any existing content

  data.forEach(listing => {
    const listingElement = document.createElement('div');
    listingElement.classList.add('listing'); // Add CSS class for styling

    const listingName = document.createElement('h3');
    listingName.textContent = listing.ListingName;
    listingElement.appendChild(listingName);

    const imageUrl = document.createElement('img');
    imageUrl.src = listing.ImageUrl; // Check if ImageUrl has a valid value
    listingElement.appendChild(imageUrl);

    // Add elements for Category and Location details if needed
    const category = document.createElement('p');
    category.textContent = `Category: ${listing.Category?.propertyName} - ${listing.Category?.propertyType}`; // Check for null values
    listingElement.appendChild(category);

    const location = document.createElement('p');
    location.textContent = `Location: ${listing.Location?.City}, ${listing.Location?.State}, ${listing.Location?.PLZ}`; // Check for null values
    listingElement.appendChild(location);

    listingsContainer.appendChild(listingElement);
  });
}

fetchData();
</script>
</body>
</html>

/*APIController.cs */
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using WebApplication1.Data;
using WebApplication1.Models;
namespace WebApplication1.Controllers;

[Route("api/[controller]")]
[ApiController]
public class APIController : Controller
{

    private readonly ApplicationDbContext _context;

        public APIController(ApplicationDbContext context)
        {
            _context = context;
        }

        [HttpGet("availableListings")] //reference to the availableListings.json
        public async Task<IEnumerable<ListingProjects>> Get()
        {
            return await _context.ListingDBTable.ToListAsync();
        }

        [HttpGet("{id}")]
        public async Task<IActionResult> Get(int id)
        {
            if (id < 1)
                return BadRequest();
            var product = await _context.ListingDBTable.FirstOrDefaultAsync(m => m.Id == id);
            if (product == null)
                return NotFound();
            return Ok(product);

        }

        [HttpPost]
        public async Task<IActionResult> Post(ListingProjects listing)
        {
            _context.Add(listing);
            await _context.SaveChangesAsync();
            return Ok();
        }

        [HttpPut]
        public async Task<IActionResult> Put(ListingProjects listingData)
        {
            if (listingData == null || listingData.Id == 0)
                return BadRequest();

            var listingTask = await _context.ListingDBTable.FindAsync(listingData.Id);
            if (listingTask == null)
                return NotFound();
            listingTask.ListingName = listingData.ListingName;
            listingTask.ImageUrl = listingData.ImageUrl;
            listingTask.Category = listingData.Category;
            listingTask.Location = listingData.Location;
            await _context.SaveChangesAsync();
            return Ok();
        }

        [HttpDelete("{id}")]
        public async Task<IActionResult> Delete(int id)
        {
            if (id < 1)
                return BadRequest();
            var listingDel = await _context.ListingDBTable.FindAsync(id);
            if (listingDel == null)
                return NotFound();
            _context.ListingDBTable.Remove(listingDel);
            await _context.SaveChangesAsync();
            return Ok();

        }


}

/*availableListings.json */
{
  "properties": [
    {
      "property_name": "St Johannes 3",
      "property_type": "2er WG",
      "rent_price_monthly": 600,
      "ad_published_date": "2024-09-15"
    },
    {
      "property_name": "St Sebald A",
      "property_type": "1-Zimmer-Wohnung",
      "rent_price_monthly": 1000,
      "ad_published_date": "2024-09-15"
    },