I am trying for hours to return a Table as PartialView with the help of C# Razor Pages.
First i got the error the returning model is not equal to the expected model.
I changed the view model and the error was gone.
Now i got the Error:
InvalidOperationException: Multiple constructors accepting all given argument types have been found in type 'System.Collections.Generic.List`1[DantronikOrganizer.Data.Models.UserVacationEntity]'. There should only be one applicable constructor.
I start from the beginning:
I created a Index Page to show users there vacation requests in a table, but if they choose to delete an entry from the table, the entire page would be reloaded. So i though why not using ajax to solve this problem.
I deleted the table in my index page and created a new one in a _TableView.
Now an ajax request should load the view from _TableView into my index page.
Now when a user is deleted an entry from the table, only the table would be reloaded.
Thanks to the new PartialView.
I asked ChatGPT a lot about my problem, but even ChatGPT is not understanding why i get this error.
My Index View
@page
@model DantronikOrganizer.Pages.Vacation.IndexModel
@{
ViewData["Title"] = "Urlaubsanträge";
}
<h1>Übersicht - Urlaubsanträge</h1>
<hr />
<p>
<a class="btn btn-success" asp-page="VacationRequest">Urlaub beantragen</a>
</p>
<form>
<div class="input-group mb-2 w-25">
<input id="yearFilter" asp-for="@Model.FilterYear" class="form-control" placeholder="Nach Jahr filtern" aria-label="Filer by Year" aria-describedby="btnFilter">
<button class="btn btn-outline-secondary" type="submit" id="btnFilter">Filtern</button>
</div>
<span asp-validation-for="@Model.FilterYear" class="text-danger"></span>
<div class="form-check mb-2">
<input id="approvedFilter" asp-for="@Model.FilterIsApproved" class="form-check-input" />
<label class="form-check-label" asp-for="@Model.FilterIsApproved"></label>
</div>
</form>
<hr />
<div class="row">
<div class="col-lg-6">
<h6>Ausgewähltes Jahr: </h6>
<span class="text-primary">Urlaubstage: | Bisher genutzte: | Verfügbare: </span>
</div>
</div>
<div id="partialViewContainer"></div>
<!--Modal Window to delete an entry in the table-->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="deleteModalLabel">Eintrag löschen</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Möchten Sie wirklich den Eintrag löschen?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Abbrechen</button>
<button type="button" class="btn btn-primary" id="deleteButton">Löschen</button>
</div>
</div>
</div>
</div>
@section Scripts{
<script>
function showToast(message) {
Toastify({
text: message,
duration: 5000,
gravity: "top",
position: "center",
style: {
background: "#ff5722"
},
stopOnFocus: true
}).showToast();
}
$(document).ready(function () {
loadPartialView();
$('#yearFilter, #approvedFilter').change(function () {
loadPartialView();
});
});
function loadPartialView() {
var year = $('#yearFilter').val();
var isApproved = $('#approvedFilter').is(':checked') || false;
$.ajax({
url: '@Url.Page("/Vacation/_TableView", "TableView")',
data: { year: year, isApproved: isApproved },
type: 'GET',
success: function (data) {
$('#partialViewContainer').html(data);
}
});
}
function deleteVacation(id) {
var token = $('input[name="__RequestVerificationToken"]').val();
$('#deleteModal').modal('show');
$('#deleteButton').on('click', function () {
if (confirm("Möchten Sie wirklich den Eintrag löschen?")) {
$.ajax({
type: "POST",
url: "/Vacation/Delete?handler=delete",
data: { id: id, __RequestVerificationToken: token },
headers: { "RequestVerificationToken": token },
success: function (response) {
if (response.success) {
showToast(response.message);
loadPartialView();
}
},
error: function (response) {
if (response.error) {
showToast(response.message);
}
}
});
$('#deleteModal').modal('hide');
}
});
}
</script>
}
My PartialView Controller
using DantronikOrganizer.Areas.Identity.Data;
using DantronikOrganizer.Data.Interfaces;
using DantronikOrganizer.Data.Models;
using Microsoft.AspNetCore.Identity;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace DantronikOrganizer.Pages.Vacation
{
public class _TableView : PageModel
{
private readonly IUserVacation _service;
private readonly UserManager<ApplicationUser> _userManager;
public List<UserVacationEntity> UserVacationList { get; set; }
public _TableView(IUserVacation service, UserManager<ApplicationUser> userManager)
{
_userManager = userManager;
_service = service;
}
public async Task<IActionResult> OnGetTableView(int year, bool isApproved)
{
var user = await _userManager.GetUserAsync(User);
UserVacationList = await _service.GetUserVacationByUser(user.Id);
if (!string.IsNullOrEmpty(year.ToString()))
{
UserVacationList = UserVacationList.Where(u => u.DtFrom.Year == year).ToList();
}
if (isApproved)
{
UserVacationList = UserVacationList.Where(x => x.IsApproved).ToList();
}
return Partial("_TableView", UserVacationList);
}
}
}
My Partial View
@page
@model List<DantronikOrganizer.Data.Models.UserVacationEntity>
<table class="table table-hover">
<thead>
<tr>
<th>
@Html.DisplayNameFor(m => m[0].DtFrom)
</th>
<th>
@Html.DisplayNameFor(m => m[0].DtUntil)
</th>
<th>
@Html.DisplayNameFor(m => m[0].DaysRequested)
</th>
<th>
@Html.DisplayNameFor(m => m[0].IsApproved)
</th>
<th></th>
</tr>
</thead>
<tbody>
@if (Model != null && Model.Any())
{
@foreach (var item in Model)
{
<tr>
<td>@Html.DisplayFor(modelItem => item.DtFrom)</td>
<td>@Html.DisplayFor(modelItem => item.DtUntil)</td>
<td>@Html.DisplayFor(modelItem => item.DaysRequested)</td>
<td>@Html.DisplayFor(modelItem => item.IsApproved)</td>
<td>
<a class="btn btn-primary" asp-page="./Edit" asp-route-id="@item.Id">Bearbeiten</a> |
<a class="btn btn-primary" asp-page="./Details" asp-route-id="@item.Id">Details</a> |
<button class="btn btn-danger" onclick="deleteVacation(@item.Id)">Löschen</button>
</td>
</tr>
}
}
else
{
<tr>
<td colspan="5">No vacation entries found.</td>
</tr>
}
</tbody>
</table>
