.NET Core MVC 中嵌套表单的解决方法答案

【问题标题】：Workaround for nested forms in .NET Core MVC.NET Core MVC 中嵌套表单的解决方法
【发布时间】：2020-12-21 20:01:51
【问题描述】：

我正在寻找一种解决方案，以实现最终看起来像嵌套表单的效果。我知道嵌套表单不起作用，但我需要构建一个视图，从法律的角度来看，它必须像下面的示例一样排序。

表单将包含混合输入 - 绑定到视图模型属性的文本和复选框，以及部分以允许文档上传。文件上传部分其自身包含一个表单，并在网站的其他地方使用，不应修改。

我不会包含所有标记，因为它是相当标准的东西，下面的示例只是概述我想要实现的目标。

任何人都可以提出任何建议，或者指出我的任何例子吗？可能是我的方法是错误的，如果是这样，请说，但请记住，布局必须类似于我的示例。

谢谢

<form>
    <input />
    <input />
    <partial (containing another form for uploading) />
    <input />
    <partial (containing another form for uploading) />
</form>

【问题讨论】：

嗨@DarkW1nter，关于这个案例的任何更新？

标签： html asp.net-mvc forms razor asp.net-core-mvc

【解决方案1】：

我知道嵌套表单不起作用，但我需要构建一个视图，从法律角度来看，它必须像下面的示例一样排序。

正如您提到的，<form> 元素不能嵌套。

如果您想保持与预期相同的视图显示，可以参考以下示例，根据您的实际 html 结构定位和调整 html 内容。

1)在主元素内创建一个占位符<div>容器

<div>
    <form>
        Input Field1:<input type="text" name="field1" />
        <br />
        <div id="placeholderforpartial" style="width:auto;height:116px;background-color:azure;">
            
        </div>
        <br />
        Input Field2:<input type="text" name="field2" />
        <br />
        <input type="submit" value="Submit" />
    </form>
    <div id="partialcontent" style="background-color:aqua;">
        <partial name="_UploadDocPartial" />
    </div>
</div>

如下图

2)定位和调整局部视图的内容

<div id="partialcontent" style="background-color:aqua;position:relative;top:-195px;">
    <partial name="_UploadDocPartial" />
</div>

如下图

注意： 请根据您的实际 html 结构和 DOM 大小调整 top 和 left 属性。

【讨论】：