ASP.NET MVC表单提交无响应问题排查求助

我帮你找到了导致提交无反应的核心问题，还有几个小细节可以优化：

核心问题：表单元素未包含在<form>标签内 #

你的RsvpForm视图中，<form>标签是直接闭合的（<form asp-action="RsvpForm" method="post"></form>），所有的输入字段和提交按钮都在表单标签的外面。浏览器只会提交<form>标签内部的元素数据，点击按钮时找不到要提交的表单内容，所以完全没有反应。

修正后的RsvpForm视图代码 #

@model PartyInvites.Models.GuestResponse
@{ Layout = null; }
<!DOCTYPE html>
<html>
<head>
    <!-- 修正了meta标签的拼写错误：viewpot → viewport -->
    <meta name="viewport" content="width=device-width"/>
    <title>RsvpForm</title>
</head>
<body>
    <form asp-action="RsvpForm" method="post">
        <p>
            <label asp-for="Name"> Your Name: </label>
            <input asp-for="Name"/>
        </p>
        <p>
            <label asp-for="Email"> Your Email:</label>
            <input asp-for="Email"/>
        </p>
        <p>
            <label asp-for="Phone"> Your Phone:</label>
            <input asp-for="Phone"/>
        </p>
        <p>
            <label> Will You Attend?</label>
            <select asp-for="WillAttend">
                <option value=""> Choose an option </option>
                <option value="true"> Yes, I'll be There. </option>
                <option value="false"> No, i can't come. </option>
            </select>
        </p>
        <button type="submit"> Submit Rsvp</button>
    </form>
</body>
</html>

其他细节优化 #

1. meta标签拼写错误：原视图里的viewpot少了字母r，修正为viewport，这会影响页面在移动端的适配效果。
2. 可选优化：添加模型验证（非当前问题，但可以提升用户体验）：如果希望确保用户填写必填字段，可以在GuestResponse模型中添加数据注解，比如[Required]，然后在视图中显示验证信息。

修改完成后，点击提交按钮就能正常将表单数据提交到HomeController的HttpPost版本RsvpForm方法，然后跳转到显示感谢信息的Thanks页面了。

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