ASP.NET MVC - modal validation

[anxious_ant]

I know there are a few programmers here so thought I'd widen my search for help.

I am trying to submit a form rendered as modal, but struggling to get this working.
The current code does trigger validation but it opens up a new page, without formatting.

My next attempt is to handle all the validations within the partial view in the modal, something which I've never done before.
If all fails, I suppose I'll just revert to navigating away from the main view and then redirect on successful post, not an ideal UI/UX but at least it's a solution.

Details in the Stack Overflow link

Hopefully someone can assist

[Mr Happy]

You need to use an AJAX call in client-side Javascript (if you don't use JQuery then there are methods to do it in vanilla JS, this is just easier)

https://api.jquery.com/Jquery.ajax/
https://www.w3schools.com/xml/ajax_intro.asp

Use the .serialize() call to serialize the form. (Again, for ease - if you don't use JQuery, you can find vanilla JS methods)

https://api.jquery.com/serialize/

Ensure your AJAX call content-type is x-www-form-urlencoded

https://developer.mozilla.org/en-US/docs/Web/HTTP/...

Make the method you send the form data to a HTTP POST method

https://learn.microsoft.com/en-us/dotnet/api/micro...

Use model binding to bind the incoming data to the model (you'll need to make sure you use the same attribute names, this can be achieved by using the same model on your form as you do on your controller method)

Do whatever processing you need to do to the data in your C# method, then return 200 OK and the AJAX call will be considered as a successful operation, you can also return data from the AJAX call if you want to present some data back to the user (such as "Saved as order number #12345-67" or whatever), or you can just make the AJAX success display its own "Order received" message directly.

A couple more links on this topic:

https://www.c-sharpcorner.com/article/ajax-in-asp-...
https://www.yogihosting.com/jquery-ajax-aspnet-cor...

[anxious_ant]

Cheers Mr Happy, I will have a look at your links and try it out.

On a side note, I’ve made an OpenAi account and have asked chef GPT the same question and I am VERY impressed by the code it’s suggesting. The more I tweak my prompts the better the suggested code is.

This AI thing is definitely the future.

[Mr Happy]

That's why I gave pointers and links rather than code that will do the job.

Asking chatGPT is like paying the bright kid at school to do your homework for you imo. It fulfills the objective but that's literally it.

[anxious_ant]

Mr Happy said:

That's why I gave pointers and links rather than code that will do the job.

Asking chatGPT is like paying the bright kid at school to do your homework for you imo. It fulfills the objective but that's literally it.

IMO the code suggested by chatGPT is good, but it’s not something that you can use verbatim. It’s definitely saved me some time as the results returned by chatGPT took me longer to Google.

ETA: I did try the serialise method from my main View but that didn’t seem to work. It redirects to the partial view instead of handling the content on the main view. Perhaps I will update my Stack Overflow post with the latest code.

Edited by anxious_ant on Friday 17th March 20:42

[anxious_ant]

Mr Happy said:

You need to use an AJAX call in client-side Javascript (if you don't use JQuery then there are methods to do it in vanilla JS, this is just easier)

https://api.jquery.com/Jquery.ajax/
https://www.w3schools.com/xml/ajax_intro.asp

Use the .serialize() call to serialize the form. (Again, for ease - if you don't use JQuery, you can find vanilla JS methods)

https://api.jquery.com/serialize/

Ensure your AJAX call content-type is x-www-form-urlencoded

https://developer.mozilla.org/en-US/docs/Web/HTTP/...

Make the method you send the form data to a HTTP POST method

https://learn.microsoft.com/en-us/dotnet/api/micro...

Use model binding to bind the incoming data to the model (you'll need to make sure you use the same attribute names, this can be achieved by using the same model on your form as you do on your controller method)

Do whatever processing you need to do to the data in your C# method, then return 200 OK and the AJAX call will be considered as a successful operation, you can also return data from the AJAX call if you want to present some data back to the user (such as "Saved as order number #12345-67" or whatever), or you can just make the AJAX success display its own "Order received" message directly.

A couple more links on this topic:

https://www.c-sharpcorner.com/article/ajax-in-asp-...
https://www.yogihosting.com/jquery-ajax-aspnet-cor...

Hi, I have tried this solution, mainly following guidelines from a ASP.NET Core example here which is exactly what I am trying to do.

However I am getting 500 error on the post.
The only difference from the example is that I don't have a site.js file, but have defined the scripts within the main view.
From debugging I can see that the modal form data being serialised, however the POST failed and there are no validations.

Tried to paste code but looks like JS is not allowed here.

EDIT: I got it working!!! Turns out I am requesting to validate the antiforgery token in my controller, but haven't supplied one in the modal form! WOO HOO!

EDIT 2 : Minor issue, the modal doesn't seem to be passed into the controller, updated my code here if you don't mind having a quick look : https://stackoverflow.com/questions/75760606/handl...

Edited by anxious_ant on Wednesday 22 March 15:17

Edited by anxious_ant on Wednesday 22 March 17:27

[Mr Happy]

In your ajax success call, try putting a console.log(data); above the var newbody bit... it should dump out to the browser console whatever the ajax response is (which I'm guessing will be the partial view html) but you may need to do something like data.Data if it's being returned as a javascript object.