Workaround for nested forms in .NET Core MVC

Question

I'm looking a solution to achieving what ultimately will look like nested forms. I know nested forms do not work, but I have a requirement to build a view which, from a legal standpoint, must be ordered like the example below.

The form will contain a mixture of inputs - text and checkboxes bound to the view model properties, and partial to allow document uploading. The document upload partial its self contains a form and is used elsewhere in the site and should not be amended.

I won't include all the mark-up as it's fairly standard stuff, the example below is just to outline what I want to achieve.

Can anyone suggest anything, or point me towards any examples? It may be my approach is wrong, if so please say, but just bear in mind that the layout has to resemble my example.

Thanks

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

Answer 1

I know nested forms do not work, but I have a requirement to build a view which, from a legal standpoint, must be ordered like the example below.

As you mentioned that the <form> element can't be nested.

If you'd like to keep displaying of the view same as you expected, you can refer to the following example to position and adjust the html content based on your actual html structure.

1)Create a placeholder <div> container inside main element

<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> 

Rendered as below

2)Position and adjust the content of partial view

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

Rendered as below

Note:please adjust top and left properties based on your actual html structure and DOM size.