html - .NET Core MVC 中嵌套表单的解决方法

Question

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

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

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

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

谢谢

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

标签： htmlasp.net-mvcformsrazorasp.net-core-mvc

Answer 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