Javascript asp.net core html 500 error

[tj.jackel]

Beste Tweakers,

Deze vraag gaat over een stukje asp.net core en javascript code.
Het stukje software waarover het gaat heeft als doel een life event (bijv. geboorte, begrafenis etc.) aan een persoon te koppelen.
Het lifeEvent wordt aangemaakt waarbij het gekoppeld wordt aan een persoon. De persoon krijgt hierbij een rol. Bijvoorbeeld bij een geboorte de rol vader.

Voor het aanmaken van de lifeEvent is er een view pagina met invoer voor algemene lifeEvent gegevens. Daarnaast wordt op deze pagina het type lifeEvent gekozen en op basis hiervan wordt een bijbehorende partial in de pagina geladen.
Dit maakt het mogelijk om per lifeEvent specifieke informatie toe te voegen. In een andere partial op de pagina worden de rollen geladen.

Het ophalen van de partials en selecteren van de rollen werkt. De software werkt echter niet wanneer je op save drukt. Er wordt dan een HTTP500 fout gegeven.
Na veel debuggen zijn we er nog niet uit wat de oorzaak is. Waar we tegenaanlopen is dat je bij het debuggen "verzuipt" in de informatie die in de javascript is toegekend aan het formData model.

Ziet iemand wat er fout gaat of heeft suggesties?

Hieronder is de relevante code gegeven. Wanneer op de save knop gedrukt wordt wordt een javascript functie aangeroepen. Deze functie zorgt ervoor dat de gegevens van het lifeEvent, de specifieke lifeEvent gegevens (afhankelijk van het type lifeEvent) en de rol worden samengevoegd. Bij het debuggen is ook naar voren gekomen dat de functie wordt aangeroepen. Er wordt ook gekozen informatie meegegeven (niet kunnen verifiëren of dit compleet is).
Hierna moet de functie in de controller worden aangeroepen en de data worden meegegeven.
Ergens in het javascript model lijkt het fout te gaan. Bij het debuggen wordt de functie in de controller niet aangeroepen.

T.b.v. leesbaarheid is de controller code en view code niet in zijn geheel gegeven.

View LifeEvent

ASP:

@using Models.Enums
@model Models.View.LifeEvent


<form asp-action="Edit">
    <div class="card">
        <div class="card-header">
            <div class="d-flex flex-column align-items-center text-center">
                <h4>Event details</h4>
            </div>
        </div>
    CODE WEGGELATEN VOOR DE LEESBAARHEID.
        <div class="card-footer">
            <div class="form-group">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="submit" id="submit" class="btn btn-success" value="Finished">Save</button>
            </div>
        </div>
    </div>
</form>

Javascript code

JavaScript:

loadedObj.find("*.EventLoader").each(function (index, value) {
        var obj = $(this);
        var selector = obj.find(".EventSelector");
        var details = obj.find(".EventDetails");
        var id = obj.find("#LifeEventId").val();

        $("#submit").click(function (e) {
            e.preventDefault();
            //console.log($('form'));
            var form = $(this).parents('form:first')[0];
            //console.log(form);
            //var form = $('form')[0];
            var formData = new FormData(form);

            $(".Roles").find("*.SomeRole").each(function (index, value) {
                var role = $(value);
                var roleSelect = role.find(".RoleTypes");
                var e = roleSelect.find("option:selected");
                var personId = role.find(".SearchDropdownEvents").attr("data-selected");
                formData.append("Roles[" + index + "].RoleType", e.val());
                formData.append("Roles[" + index + "].Person.PersonId", personId);

            });

            $.ajax({
                method: 'post',
                url: "/Events/Edit",
                data: formData,
                processData: false,
                contentType: false,
                success: function () {
                    location.reload();
                },
                error: function (response) {
                    alert("Error code: " + response.status);
                }
            });
        });

        selector.on('change', function () {
            var selectedValue = this.value;
            LoadDetails(selectedValue);
            UpdateRoles();
        });

Controller code

C#:

[HttpPost]
       
        public async Task<IActionResult> Edit(
            Models.View.LifeEvent modelEvent,
            Models.View.Events.Birth modelBirth,
            Models.View.Events.Death modelDeath)
        {
            CODE WEG GELATEN T.B.V LEESBAARHEID
                }
                await _context.SaveChangesAsync();
                //return Redirect(Request.Headers["Referer"].ToString());
                return Ok();
            }
            return NotFound();
        }

[Onbekend]

Een 500-fout is een probleem aan de kant van de server.
Kijk eens in de logs van de web service op welke regel deze fout wordt veroorzaakt?

[RedFox]

Als de controller niet aangeroepen wordt zal hetgeen wat je verstuurt waarschijnlijk niet overeenkomen met wat je controller qua model verwacht. Maar als je je network tab in je browser opent en naar de request kijkt zal je ook een specifiekere melding zien dan alleen error 500.

[Marco1994]

Je probleem zit hem niet in je javascript code (client side) maar in je asp code (server side). Je krijgt een error code 500, dat is een internal server error. Je zult dus je backend moeten debuggen.

Ik denk dat juist het stukje CODE WEG GELATEN T.B.V LEESBAARHEID interessant is.

Wat overigens ook interessant is, is dat je in je controller 3 type modellen probeert te binden. Dat lijkt me ook niet helemaal de bedoeling.

[ Voor 20% gewijzigd door Marco1994 op 04-05-2022 22:20 ]

[Marco1994]

RedFox schreef op woensdag 4 mei 2022 @ 22:14:
Als de controller niet aangeroepen wordt zal hetgeen wat je verstuurt waarschijnlijk niet overeenkomen met wat je controller qua model verwacht. Maar als je je network tab in je browser opent en naar de request kijkt zal je ook een specifiekere melding zien dan alleen error 500.

Dit lijkt me stug, dan krijg je een 40x error code. Bij een 500 krijg je (hopelijk) in je network tab geen stacktrace te zien.

[RedFox]

Marco1994 schreef op woensdag 4 mei 2022 @ 22:18:
[...]

Dit lijkt me stug, dan krijg je een 40x error code. Bij een 500 krijg je (hopelijk) in je network tab geen stacktrace te zien.

In debug mode zal je wel een stacktrace zien, maar je hebt gelijk dat model validatie een 400 error is.

[biomass]

Bij foutzoeken zijn de foutmelding en de bron van de foutmelding het belangrijkst. Welke 500 fout kreeg je post-mortem @tj.jackel? En wat vond je browser er van? Gaf de F12 console geen enkele context informatie?

[tj.jackel]

Bedankt voor de snelle reacties! Als ik een breakpoint zet op regel 25 van de javascript code en vervolgens op continue druk krijg ik de volgende foutmelding in de output window van VisualStudio 2022:

System.InvalidOperationException: Could not create an instance of type 'Models.View.LifeEvent'. Model bound complex types must not be abstract or value types and must have a parameterless constructor. Record types must have a single primary constructor. Alternatively, give the 'modelEvent' parameter a non-null default value.

Uit de developerstools van de browser zag ik niet direct iets naar voren komen. Maar het kan ook zijn dat ik erover heen kijk.

[ Voor 11% gewijzigd door tj.jackel op 04-05-2022 22:35 ]

[Xudonax]

Dat geeft het al aan, je hebt geen constructor die 0 parameters heeft. Deze heb je wel nodig om model binding te doen. Ik weet uit mijn hoofd even niet of je weg kunt komen met een private constructor, maar je gaat een constructor toe moeten voegen zonder parameters.

Een volgende stap zou zijn om een wrapper object aan te maken waar de drie objecten die je controller verwacht nu inzitten. Dan kunnen alle modellen gebind worden door ASP.NET. Dat kan bijvoorbeeld met een object als:

code:

public class EditWrapper {
    public Models.View.LifeEvent modelEvent {get;set;}
    public Models.View.Events.Birth modelBirth {get;set;}
    public Models.View.Events.Death modelDeath {get;set;}
}

[tj.jackel]

Bedankt voor uw bericht. Kunt u iets meer achtergrond informatie geven m.b.t. de nul constructor en het wrapper object en de wijze van implementatie. Momenteel zie ik nog even niet hoe dit het beste geïmplementeerd kan worden. Bedankt voor het meedenken!

[RobIII]

tj.jackel schreef op donderdag 5 mei 2022 @ 11:25:
Kunt u iets meer achtergrond informatie geven m.b.t. de nul constructor en het wrapper object en de wijze van implementatie.

Laten we eens beginnen met de vraag: wat heb je zelf ondernomen nadat je dit geleerd hebt? Heb je gezocht wat een 'nul constructor' is? Heb je getracht het idee erachter te begrijpen, het waarom? Wat heb je gezocht (welke keywords gebruikte je?) en waar kwam je op uit en wat begreep je daar niet aan?

We willen best met je meedenken, maar we verwachten ook dat je zelf wat moeite doet. We gaan niet alles stap-voor-stap uitleggen en je aan het handje houden. Niet omdat we zo vervelend zijn, maar omdat je niets leert als iemand het kant-en-klare antwoord voorgekauwd voor je post

De foutmelding rept over een 'parameterless constructor" (ipv een "nul constructor"); ik zou eens beginnen dat in google te gooien en kijken wat daar uit komt

[ Voor 19% gewijzigd door RobIII op 05-05-2022 11:33 ]

[tj.jackel]

RobIII schreef op donderdag 5 mei 2022 @ 11:31:
[...]

Laten we eens beginnen met de vraag: wat heb je zelf ondernomen nadat je dit geleerd hebt? Heb je gezocht wat een 'nul constructor' is? Heb je getracht het idee erachter te begrijpen, het waarom? Wat heb je gezocht (welke keywords gebruikte je?) en waar kwam je op uit en wat begreep je daar niet aan?

We willen best met je meedenken, maar we verwachten ook dat je zelf wat moeite doet. We gaan niet alles stap-voor-stap uitleggen en je aan het handje houden. Niet omdat we zo vervelend zijn, maar omdat je niets leert als iemand het kant-en-klare antwoord voorgekauwd voor je post

De foutmelding rept over een 'parameterless constructor" (ipv een "nul constructor"); ik zou eens beginnen dat in google te gooien en kijken wat daar uit komt

Een kant en klare oplossing was ook zeker niet de bedoeling. Echter als je soms op internet gaat zoeken kom je verschillende toelichtingen tegen die soms wel / soms niet van toepassing zijn door nuance verschillen. Het is dan best lastig zoeken.

Het probleem bleek dat de lifeEvent abstract was en daardoor kon geen nieuwe instanties aangemaakt worden.

[Woy]

tj.jackel schreef op donderdag 5 mei 2022 @ 20:48:
[...]
Het probleem bleek dat de lifeEvent abstract was en daardoor kon geen nieuwe instanties aangemaakt worden.

Ja, en dat was toch best uit de foutmelding te halen die je hier al toont

Could not create an instance of type 'Models.View.LifeEvent'. Model bound complex types must not be abstract