How to get a value from a dynamic form? - asp.net-core

Question

I am using .NET Core with razor pages and I have a model as a list of object as below. Can anyone tell me how to do it? I searched many forums, seems only using controller can do it.
Here is the razor cshtml form I'm using:
<form id="form" method="post" data-ajax="true" data-ajax-method="post" >
<h4>Performance Rating</h4>
<div>
<p>
<mark>
#Model.CommonContents.Find(x => x.ContentId.Equals(24)).ContentText
</mark>
</p>
</div>
<div class="table-responsive">
<table id="contentTbl" class="display nowrap table table-striped table-bordered">
<thead>
<tr>
<th width="25%">
#Model.CommonContents.Find(x => x.ContentId.Equals(25)).ContentText
</th>
<th style="font-size:xx-small" width="5%">(a)<br /> #Model.CommonContents.Find(x => x.ContentId.Equals(26)).ContentText</th>
<th style="font-size:xx-small" width="5%">(b) <br />#Model.CommonContents.Find(x => x.ContentId.Equals(27)).ContentText</th>
<th style="font-size:xx-small" width="5%">(c)=(a)X(b)<br />#Model.CommonContents.Find(x => x.ContentId.Equals(28)).ContentText</th>
<th>#Model.CommonContents.Find(x => x.ContentId.Equals(29)).ContentText</th>
<th width="5%">#Model.CommonContents.Find(x => x.ContentId.Equals(30)).ContentText</th>
</tr>
</thead>
<tbody>
#{ var j = 0; }
#{ var QuestionId = 0;}
#for (int k = 0; k < Model.QuesAns.Count; k++)
{
j = k + 1;
QuestionId = Model.QuesAns[k].QuestionId;
<tr>
<td>
<h5>#j. #Html.DisplayFor(modelitem => Model.QuesAns[k].TitleText)</h5>
<p>#Html.DisplayFor(modelitem => Model.QuesAns[k].ContentText)</p>
<input type="hidden" name="QuestionId_#j" , id="QuestionId_#j" value="#QuestionId" />
</td>
<td align="center">
<lable id="Weighting_#j">#Html.DisplayFor(modelitem => Model.QuesAns[k].Weighting)</lable>%
</td>
<td align="center">
<select class="form-control p-0" name="Weighting_#j" id="Weighting_#j" asp-for="#Model.QuesAns[k].Weighting">
<option value="0"></option>
<option value="5">5</option>
<option value="4.5">4.5</option>
<option value="4">4</option>
<option value="3.5">3.5</option>
<option value="3">3</option>
<option value="2.5">2.5</option>
<option value="2">2</option>
<option value="1.5">1.5</option>
<option value="1">1</option>
</select>
</td>
<td align="center"><lable id="WeightingMarks_#j"></lable></td>
<td>
<textarea class="form-control" rows="10" name="Comment_#j" id="Comment_#j" asp-for="#Model.QuesAns[k].Answer" ></textarea>
</td>
<td>
(#Html.DisplayFor(modelitem => Model.QuesAns[k].AttachNum))
<span class="k-icon k-i-attachment-45"></span>
</td>
</tr>
}
<tr style="background-color:burlywood">
<td align="right">
<input type="hidden" value="#Model.QuesAns.Count" name="TotalQues" id="TotalQues" />
<b>
#Model.CommonContents.Find(x => x.ContentId.Equals(31)).ContentText
</b>
</td>
<td>100%</td>
<td></td>
<td><label id="TotalWeightingMarks"></label></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="row">
<input type="text" id="formAction" name="formAction" style="display:none">
<input id="btnSubmit" type="submit" value="Confirmed" class="btn btn-block btn-danger" />
</div>
</div>
</form>
javascript part
$(document).ready(function () {
$('#btnSubmit').click(function () {
$('#formAction').val("submit");
}); });
the coding page like this
[BindProperty]
public List<VAppraisalQuestionAnswer> qa { set; get; }
public IActionResult OnPost(string formAction)
{
//i want to get value from the from
var abc = qa; // qa is return count= 0
return Page();
}
Here is the model
public class VAppraisalQuestionAnswer
{
[StringLength(50)]
public string StaffCode { get; set; }
[StringLength(50)]
public string DeptCode { get; set; }
[StringLength(10)]
public string AppraisalPeriodCode { get; set; }
public int QuestionId { get; set; }
[StringLength(int.MaxValue)]
public string TitleText { get; set; }
[StringLength(int.MaxValue)]
public string ContentText { get; set; }
public int Weighting { get; set; }
public string Answer { get; set; }
public int AttachNum { get; set; }
public int DspOrd { get; set; }
}

Answer 1

I already found the solution. All I need to do is add IFormCollection to the OnPostAsync, then IFormCollection returns the array value.
like this:
public async Task<IActionResult> OnPostAsync(IFormCollection Form) {

Answer 2

To bind a simple type list object, the name attribute in the input text should in this format: [index].property. The index must start from 0 and be continuous. Change the table body like below:
<tbody>
#{ var j = 0; }
#{ var QuestionId = 0;}
#for (int k = 0; k < Model.QuesAns.Count; k++)
{
j = k + 1;
QuestionId = Model.QuesAns[k].QuestionId;
<tr>
<td>
<h5>#j. #Html.DisplayFor(modelitem => Model.QuesAns[k].TitleText)</h5>
<p>#Html.DisplayFor(modelitem => Model.QuesAns[k].ContentText)</p>
<input type="hidden" name="[#k].QuestionId" , id="QuestionId_#j" value="#QuestionId" />
</td>
<td align="center">
<lable id="Weighting_#j">#Html.DisplayFor(modelitem => Model.QuesAns[k].Weighting)</lable>%
</td>
<td align="center">
<select class="form-control p-0" name="[#k].Weighting" id="Weighting_#j" asp-for="#Model.QuesAns[k].Weighting">
<option value="0"></option>
<option value="5">5</option>
<option value="4.5">4.5</option>
<option value="4">4</option>
<option value="3.5">3.5</option>
<option value="3">3</option>
<option value="2.5">2.5</option>
<option value="2">2</option>
<option value="1.5">1.5</option>
<option value="1">1</option>
</select>
</td>
<td align="center"><lable id="WeightingMarks_#j"></lable></td>
<td>
<textarea class="form-control" rows="10" name="[#k].Comment" id="Comment_#j" asp-for="#Model.QuesAns[k].Answer"></textarea>
</td>
<td>
(#Html.DisplayFor(modelitem => Model.QuesAns[k].AttachNum))
<span class="k-icon k-i-attachment-45"></span>
</td>
</tr>
}
<tr style="background-color:burlywood">
<td align="right">
<input type="hidden" value="#Model.QuesAns.Count" name="TotalQues" id="TotalQues" />
</td>
<td>100%</td>
<td></td>
<td><label id="TotalWeightingMarks"></label></td>
<td></td>
<td></td>
</tr>
</tbody>