Razor 页面独立地向每个控制器发布表单答案

【问题标题】：Razor page independently post form to each controllerRazor 页面独立地向每个控制器发布表单
【发布时间】：2021-09-13 16:31:07
【问题描述】：

在我的 asp.net razor 项目中，我的页面包含多个表单。但如果我发布到表更新，主要信息表单数据更改将会丢失。如何在不更改其他表单数据的情况下提交表格？

（我想我可以尝试不使用razor绑定的js+ajax制作页面，但我会先尝试razor解决方案）

<table>
    @for (int i = 0; i < @Model.data.Test.Count(); i++)
    {
        <tr>
            <td>
                <div>@Html.DisplayFor(model => model.data.Test[i])</div>
            </td>
            <td>
                <form method="post" class="container" asp-page-handler="delete">
                    <input type="hidden" name="id" value="@i" />
                    <input type="submit" value="Delete" class="btn btn-primary" />
                </form>
            </td>
        </tr>
    }
</table>

//the main user info form
<form method="post">

<div class="form-group">
    <label asp-for="data.UserName" class="control-label"></label>
    <input asp-for="data.UserName" class="form-control" readonly />
    <span asp-validation-for="data.UserName" class="text-danger"></span>
</div>

 ... other inputs.

<div class="form-group">
    <input type="submit" value="Save" class="btn btn-primary" />
</div>

【问题讨论】：

没有针对此问题的纯 Razor 解决方案。如果您考虑网页，如果您有一个正常的表单发布，那么当任何其他表单提交时，原始网页将会丢失。 Razor 并没有改变这一点，它只是一种用于生成 HTML 的模板语言。所以你使用 JavaScript 的想法就是你需要做的。
没错，这不是 Razor 的问题，不能用纯 Html 解决。您可以使用 JavaScript 序列化其他表单中的数据，并通过隐藏输入将其传递回当前表单
你能发布你的模型吗？并请张贴视图的顶部。你隐藏了最重要的部分。

标签： asp.net ajax asp.net-core razor

【解决方案1】：

您可以尝试使用ajax 并使用event.preventDefault(); 可以防止重新加载页面。这是一个演示：

<form method="post" id="myForm">

   <div class="form-group">
    <label asp-for="data.UserName" class="control-label"></label>
    <input asp-for="data.UserName" class="form-control" readonly />
    <span asp-validation-for="data.UserName" class="text-danger"></span>
</div>

 ... other inputs.

<div class="form-group">
    <input type="submit" value="Save" class="btn btn-primary" onclick="Save()" />
</div>
</form>

js:

function Save()
        {
            event.preventDefault();
             $.ajax({
                 type: "POST",
                 data: $("#myForm").serialize(),
                url: '/.../...',
            }).done(function (result) {
                
            });

        }

【讨论】：