ViewModel always empty in Post action [HttpPost]

Question

I send a request to the web service and the response that I get is a list of names and values. I loop them in the view and render a form, to allow users to fill the fields and submit it. But the viewmodel always returns null in post action.

this is my View:

<form method="post">
    <div class="row register-form">
        @foreach (var item in Model.FlowOutputModel)
        {
            <div class="col-md-6">
                <div class="form-group">
                    <label for="@item.CharacteristicValue">
                        @item.CharacteristicName: 
                    </label>
                    <input asp-for="@item.CharacteristicValue" type="text" 
                            class="form-control" 
                            placeholder="@item.CharacteristicName *" value="" required/>
                </div>
            </div>
        }
    
        <div class="col-md-12">
            <input type="submit" class="btnRegister" value="Submit"/>
        </div>
    </div>
</form>

my model as followin:

public class DecisionInputModel
{
    public string FlowName { get; set; }
    public List<FlowOutputModel> FlowOutputModel { get; set; }
}

public class FlowOutputModel
{
    public string CharacteristicName { get; set; }

    public string CharacteristicValue { get; set; }
}

My Controller

[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult Index(DecisionInputModel decisionInput)
{
    if (ModelState.IsValid)
    {
        _service.GetResults(decisionInput);
    }
}

Any suggestions?

Answer 1

replace loop foreach by for and add action to form

<form method="post" action="@Url.Action("Index", "Home")">

  <input  asp-for="@Model.FlowName"  type="text" class="form-control" />
 // or maybe  even better
@Html.TextBoxFor(model => model.FlowName, new {  @class = "form-control" })

 <div class="row register-form">
@for(int i=0; i < Model.FlowOutputModel.Count; i++)
    {
            
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="@Model.FlowOutputModel[i].CharacteristicValue">
                            @Model.FlowOutputModel[i].CharacteristicName: 
                        </label>
                        <input asp-for="@Model.FlowOutputModel[i].CharacteristicValue" type="text" 
                               class="form-control" 
                               placeholder="@Model.FlowOutputModel[i].CharacteristicName *" value="" required/>
                    </div>
                </div>
            }
         <div class="col-md-12">
                <input type="submit" class="btnRegister" value="Submit"/>
            </div>
        </div>
    </form>
    

Answer 2

You have to add the "name" attribute to the input:

  <input name="FlowOutputModel[@Model.FlowOutputModel.IndexOf(item)].CharacteristicValue" type="text" class="form-control" placeholder="@item.CharacteristicName *" value="" required />