带有模型绑定的 Razor 页面 POST 多个表单

Question

我在单个剃须刀页面上有多个表单，我希望在单击一个按钮后发布这些表单。我尝试使用 .submit() 两种表单（放入按钮的 onclick=）的 javascript 函数，但实际上只有一个表单的值被传递到 OnPost() 方法服务器端。以下是 .cshtml 和 .cs 文件中的相关代码：

StudentMain.cshtml

<!--first form-->
<form class="login100-form" method="post">
    <span class="login100-form-title" style="padding-bottom: 38px">
          Student Information
    </span>
    <div class="wrap-input100">
        <input class="input100 has-val" type="text" name="name" value='@ViewData["name"]' readonly/>
        <span class="focus-input100" data-placeholder="Student Name"></span>
    </div>

    ...more divs/inputs as above

</form>

<!--second form-->
<form class="login100-form" method="post">
    <div class="wrap-input100">
        <select class="input100 select" name="eduplan" selectedval='@ViewData["eduplan"]'>
            <option disabled selected value style="display:none"/>
            <option>High School Diploma</option>
            <option>Technical Training</option>
            <option>Associate Degree</option>
            <option>Bachelor's Degree</option>
            <option>Advanced Degree</option>
            <option>Military</option>
            <option>Other</option>
        </select>
        <span class="focus-input100" data-placeholder="Education Plan"></span>
    </div>

    ...more divs/selects as above

    <div class="container-login100-form-btn">
        <div class="wrap-login100-form-btn">
        <div class="login100-form-bgbtn"></div>
            <button class="login100-form-btn" type="submit">
                Save
            </button>
        </div>
    </div>
</form>

StudentMain.cshtml.cs

public class StudentMain : PageModel
{
     public void OnPost(string eduplan, string college, string major, string careerpath, string ethnicity, string gender, string ncaa, string firstgen, string onlineinterest)
     {
          Database.SaveStudentData(eduplan, college, major, careerpath, ethnicity, gender, ncaa, firstgen, onlineinterest);
     }
}

那么，最好的方法是什么？如何确保两个表单的值同时传递给 OnPost() 方法？我需要以某种方式使用 AJAX 吗？任何帮助表示赞赏。

Answer 1

您可以通过将方法的名称指定为每个表单上asp-page-handler 标签助手的值来对不同的表单 POST 使用不同的方法。更多信息可以在这个Youtube Video找到

更新

例如，您的 Model 类中有两个 POST 方法，即：OnPostAdd 和 OnPostSubtract，发布到不同方法的不同表单如下所示：

<form method="post" asp-page-handler="Add">
    <button type="submit">Add</button>
</form>

<form method="post" asp-page-handler="Subtract">
    <button type="submit">Subtract</button>
</form>

PS：不管你的方法是 OnPostAdd 还是 OnPostAddAsync，ASP.NET Core 仍然希望你的处理程序名称是 Add，因为它会自动解析像 OnPost、OnGet 这样的前缀等等，以及像Async这样的后缀