Asp-Page-Handler not firing Method in Razor Model when Form Button is Clicked

Question

First please know that I have googled and tried everything that I have found. I have been through solution after solution and read dozens of Stack Overflow questions before posting this. I have no idea why this is not working. That being said I am not super familiar with the Method Handler stuff so I might be making a stupid mistake.

Implementation Details
- .NET Core 2.2
- Microsoft.AspNetCore.Razor.Design 2.2.0
- AngularJS.Core 1.7.8

I am creating an internal portal to aggregate Jenkins build and test data. I want to allow a build of the job that runs Jenkins tests to be kicked off via a button on the page. When I click the button I don't get any errors. I get nothing in the console and don't hit any breakpoints that would be hit if it actually fired the OnPost method.

I have tried using the OnPost and OnPostAsync methods. I have tried using the custom name via the asp-page-handler as well as the default names. I have tried putting the asp-page-handler tag on the form and the button. I have tried using a button and an input. Nothing seems to change the behavior.

The Header of my Razor Page

@page "{handler?}"
@using JenkinsRazorApi.Pages
@using System.Linq;
@using System.Data;
@using System.Web;
@model FslModel
@{
    ViewData["Title"] = "fsl";
}

My cshtml markup

<div>
   <form method="POST">
      <input type="submit" class="btnKickOffBuild" name="kickOffBuild" id="btnKickOffBuild" asp-page-handler="BuildClick" value="Build"/>
   </form>
</div>

My method in my model (The PostToApi method is Async which is why I am using the Async version of OnPost)

public void OnPostBuildClickAsync()
{
   apiClientCalls.PostToApi("FslSmokeTest", "BuildKickOff");
}

My OnGetAsync method fires when the page loads without issue. Everything that happens in that method works. I am able to reference the Model in the normal Razor fashion so the model is accessible and tied to the page. I just can't get the OnPost method in my Model to fire when I click the btnKickOffBuild button.

If someone could please point me in the right direction I would really appreciate it.

*************EDIT**********************
I tried making the OnPostBuildClickAsync method actually Async and I tried it how I have it above and took the Async off the method name to no avail.

I also tried, as a test, turning all of the Anti-Forgery stuff that is tied to the Razor framework off globally just to rule that out. That didn't work either.

I tried doing this a completely different way by adding the method to my Angular scope wrapped in a javascript function that should only fire if the button is clicked but since it is a server side @ tag it runs on page load regardless of the condition in the function.

*************EDIT**********************
This boils down to an Angular thing.

As per the "Submitting a form and preventing the default action" section in the following Link: https://docs.angularjs.org/api/ng/directive/form

Angular requires an action tag to submit the form to the server. Without it the form is prevented from submitting. I altered my cshtml to:

<div>
   <h5 style="margin-left: 50px; float:left;">Test Pass/Fail</h5>
   <form method="post" action="">
      <button type="submit" class="btnKickOffBuild" asp-page-handler="BuildClick">Build</button>
   </form>
</div>

Of particular note is the action="". This forces Angular not to block the submission of the form to the server.

The following question has some detail around Angular Actions also:
ng-action does not add action attribute in the form

your async method may need to actually be an async method. Have you tried "public async Task<IActionResult> OnPostBuildClickAsync()" or without async "public void OnPostBuildClick()" — Steve
May also be case-sensitive, try method="post" vs method="POST" — Steve
Hello @Steve. I appreciate your comment. I made the method Async and tried it and I put it back and took the Async off of the name of the method. It didn't work either way. — J.R. Bye
@zszep I got it working with the text after the ************EDIT********** line. That is working well in my current app. — J.R. Bye

tkamath99 tkamath99 · Accepted Answer · 2020-07-06T09:52:20

Edited: I have found the root cause of it. You need to create a Razor ViewImport file and import all the razor dependencies in that file. That ways you can use the taghelpers in the application

Asp-Page-Handler not firing Method in Razor Model when Form Button is Clicked

1 Answers