Complex DataBinding in Razor

Question

Hi (I'm just a beginner), I have a cshtml view page in razor that I'm loading two separate queries in the page with one ID for the main part of the page and a bulkID for the detail page so one Id can have multiple bulkId's.

My View Looks like the following (Which is a grid) with data.

 <thead>
            @foreach (var item in Model.tblAllTransactionsWithDetail)
            {
                <tr>
                    <th class="noExport">Select</th>
                    <th class="noExport">Edit</th>
                    <th> @Html.LabelFor(modelItem => item.MemberNumber, "Member Number") </th>
                    <th> @Html.LabelFor(modelItem => item.EmployeeSSN, "Employee SSN") </th>
                    <th> @Html.LabelFor(modelItem => item.DependentSSN, "Dependent SSN") </th>
                    <th> @Html.LabelFor(modelItem => item.LastName, "Last Name") </th>
                    <th> @Html.LabelFor(modelItem => item.FirstName, "First Name") </th>
                    <th> @Html.LabelFor(modelItem => item.MiddleInitial, "Middle Initial") </th>
                    <th> @Html.LabelFor(modelItem => item.platform, "Platform") </th>
                    <th> @Html.LabelFor(modelItem => item.DateOfBirth, "Date of Birth")</th>
                </tr>
            }
        </thead>
        <tbody>
            **@for (var i=0; i < Model.tblAllTransactionsWithDetail.Count; i++)
            {**
            <tr>
                <td class="noExport">
                    <input id="checkbox" class="span" type="checkbox" name="" value="" />
                    <!-- use a hidden input field to just transfer data -->
                    @*<input type="hidden" asp-for="" value="@ViewBag.internalID" />*@
                </td>
                <td class="noExport">
                    <input type="hidden" value="SubmissionDetails" asp-for="@Model.url" />
                    <a asp-page="/EditDetails" asp-route-id="@Model.internalID">Edit</a>
                </td>
                @*<label for="colFormLabelLg" asp-for="tblAllTransactionsWithDetails.MemberNumber"></label>
                @Html.DisplayFor(model => model.tblAllTransactionsWithDetail.MemberNumber)*@
          
                <td>@Html.DisplayFor(model => model.tblAllTransactionsWithDetail.MemberNumber)</td>
                <td>@Html.DisplayFor(model => model.EmployeeSSN)</td>
                <td>@Html.DisplayFor(modelItem => item.DependentSSN)</td>
                <td>@Html.DisplayFor(modelItem => item.LastName)</td>
                <td>@Html.DisplayFor(modelItem => item.FirstName)</td>
                <td>@Html.DisplayFor(modelItem => item.MiddleInitial)</td>
                <td>@Html.DisplayFor(modelItem => item.platform)</td>
                <td>@Html.DisplayFor(modelItem => item.DateOfBirth)</td>
            </tr>
            }
        </tbody>
    </table>

When I post the data It's always null values and one record. It should bring back 4 records.

  public async Task<IActionResult> OnPostResubmitAsync(int? bulkID, IList<tblAllTransactionsWithDetails> tblAllTransactionsWithDetailbyBulkID)
    {


        //tblAllTransactionsWithDetailbyBulkID = await _db.tblAllTransactionsWithDetails.Where(d => d.bulkID == bulkID).ToListAsync();


        var tbldetailsList = new List<tblAllTransactionsWithDetails>();

        //tblAllTransactionsWithDetails details = new tblAllTransactionsWithDetails();

        tblAllTransactionsWithDetails details = new tblAllTransactionsWithDetails()
        {

        };

        tbldetailsList.Add(details);
       // _db.AddRange(details);
       // _db.SaveChanges();

        if (ModelState.IsValid)
        {

           


        }



        return Page();
    }

Called from Resubmit Selected Lines button:

   <div id="buttonContainer">
    <div id="buttonLeft">
        <p>
            <label style="margin-right:100px;">Total Records Selected:</label><span style="margin-right:25px;">0</span>
            <button style="margin-right:50px;" type="submit" class="btn-btn-primary" asp-page-handler="Search">Back to Search</button>
            <button style="margin-right:50px;" id="resubmitEditedLines" class="btn btn-primary" type="submit" value="Resbumit Edited Lines" asp-page-handler="Resubmit">Resubmit Selected Lines</button>
            <button style="margin-right:50px;" type="submit" class="btn btn-primary" onclick="$('#deleteModal').modal()" asp-page-handler="Delete">Delete Selected</button>
    </div>
</div>

Problem1: I don't know to get the values to display in the model once it passes the values right now they are all null

Problem2: How do I refer the value if I use a for loop as above?

I'm using .Net Core Enity framework. I tried both methods above, but I'm not sure how to set the hiddenfor / displayfor values so that they save on post.

Answer 1

If you want to pass Model.tblAllTransactionsWithDetail to OnPostResubmitAsync,try to use hidden inputs like this:

<form method="post" asp-page-handler="Resubmit">
    @for (var i = 0; i < @Model.tblAllTransactionsWithDetail.Count(); i++)
    {
        <input hidden asp-for="@Model.tblAllTransactionsWithDetail[@i].FirstName" name="tblAllTransactionsWithDetailbyBulkID[@i].FirstName" />
        <input hidden asp-for="@Model.tblAllTransactionsWithDetail[@i].LastName" name="tblAllTransactionsWithDetailbyBulkID[@i].LastName" />
        <input hidden asp-for="@Model.tblAllTransactionsWithDetail[@i].MemberNumber" name="tblAllTransactionsWithDetailbyBulkID[@i].MemberNumber" />
        <input hidden asp-for="@Model.tblAllTransactionsWithDetail[@i].EmployeeSSN" name="tblAllTransactionsWithDetailbyBulkID[@i].EmployeeSSN" />
        <input hidden asp-for="@Model.tblAllTransactionsWithDetail[@i].DependentSSN" name="tblAllTransactionsWithDetailbyBulkID[@i].DependentSSN" />
        <input hidden asp-for="@Model.tblAllTransactionsWithDetail[@i].MiddleInitial" name="tblAllTransactionsWithDetailbyBulkID[@i].MiddleInitial" />
        <input hidden asp-for="@Model.tblAllTransactionsWithDetail[@i].platform" name="tblAllTransactionsWithDetailbyBulkID[@i].platform" />
        <input hidden asp-for="@Model.tblAllTransactionsWithDetail[@i].DateOfBirth" name="tblAllTransactionsWithDetailbyBulkID[@i].DateOfBirth" />



    }
    <button style="margin-right:50px;" id="resubmitEditedLines" class="btn btn-primary" type="submit" value="Resbumit Edited Lines">Resubmit Selected Lines</button>
</form>