ASP.NET Core Razor Pages按钮失效问题排查求助

Hey there! Let's walk through the key troubleshooting steps for your non-working button in an ASP.NET Core Razor Pages project. These are the checks I rely on every time I hit this exact issue:

• Verify Form & Button Basics
  First, make sure your button is wrapped in a <form> tag, and the form's configuration matches your backend handler. If you're using a named handler (like OnPostMyAction), your button or form should include the asp-page-handler attribute. Also, double-check the button's type—if it's set to button instead of submit, it won't trigger a form submit by default unless you've wired up custom JavaScript.

  Example of correct markup:

  <form method="post">
    <button type="submit" asp-page-handler="MyAction">Click Me</button>
  </form>
  

• Check Anti-Forgery Token Compliance
  Razor Pages enforces anti-forgery tokens by default. If you've manually written your form without using tag helpers or including the token, your request will be blocked. Inspect your page's source code to look for a hidden input like <input name="__RequestVerificationToken" type="hidden">. If it's missing, add @Html.AntiForgeryToken() inside your form.

• Debug Frontend Scripts
  Open your browser's DevTools (F12) and head to the Console tab—look for any JavaScript errors that might be breaking your button's functionality. Common issues include:

  • Syntax errors in your custom click handlers
  • Conflicts with libraries like jQuery
  • Incorrect selectors (e.g., misspelled button IDs)

  If you're using AJAX to submit the request, ensure you're sending the anti-forgery token and targeting the correct URL:

  $('#myButton').click(function(e) {
    e.preventDefault();
    $.post('/MyPage?handler=MyAction', {
      __RequestVerificationToken: $('input[name="__RequestVerificationToken"]').val(),
      // Add any other parameters here
    })
    .done(function(response) {
      // Handle success
    })
    .fail(function(xhr) {
      console.log(xhr.responseText); // This will show server-side errors
    });
  });
  

• Validate Backend Handler Method
  Confirm your Page Model's handler method is set up correctly:

  • For POST requests, the method should follow the pattern OnPost[HandlerName] (e.g., OnPostMyAction)
  • The method must be public (private methods won't be accessible)
  • If accepting parameters, ensure they match the names sent from the frontend, or use the [Bind] attribute to map them

  Example of a valid handler:

  public class MyPageModel : PageModel
  {
      public IActionResult OnPostMyAction()
      {
          // Your business logic here
          return Page();
      }
  }
  

  Add a breakpoint in the handler to see if it's being hit. If it's not, the issue is likely frontend; if it is, debug the logic inside the method.

• Inspect Network Requests
  Use the Network tab in DevTools to analyze the request when you click the button:

  • Check the request URL to ensure it points to the correct page and includes the right handler parameter
  • Look at the status code: 400 = bad request (usually anti-forgery token issue), 404 = page/handler not found, 500 = server-side error
  • Review the Form Data/Request Payload to confirm parameters are being sent correctly
  • Check the Response tab for detailed error messages from the server

• Confirm Routing & Page Structure
  Make sure your Razor Page file is in the correct location (typically the Pages folder) and that the model class matches the page name (e.g., MyPage.cshtml should have a MyPageModel class). If you're using custom routing, verify the @page directive at the top of your Razor Page is set correctly (e.g., @page "/custom-path").

内容的提问来源于stack exchange，提问作者Michael