ASP.NET MVC: Delete and Update Methods Not Working (HTTP ERROR 404)

Question

I'm developing an ASP.NET MVC project, and I'm encountering an issue with the Delete and Update methods in my ExperienceController. The methods are not working, and I receive the following error :

This localhost page isn’t working No web page was found for the web address: https://localhost:7196/Experience/DeleteExperience/6 HTTP ERROR 404

ExperienceController.cs:

using Microsoft.AspNetCore.Mvc;
using PortfolioNET.DAL.Context;
using PortfolioNET.DAL.Entities;

namespace PortfolioNET.Controllers
{
    public class ExperienceController : Controller
    {
        AppDbContext dbContext = new AppDbContext();
        public IActionResult ExperienceList()
        {
            var values = dbContext.Experiences.ToList();
            return View(values);
        }

        [HttpGet]
        public IActionResult CreateExperience()
        {
            return View();
        }

        [HttpPost]
        public IActionResult CreateExperience(Experience experience)
        {
            dbContext.Experiences.Add(experience);
            dbContext.SaveChanges();
            return RedirectToAction("ExperienceList");
        }

        public IActionResult DeleteExperience(int id)
        {
            var value = dbContext.Experiences.Find(id);
            dbContext.Experiences.Remove(value);
            dbContext.SaveChanges();
            return RedirectToAction("ExperienceList");
        }

        [HttpGet]
        public IActionResult UpdateExperience(int id)
        {
            var value = dbContext.Experiences.Find(id);
            return View(value);
        }

        [HttpPost]
        public IActionResult UpdateExperience(Experience experience)
        {
            dbContext.Experiences.Update(experience);
            dbContext.SaveChanges();
            return RedirectToAction("ExperienceList");
        }
    }
}

ExperienceList.cshtml:

@model List<Experience>
@{
    ViewData["Title"] = "ExperienceList";
    Layout = "~/Views/Layout/Index.cshtml";
}


<div class="content">
    <div class="container-fluid">
        <h4 class="page-title">Tables</h4>
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">Striped Rows</div>
                    </div>
                    <div class="card-body">
                        <div class="card-sub">
                            Add <code class="highlighter-rouge">.table-striped</code> to rows the striped table
                        </div>
                        <table class="table table-striped mt-3">
                            <thead>
                                <tr>
                                    <th scope="col">#</th>
                                    <th scope="col">Head</th>
                                    <th scope="col">Title</th>
                                    <th scope="col">Date</th>
                                    <th scope="col">Delete</th>
                                    <th scope="col">Update</th>
                                </tr>
                            <tbody>
                                    @foreach (var item in Model)
                                    {
                                    <tr>
                                        <td>@item.ExperienceId</td>
                                        <td>@item.Head</td>
                                        <td>@item.Title</td>
                                        <td>@item.Date</td>

*                                        <td><a href="/Experience/DeleteExperience/@item.ExperienceId" class="btn btn-danger">Delete</a></td>
                                        <td><a href="/Experience/UpdateExperience/@item.ExperienceId" class="btn btn-warning">Update</a></td>*
                                    </tr>
                                    }

                            </tbody>
                        </table>
                        <a href="/Experience/CreateExperience/" class="btn btn-info btn-lg">Create a New Experience</a>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

I think there's an issue with the part written in italics.

The ID paths are correct and I confirmed that they match the existing data in the databas also he DeleteExperience and UpdateExperience methods are properly implemented in the ExperienceController.I've checked my route configurations and ensured that everything matches in my controller and views, but the issue persists.

Answer 1

According to a comment above, the routing may not be configured to understand the id parameter. So it looks like it may be expecting a URL like this:

/Experience/DeleteExperience?id=6

An easy way to get around this is not to manually construct the URL in the first place. Let the framework do that. Just use an HTML helper to generate the link.

So instead of this:

<td><a href="/Experience/DeleteExperience/@item.ExperienceId" class="btn btn-danger">Delete</a></td>

Something like this:

<td>@Html.ActionLink("Delete", "DeleteExperience", "Experience", new { id = @item.ExperienceId }, new { @class = "btn btn-danger" })</td>