Getting HTTP ERROR 400 when form gets posted

Question

I have an asp.net core razor page where I have a simple form that asks for a user email address and a submit button. When I enter the email and click the submit button I'm always getting a 400 error

HTTP ERROR 400

I'm not sure what I'm doing wrong here. I tried putting a break point right inside the OnPost method, but I'm not even getting to that point.

Below is my code:

Homie.cshtml

@page
@model WebApplication1.Pages.HomieModel
@{
    ViewData["Title"] = "Homie";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h1>Homie</h1>

<form method="post">
    <input type="email" name="emailaddress">
    <input type="submit">
</form>

Homie.cshtml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace WebApplication1.Pages
{
    public class HomieModel : PageModel
    {
        public void OnGet(string n)
        {
        }

        public void OnPost()
        {
            var emailAddress = Request.Form["emailaddress"];
            // do something with emailAddress
        }

    }
}

Error message (screen capture):

Noreen

Do you see any other information in the response apart from 400? – Quart

@ChetanRanpariya no.. nothing – Noreen

Are you able to debug the code of OnPost? Are you seeing this error in browser? Can you share the screen capture if the error in browser? – Quart

@ChetanRanpariya added the screen capture. – Noreen

Answer 1

I found out what the issue was. The problem was that it was missing the anti forgery token in the form.

I simply added @Html.AntiForgeryToken(); inside of the form tag and everything is working as expected now.

Homie.cshtml

@page
@model WebApplication1.Pages.HomieModel
@{
    ViewData["Title"] = "Homie";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h1>Homie</h1>

<form method="post">
    <input type="email" name="emailaddress">
    <input type="submit">
    @Html.AntiForgeryToken();
</form>

It seems that when you have an asp.net core mvc application and when you add a razor page in to it and try to create a form it doesn't default to the Form Tag Helper for asp.net core.

If you add this line to the Homie.cshtml page, @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers it will automatically make it a form tag helper. See here.

So I changed my code Homie.cshtml to:

Homie.cshtml

@page
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@model WebApplication1.Pages.HomieModel
@{
    ViewData["Title"] = "Homie";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h1>Homie</h1>

<form method="post">
    <input type="email" name="emailaddress">
    <input type="submit">
</form>

Noreen

No need for the ; after the @Html.AntiForgeryToken() in the first example – Doting

Answer 2

My problem was having 2 form elements on the page, one inside another. Once I removed one, it worked fine!

Clava