How to get OnPost to fire within Microsoft Teams - microsoft-teams

Question

We have a Web Application written with ASP.NetCore and Razor pages.
We would like to use it as a Teams App within a Tab.
However, I notice that submit (which triggers the OnPost event) fails to work under Teams even though it all works fine as a standard Web Application.
I suspect that this may be to do with the fact the App is running under a Teams IFrame and submission is not possible.
Can anyone offer me any suggestions or code samples to what I need to modify to a submit like the one below to trigger the OnPost when running under Teams. I attach one simple form (a login form) with code behind.
Thanks.
Login.cshtml
#page
#model AreoWeb.Pages.Registration.Login
<br />
<h2 class="text-info">Login</h2>
<br />
<div class="border container" style="padding:30px">
<form id="frm" method="post" >
<div class="text-danger" asp-validation-summary="ModelOnly"></div>
<div class="form-group row">
<div class="col-2">
<label>Email Address</label>
</div>
<div class="col-5">
<input asp-for="LoginDetails.EmailAddress" class="form-control" />
</div>
<span asp-validation-for="LoginDetails.EmailAddress" class="text-danger"></span>
</div>
<div class="form-group row">
<div class="col-2">
<label>Password</label>
</div>
<div class="col-5">
<input asp-for="LoginDetails.Password" class="form-control" />
</div>
<span asp-validation-for="LoginDetails.Password" class="text-danger"></span>
</div>
<div class="form-group row">
<div class="col-2 offset-2">
<input type="submit" value="Login" class=" btn btn-primary form-control" asp-page="Login" />
</div>
<div class="col-1">
</div>
<div class="col-2">
<a asp-page="/Index" class="btn btn-success form-control">Cancel</a>
</div>
</div>
</form>
</div>
</script>
#section Scripts
{
<partial name="_ValidationScriptsPartial"/>
}
Login.cshtml.cs
using System.Threading.Tasks;
using areo;
using AreoErr;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using AreoWeb.Model;
using AreoWeb.Pages.Shared;
namespace AreoWeb.Pages.Registration
{
public class Login : PageModel
{
[BindProperty]
public LoginDetails LoginDetails { get; set; }
public async Task <IActionResult> OnPost()
{
if(ModelState.IsValid)
{
ErrConsts.ErrorCode ret = await DoLogin(LoginDetails.EmailAddress,LoginDetails.Password);
if (ret==ErrConsts.ErrorCode.Success)
return RedirectToPage("/Messages/Index");
else
return RedirectToPage("Error");
}
else
{
return Page();
}
}
public async Task<ErrConsts.ErrorCode> DoLogin(string emailAddress,string password)
{
//
}
When run directly from a browser the app logs the following under the browser debugger. Page load and successful submit :
DOM7011: The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337
repost.htm
HTML1300: Navigation occurred.
Login
DOM7011: The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337
repost.htm
When run under Microsoft Team, the same page load and submit generates the following in the browser debugger (the last entry appears after submit is pressed. First two and last entries are Errors):
2020-07-23T07:08:37.621Z ChannelService: Empty threadId 0-angular-jquery.min-eee9041.js:114:37
2020-07-23T07:08:38.574Z ChannelService: Empty threadId 0-angular-jquery.min-eee9041.js:114:37
Feature Policy: Skipping unsupported feature name “midi”. 0-angular-jquery.min-eee9041.js:1:49340
Feature Policy: Skipping unsupported feature name “encrypted-media”. 0-angular-jquery.min-eee9041.js:1:49340
Feature Policy: Skipping unsupported feature name “midi”. 0-angular-jquery.min-eee9041.js:1:49340
Feature Policy: Skipping unsupported feature name “encrypted-media”. 0-angular-jquery.min-eee9041.js:1:49340
Content Security Policy: Ignoring “'unsafe-inline'” within script-src or style-src: nonce-source or hash-source specified 2
Feature Policy: Skipping unsupported feature name “midi”. 0-angular-jquery.min-eee9041.js:27:416
Feature Policy: Skipping unsupported feature name “encrypted-media”. 0-angular-jquery.min-eee9041.js:27:416
Feature Policy: Skipping unsupported feature name “midi”. 0-angular-jquery.min-eee9041.js:1:48779
Feature Policy: Skipping unsupported feature name “encrypted-media”. 0-angular-jquery.min-eee9041.js:1:48779
Content Security Policy: Ignoring “'unsafe-inline'” within script-src or style-src: nonce-source or hash-source specified 2
Feature Policy: Skipping unsupported feature name “midi”. 3.2-app.min-0f0e437.js:5:662533
Feature Policy: Skipping unsupported feature name “encrypted-media”. 3.2-app.min-0f0e437.js:5:662533
Content Security Policy: Ignoring “'unsafe-inline'” within script-src or style-src: nonce-source or hash-source specified
The character encoding of the plain text document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the file needs to be declared in the transfer protocol or file needs to use a byte order mark as an encoding signature. Login
?
The HEAD section generated by the App does define the charset, and is as follows :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title> - Areo Web</title>
<link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="/css/site.css" />
</head>
<body>