Post method doesn’t work in ASP.NET Core Razor pages

Question

I'm trying to submit my form to the database, but when I click on confirm button, I get this error:

.

This is my form:

enter image description here

This is my index class:

enter image description here

And here is my ajax code:

(https://i.sstatic.net/EA8a9.png)

I've tried many things but I couldn't solve the problem. Can anyone help me?

Answer 1

Post method doesn’t work in ASP.NET Core Razor pages

It would be nicer if you could include your code snippet instead of images. However, based on your scenario and descriptions, it can be said that, it can be fix in either ways,

You could fetch your property value within jquery function and then post to your razor page handeler or your can directly deserialize your form value and post to the page handler.

Let' have a look in practice, how you could able to implement a post request using ajax in razor page:

Demo Model:

 public class DemoModelClass
    {
        [Display(Name = "First Name")]
        public string FirstName { get; set; }
        [Display(Name = "Last Name")]
        public string LastName { get; set; }


    }

Razor.cs file:

public class AjaxPostRequestModel : PageModel
    {
        [BindProperty]
        public DemoModelClass? FormValue { get; set; }
        public void OnGet()
        {
        }

        public ActionResult OnPost()
        {

            var checkSubmittedVaue = FormValue;
            // Process data as needed
            // Call your database layer 
            return new JsonResult(new { success = true });
        }

    }

Razor.cshtml:

@page
@model RazorPageDemoApp.Pages.AjaxPostRequestModel
@{
}


<form method="post" class="col-sm-6">
    <div class="form-group row">
        <label asp-for="FormValue.FirstName" class="col-sm-3 col-form-label"></label>
        <div class="col-sm-7">
            <input asp-for="FormValue.FirstName" class="form-control">
        </div>
    </div>
    <div class="form-group row">
        <label asp-for="FormValue.LastName" class="col-sm-3 col-form-label"></label>
        <div class="col-sm-7">
            <input asp-for="FormValue.LastName" class="form-control">
        </div>
    </div>
    <div class="form-group row">

        <div class="col-sm-7 offset-sm-3">
            <button class="btn btn-primary" id="submit">Submit</button>
        </div>
    </div>
</form>

@section scripts {
    <script>
        $(function () {
            $('#submit').on('click', function (evt) {
                evt.preventDefault();
                $.post('', $('form').serialize(), function () {
                    alert('Razor page submitting form value using jQuery');
                });
            });
        });

       
    </script>
}

Output:

Note: Please refer to this official document for more details.