使用 PageModel 将 HTML 表信息从 cshtml 传递到 onpost cshtml.cs 方法

Question

I'm using asp.net core and bootstrap, I'm trying to update my table when I check and uncheck the checkboxes. The problem is that when I click on button save to update the table I want to receive all the information, but when I try to do that somehow my IList<OutputAccessRights> userAccessRights returns Count = 0. How can I post-back without losing everything? Can I do using jquery, javascript?

.cs:

public IActionResult OnPost(int id, string groupAccessName, bool chkDefaultGroup, IList<OutputAccessRights> userAccessRights, string returnUrl = null)
        {
            ReturnUrl = returnUrl;

                else //Update
                {
                    Security security = new Security();
                    security.GroupAccessUpdate(BellaMain.GlobalVariable.SystemID, Convert.ToInt16(groupAccessID), groupAccessName, false);
                    Update(Convert.ToInt16(groupAccessID), userAccessRights);
                    GroupAccessID = id;
                    GroupAccessName = groupAccessName;

                    return RedirectToAction("Group AccessDetails", "Form", new { id = GroupAccessID, searchString = SearchString, searchInt = SearchInt }).WithSuccess("Success!", "Updated item!");
                }

            return Page();
        }

Model:

 public class GroupAccessDetailsModel : PageModel
    {
        private readonly ILogger<GroupAccessDetailsModel> _logger;

        public GroupAccessDetailsModel(ILogger<GroupAccessDetailsModel> logger)
        {
            _logger = logger;
        }
        public class OutputAccessRights
        {
            public byte MainMenuID { get; set; }
            public byte SubMenuID { get; set; }
            public byte OperationID { get; set; }
            public string MainMenuDescription { get; set; }
            public string SubMenuDescription { get; set; }
            public string Operation { get; set; }
            public bool ChkUserAccessRights { get; set; }
            public bool ChkAddRight { get; set; }
            public bool ChkUpdateRight { get; set; }
            public bool ChkDelete { get; set; }
            public bool FlagDefaultGroupAlreadySet { get; set; }
        }
        [BindProperty]
        public IList<OutputAccessRights> UsersAccessRights { get; set; }
}

html:

 @if (Model.UsersAccessRights != null)
{
    <table class="table table-striped table-bordered dataTable tableAccessRights" name="userAccessRights" id="userAccessRights" style="width:100%">
        <thead>
            <tr>
                <th>
                    MainMenu
                </th>
                <th>
                    SubMenu
                </th>
                <th>
                    Operation
                </th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model.UsersAccessRights)
            {
                <tr>
                    <td>
                        @if (Model.GroupAccessID == 0)
                        {
                            <input type="checkbox" class="form-check-inline" name="@item.ChkUserAccessRights" id="chkUserAccessRights" asp-for="@item.ChkUserAccessRights" />
                            @Html.DisplayFor(modelItem => item.MainMenuDescription)
                        }
                        else
                        {
                            @if (Model.Details != true)
                            {
                                <input type="checkbox" class="form-check-inline" name="@item.ChkUserAccessRights" id="chkUserAccessRights" asp-for="@item.ChkUserAccessRights" />
                                @Html.DisplayFor(modelItem => item.MainMenuDescription)
                                <span class="text-danger"></span>
                            }
                            else
                            {
                                <input type="checkbox" class="form-check-inline" name="@item.ChkUserAccessRights" id="chkUserAccessRights" disabled readonly="readonly" />
                                @Html.DisplayFor(modelItem => item.MainMenuDescription)
                            }
                        }
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.SubMenuDescription)
                    </td>
                    <td>
                        @if (Model.GroupAccessID == 0)
                        {
                            <input type="checkbox" class="form-check-inline" name="@item.ChkAddRight" id="chkAddRight" asp-for="@item.ChkAddRight" />
                            <label for="chkAddRight">Insert</label>
                        }
                        else
                        {
                            @if (Model.Details != true)
                            {
                                <input type="checkbox" class="form-check-inline" name="@item.ChkAddRight" id="chkAddRight" asp-for="@item.ChkAddRight" />
                                <label for="chkAddRight">Insert</label>
                                <span class="text-danger"></span>
                            }
                            else
                            {
                                <input type="checkbox" class="form-check-inline" name="@item.ChkAddRight" id="chkAddRight" disabled readonly="readonly" asp-for="@item.ChkAddRight" />
                                <label for="chkAddRight">Insert</label>
                            }
                        }
                        @if (Model.GroupAccessID == 0)
                        {
                            <input type="checkbox" class="form-check-inline" name="@item.ChkDelete" id="chkDelete" asp-for="@item.ChkDelete" />
                            <label for="chkDelete">Delete</label>
                        }
                        else
                        {
                            @if (Model.Details != true)
                            {
                                <input type="checkbox" class="form-check-inline" name="@item.ChkDelete" id="chkDelete" asp-for="@item.ChkDelete" />
                                <label for="chkDelete">Delete</label>
                                <span class="text-danger"></span>
                            }
                            else
                            {
                                <input type="checkbox" class="form-check-inline" name="@item.ChkDelete" id="chkDelete" disabled readonly="readonly" asp-for="@item.ChkDelete" />
                                <label for="chkDelete">Delete</label>
                            }
                        }
                        @if (Model.GroupAccessID == 0)
                        {
                            <input type="checkbox" class="form-check-inline" name="@item.ChkUpdateRight" id="chkUpdateRight" asp-for="@item.ChkUpdateRight" />
                            <label for="chkUpdateRight">Update</label>
                        }
                        else
                        {
                            @if (Model.Details != true)
                            {
                                <input type="checkbox" class="form-check-inline" name="@item.ChkUpdateRight" id="chkUpdateRight" asp-for="@item.ChkUpdateRight" />
                                <label for="chkUpdateRight">Update</label>
                                <span class="text-danger"></span>
                            }
                            else
                            {
                                <input type="checkbox" class="form-check-inline" name="@item.ChkUpdateRight" id="chkUpdateRight" disabled readonly="readonly" asp-for="@item.ChkUpdateRight" />
                                <label for="chkUpdateRight">Update</label>
                            }
                        }
                    </td>
                </tr>
            }

        </tbody>
    </table><button type="submit" class="btn btn-primary" asp-page="Group AccessDetails" asp-route-userAccessRights="@Model.UsersAccessRights">@Localizer["Save"]</button>
}

Answer 1

The fundamentals of http posts mean that only form controls (input, select) are posted back to the server.

Anything that the user has changed should be posted back to the server, and integrated back into a brand new get request.

So the pattern is something like:

1. Load page (GET request, Load data from database and return in view model, bind to HTML)
2. Submit form (POST request containing user input, bind to a view model, update stored data)
3. Redirect to GET action (reload data from database)

There's no getting around the fact that after a POST / form submit, you have to re-get the data from wherever it comes.

If you're not saving the user data to a database, then you just need to re-integrate it.

Edit:

If you really wanted to post the entire state of the page, you would have to put everything into an input (of type hidden to hide from the user) in order to send it back to the server.

Bear in mind that all data that comes back from an input is user input and cannot be trusted to be correct.

Edit 2:

Simple example:

public ActionResult LoadPage()
{
  var viewModel = service.GetViewModel();
  return View(viewModel);
}

[HttpPost]
public ActionResult PostPage(MyViewModel postedViewModel)
{
  service.UpdateData(postedViewModel);

  // either:
  var freshData = service.GetViewModel();
  return View(freshData);

  // or:
  // this is my preferred method, as it means that pressing F5 will not resubmit the old page
  return RedirectToAction("GetData");
}

// what I mean by integrating the data back into the fresh data:
[HttpPost]
public ActionResult PostWithIntegration(MyViewModel postedData)
{
  var freshData = service.GetViewModel();

  freshData.Update(postedData);

  return View(freshData);
}