.NET Core Web应用中表单提交无响应问题排查

问题概述 #

开发自定义披萨配料表单时，模型绑定已成功（asp-for可自动补全），但点击提交按钮后页面无任何反应——哪怕未处理POST请求，页面至少也该触发刷新。

项目文件结构 #

• Models文件夹：存放PizzasModel类
• Pages/Forms文件夹：存放CustomPizzaModel.cshtml（视图）和CustomPizzaModel.cshtml.cs（页面模型）
• Pages/Checkout文件夹：存放Checkout页面

原代码 #

披萨模型代码 #

namespace Pizzeria.Models
{
    public class PizzasModel
    {
        public string ImageTitle { get; set; }
        public string PizzaName { get; set; }
        public float BasePrice { get; set; }
        public bool TomatoSauce { get; set; }
        public bool Tuna { get; set; }
        public bool Pineapple { get; set; }
        public bool Beef { get; set; }
        public bool Ham { get; set; }
        public bool Mushroom { get; set; } 
        public bool Peperoni { get; set; }
        public bool Cheese { get; set; }
        public float FinalPrice { get; set; }
    }
}

页面模型代码 #

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Pizzeria.Models;

namespace Pizzeria.Pages.Forms
{
    public class CustomPizzaModel : PageModel
    {
        [BindProperty]
        public PizzasModel Pizza { get; set; }
        public float PizzaPrice { get; set; }

        public void OnGet()
        {

        }

        public IActionResult OnPost()
        {
            PizzaPrice = Pizza.BasePrice;

            if (Pizza.TomatoSauce) PizzaPrice += 1;
            if (Pizza.Cheese) PizzaPrice += 1;
            if (Pizza.Peperoni) PizzaPrice += 1;
            if (Pizza.Tuna) PizzaPrice += 1;
            if (Pizza.Pineapple) PizzaPrice += 1;
            if (Pizza.Ham) PizzaPrice += 1;
            if (Pizza.Beef) PizzaPrice += 1;
            if (Pizza.Mushroom) PizzaPrice += 1;

            return RedirectToAction("/Checkout/Checkout", new {Pizza.PizzaName, PizzaPrice});
        }
    }
}

视图代码 #

@page
@model Pizzeria.Pages.Forms.CustomPizzaModel
@{
}

<div class="text-center container">
    <h1 class="main-text">Create your own pizza!</h1>
    <from method="POST" class="form-container"> 
        <input type="text" asp-for="Pizza.PizzaName" placeholder="Give your pizza a name..." />

        <div class="input">
            <label>Tomato Sauce</label>
            <input type="checkbox" asp-for="Pizza.PizzaName" placeholder="Tomato Sauce" />
        </div>
        <div class="input">
            <label>Beef</label>
            <input type="checkbox" asp-for="Pizza.Beef" placeholder="Beef" />
        </div>
        <div class="input">
            <label>Tuna</label>
            <input type="checkbox" asp-for="Pizza.Tuna" placeholder="Tuna" />
        </div>
        <div class="input">
            <label>Mushrooms</label>
            <input type="checkbox" asp-for="Pizza.Mushroom" placeholder="Mushrooms" />
        </div>
        <div class="input">
            <label>Pineapple</label>
            <input type="checkbox" asp-for="Pizza.Pineapple" placeholder="Pineapple" />
        </div>
        <div class="input">
            <label>Cheese</label>
            <input type="checkbox" asp-for="Pizza.Cheese" placeholder="Cheese" />
        </div>
        <div class="input">
            <label>Peperoni</label>
            <input type="checkbox" asp-for="Pizza.Peperoni" placeholder="Peperoni" />
        </div>
        <div class="input">
            <label>Ham</label>
            <input type="checkbox" asp-for="Pizza.Ham" placeholder="Ham" />
        </div>
  
        <button type="submit" class="btn btn-primary mt-1">Order my Pizza</button>
    </from>
</div>

问题根源与修复方案 #

1. 表单标签拼写错误（核心问题） #

视图中把<form>写成了<from>，浏览器无法识别这个无效标签，导致提交按钮无法触发表单提交逻辑。

修复后视图的表单部分：

<form method="POST" class="form-container"> 
    <!-- 其余内容不变 -->
</form>

2. 番茄酱汁复选框绑定错误 #

番茄酱汁的复选框asp-for错误绑定到了Pizza.PizzaName，应该绑定到Pizza.TomatoSauce。

修复后番茄酱汁部分代码：

<div class="input">
    <label>Tomato Sauce</label>
    <input type="checkbox" asp-for="Pizza.TomatoSauce" placeholder="Tomato Sauce" />
</div>

3. Razor Pages跳转方法错误 #

页面模型中使用了MVC控制器的RedirectToAction方法，Razor Pages应该用RedirectToPage来跳转页面。

修复后OnPost方法的返回语句：

return RedirectToPage("/Checkout/Checkout", new { Pizza.PizzaName, PizzaPrice });

4. 模型未初始化导致空引用 #

Pizza属性在OnGet中未实例化，提交时可能出现空引用异常，建议在OnGet中初始化并设置默认基础价格。

修复后OnGet方法：

public void OnGet()
{
    Pizza = new PizzasModel { BasePrice = 8.99f }; // 设置默认基础价格
}

完整修复后视图代码 #

@page
@model Pizzeria.Pages.Forms.CustomPizzaModel
@{
}

<div class="text-center container">
    <h1 class="main-text">Create your own pizza!</h1>
    <form method="POST" class="form-container"> 
        <input type="text" asp-for="Pizza.PizzaName" placeholder="Give your pizza a name..." />

        <div class="input">
            <label>Tomato Sauce</label>
            <input type="checkbox" asp-for="Pizza.TomatoSauce" placeholder="Tomato Sauce" />
        </div>
        <div class="input">
            <label>Beef</label>
            <input type="checkbox" asp-for="Pizza.Beef" placeholder="Beef" />
        </div>
        <div class="input">
            <label>Tuna</label>
            <input type="checkbox" asp-for="Pizza.Tuna" placeholder="Tuna" />
        </div>
        <div class="input">
            <label>Mushrooms</label>
            <input type="checkbox" asp-for="Pizza.Mushroom" placeholder="Mushrooms" />
        </div>
        <div class="input">
            <label>Pineapple</label>
            <input type="checkbox" asp-for="Pizza.Pineapple" placeholder="Pineapple" />
        </div>
        <div class="input">
            <label>Cheese</label>
            <input type="checkbox" asp-for="Pizza.Cheese" placeholder="Cheese" />
        </div>
        <div class="input">
            <label>Peperoni</label>
            <input type="checkbox" asp-for="Pizza.Peperoni" placeholder="Peperoni" />
        </div>
        <div class="input">
            <label>Ham</label>
            <input type="checkbox" asp-for="Pizza.Ham" placeholder="Ham" />
        </div>
  
        <button type="submit" class="btn btn-primary mt-1">Order my Pizza</button>
    </form>
</div>

完整修复后页面模型代码 #

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Pizzeria.Models;

namespace Pizzeria.Pages.Forms
{
    public class CustomPizzaModel : PageModel
    {
        [BindProperty]
        public PizzasModel Pizza { get; set; }
        public float PizzaPrice { get; set; }

        public void OnGet()
        {
            Pizza = new PizzasModel { BasePrice = 8.99f };
        }

        public IActionResult OnPost()
        {
            PizzaPrice = Pizza.BasePrice;

            if (Pizza.TomatoSauce) PizzaPrice += 1;
            if (Pizza.Cheese) PizzaPrice += 1;
            if (Pizza.Peperoni) PizzaPrice += 1;
            if (Pizza.Tuna) PizzaPrice += 1;
            if (Pizza.Pineapple) PizzaPrice += 1;
            if (Pizza.Ham) PizzaPrice += 1;
            if (Pizza.Beef) PizzaPrice += 1;
            if (Pizza.Mushroom) PizzaPrice += 1;

            return RedirectToPage("/Checkout/Checkout", new { Pizza.PizzaName, PizzaPrice });
        }
    }
}

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