I have a single View, which has tabs with various different sections. Each tab I have implemented as a partial view.
There is one ViewModel which has various sub classes to populate the view and partial views within the tabs.
FormCaptureViewModel
- FormDetailViewModel
- FormBrandingViewModel
- etc
[HttpGet]
public IActionResult FormCapture()
{
return View(new FormCaptureViewModel());
}
<div class="tab-pane" id="tab2">
@Html.Partial("_FormBrandingPartial", Model.FormBranding)
</div>
<div class="tab-pane" id="tab3">
@Html.Partial("_FormDesignerPartial", Model.FormDesigner)
</div>
<div class="tab-pane" id="tab4">
@Html.Partial("_FormAnalyticsPartial", Model.FormAnalytics)
</div>
Then I want each form to do a post back to FormCapture like so:
[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult FormCapture(FormBrandingViewModel brandingModel)
{
return View();
}
[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult FormCapture(FormDetailViewModel detailModel, SaveAction action)
{
return View();
}
Each partial view will have a form tag that looks like this:
<form role="form" method="post" asp-action="FormCapture" enctype="multipart/form-data">
However I get an AmbiguousActionException: Multiple actions matched. This makes sense because asp will not know which method to use. How do I go about fixing this?
I am trying to keep away from using ajax because using scripts in partial views is not great.
Any ideas how to implement something like this? Surely this is a normal use case for complicated views (with tabs, etc.)?
I cannot just submit the entire FormCaptureViewModel
on each partial view as other tabs may have issues or be non-existent depending on the view's state.
My aim:
- Utilize ModelState validations specific to the sub viewmodel.
- The URL must not change on post back.