I am trying to delete some category using ASP.NET Core and Entity Framework Core. When I click "delete", it shows an error
This page isn't working. If the problem continues, contact the site owner. HTTP ERROR 405
If I try to debug, it never hits the breakpoint I set. It never goes to the controller. Why is that?
Here is my code - this is controller:
using Microsoft.AspNetCore.Mvc;
using practiceBookstore.Data;
using practiceBookstore.Data.Repository.IRepository;
using practiceBookstore.Models;
namespace practiceBookstore.Controllers
{
public class CategoryController : Controller
{
private readonly ICategoryRepository _categoryRepository;
public CategoryController(ICategoryRepository categoryRepository)
{
_categoryRepository = categoryRepository;
}
public IActionResult Index()
{
List<Category> Categories = _categoryRepository.GetAll().ToList();
return View(Categories);
}
public IActionResult Create()
{
return View();
}
[HttpPost]
public IActionResult Create(Category category)
{
if (category == null)
{
return NotFound();
}
if (ModelState.IsValid)
{
_categoryRepository.Add(category);
_categoryRepository.Save();
return RedirectToAction("Index");
}
return View(category);
}
public IActionResult Edit(int? id)
{
if (id == null || id == 0)
{
return NotFound();
}
Category? category= _categoryRepository.Get(u => u.CategoryId == id);
if (category == null)
{
return NotFound();
}
return View(category);
}
[HttpPost]
public IActionResult Edit(Category category)
{
if (category == null)
{
return NotFound();
}
if (ModelState.IsValid)
{
_categoryRepository.Update(category);
_categoryRepository.Save();
return RedirectToAction("Index");
}
return View(category);
}
[HttpPost]
public IActionResult Delete(int? id)
{
if (id == 0 || id == null)
{
return NotFound();
}
Category ?category= _categoryRepository.Get(c => c.CategoryId == id);
if (category == null)
{
return NotFound();
}
_categoryRepository.Remove(category);
_categoryRepository.Save();
return RedirectToAction("Index");
}
}
}
This is index page of category, where the edit and delete buttons are:
@model List<Category>
<h1>Category List</h1>
<a asp-action="Create" asp-controller="Category" class="btn bg-dark text-white">Create new Category</a>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Name</th>
<th>Display Order</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach(var i in Model)
{
<tr>
<td>@i.Name</td>
<td>@i.DisplayOrder</td>
<td>
<a asp-action="Edit" asp-controller="Category" asp-route-id="@i.CategoryId" class="btn btn-success">Edit</a>
<a asp-controller="Category" asp-action="Delete" asp-route-id="@i.CategoryId" class="btn btn-danger">Delete</a>
</td>
</tr>
}
</tbody>
</table>
I use repository pattern for database.
Here is IRepository:
using System.Linq.Expressions;
namespace practiceBookstore.Data.Repository.IRepository
{
public interface IRepository<T> where T : class
{
IEnumerable<T> GetAll();
T Get(Expression<Func<T, bool>> filter);
void Add(T entity);
void Remove(T entity);
void RemoveRange(IEnumerable<T> entities);
}
}
Here is the implementation:
using Microsoft.EntityFrameworkCore;
using practiceBookstore.Data.Repository.IRepository;
using System.Linq.Expressions;
namespace practiceBookstore.Data.Repository
{
public class Repository<T> : IRepository<T> where T : class
{
private readonly ApplicationDbContext _db;
internal DbSet<T> Dbset;
public Repository(ApplicationDbContext db)
{
_db = db;
this.Dbset = _db.Set<T>();
}
public void Add(T entity)
{
Dbset.Add(entity);
}
public T Get(Expression<Func<T, bool>> filter)
{
IQueryable<T> query = Dbset.Where(filter);
return query.FirstOrDefault();
}
public IEnumerable<T> GetAll()
{
IQueryable<T> query = Dbset;
return query.ToList();
}
public void Remove(T entity)
{
Dbset.Remove(entity);
}
public void RemoveRange(IEnumerable<T> entities)
{
Dbset.RemoveRange(entities);
}
}
}
This is ICategoryRepository:
using practiceBookstore.Models;
namespace practiceBookstore.Data.Repository.IRepository
{
public interface ICategoryRepository : IRepository<Category>
{
void Update(Category category);
void Save();
}
}
This is implementation:
using practiceBookstore.Data.Repository.IRepository;
using practiceBookstore.Models;
using System.Linq.Expressions;
namespace practiceBookstore.Data.Repository
{
public class CategoryRepository : Repository<Category>, ICategoryRepository
{
private readonly ApplicationDbContext _db;
public CategoryRepository(ApplicationDbContext db) : base(db)
{
_db = db;
}
public void Save()
{
_db.SaveChanges();
}
public void Update(Category category)
{
_db.Update(category);
}
}
}
When I click delete, I expected it the code to delete the category and redirect to the index page.
The problem here seems like: You are calling a controller method which supports HTTP POST requests only and your delete button on click supports call to HTTP GET method, in order to call the delete method what you can do is:
wrap delete button in form object to initiate a post:
< form asp-action="Delete" asp-controller="Category" asp-route-id="@i.CategoryId" method="post" style="display:inline;"> < button type="submit" class="btn btn-danger">Delete </ form>
This shall work and your request should reach the controller, apart of that there is another solution which involve javascript, and using onclick methods + ajax call for that you can do is: Make your Delete method in controller a HTTP delete request or you can leave it to HTTP POST but my suggestion will be to convert to HTTP DELETE REQUEST.
Your DELETE method declaration can look like:
[HttpDelete]
public IActionResult Delete(int? id)
and change its return statement From:
return RedirectToAction("Index");
To:
return Ok();
and view can look like with JS code:
@model List<Category>
<h1>Category List</h1>
<a asp-action="Create" asp-controller="Category" class="btn bg-dark text-white">Create new Category</a>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Name</th>
<th>Display Order</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach(var i in Model)
{
<tr>
<td>@i.Name</td>
<td>@i.DisplayOrder</td>
<td>
<a asp-action="Edit" asp-controller="Category" asp-route-id="@i.CategoryId" class="btn btn-success">Edit</a>
<button class="btn btn-danger delete-category" data-id="@i.CategoryId">Delete</button>
</td>
</tr>
}
</tbody>
</table>
@section Scripts {
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
$('.delete-category').click(function () {
var id = $(this).data('id');
if (confirm('Are you sure you want to delete this category?')) {
$.ajax({
url: '/Category/Delete/' + id,
type: 'DELETE',
success: function () {
window.location.href = '/Category';
},
error: function (xhr, status, error) {
alert('An error occurred: ' + xhr.responseText);
}
});
}
});
});
</script>
}
Hope this helps, and this is what you were looking for.