单击提交按钮剃须刀页面 mvc 时如何选中或不选中复选框？

Question

我在 asp.net 核心 MVC 剃刀页面上工作。我遇到无法选中复选框的问题 在页面模型剃须刀页面上。

所以哪个复选框已选中或未选中这正是我需要进入页面模型 MVC。

因此，如果复选框 StockTake 和 ShelfLabelPrint 被选中，那么我将在页面模型上获得值 1 和 2 为真。

checkbox Transfer not checked so it will get value 3 status false .

public class AddUserAccessModel : PageModel
    {
        [BindProperty]
        public UC.ADC.Core.Entities.SQL.UserAccess UserAccess { get; set; }
public async Task OnPost(UC.ADC.Core.Entities.SQL.UserAccess useraccess)
        {
       string[] checkedModuleCodes = Request.Form["checks"];
      // How to recognize which check box have checked or not here
        }
    }

ON AddUserAccess.cshtml Razor 视图

@Html.AntiForgeryToken()
    <form method="post">
        <button  type="submit" class="col-sm-1 btn btn-primary">Submit</button>
        
        <div class="form-group row">
            <label for="user-id" class="col-sm-1 col-form-label" style="font-size:15px;font-family: 'Open Sans', sans-serif;font-weight: bold;">User ID</label>
            <div class="col-sm-3">
                <input id="useraccess-id"  asp-for="UserAccess.UserId" type="text" class="form-control" style=" margin-left:10px;font-size:15px;font-family: 'Open Sans' , sans-serif;font-weight: bold;" />
            </div>
        </div>
    <input id="StockTake" name="checks" type="checkbox" asp-for="UserAccess.MODULECODE" value="1">
        <label for="lblStockTake">Stock Take</label>
    <input id="ShelfLabelPrint" name="checks" type="checkbox" asp-for="UserAccess.MODULECODE" value="2">
        <label for="lblShelfLabel">Shelf Label Print</label>

    <input id="Transfer" name="checks" type="checkbox" asp-for="UserAccess.MODULECODE" value="3">
        <label for="lblTransfer" style="margin-right:5px;">Transfer</label>

        
       
        
    </form>

我需要的预期结果如下

Answer 1

在我看来，你可以创建一个包含

value

和

isChekced

状态的模型，请参考这个演示。

型号

public class Result
    {
        public string value { get; set; }
        public bool isChecked { get; set; }
         public string name { get; set; }
    }

将此模型添加到页面模型中

[BindProperty]
public List<Result> result { get; set; } = new List<Result>();

使用javascript根据用户是否选中视图中的复选框来设置结果的值

 @Html.AntiForgeryToken()
<form method="post">
    <button type="submit" class="col-sm-1 btn btn-primary">Submit</button>

    <div class="form-group row">
        <label for="user-id" class="col-sm-1 col-form-label" style="font-size:15px;font-family: 'Open Sans', sans-serif;font-weight: bold;">User ID</label>
        <div class="col-sm-3">
            <input id="useraccess-id" asp-for="UserAccess.UserId" type="text" class="form-control" style=" margin-left:10px;font-size:15px;font-family: 'Open Sans' , sans-serif;font-weight: bold;" />
        </div>
    </div>

<div>
    <input id="StockTake" name="checks" type="checkbox" asp-for="UserAccess.MODULECODE" value="1">
    
    <input name="result[0].isChecked" type="hidden" value="false"/>
    <input name="result[0].value" type="hidden" value="1"/>
    <input name="result[0].name" type="hidden" value="StockTake" />
    <label for="lblStockTake">Stock Take</label>
</div>
<div>
    <input id="ShelfLabelPrint" name="checks" type="checkbox" asp-for="UserAccess.MODULECODE" value="2">
    <input name="result[1].isChecked" type="hidden" value="false" />
    <input name="result[1].value" type="hidden" value="2" />
    <input name="result[1].name" type="hidden" value="ShelfLabelPrint" />
    <label for="lblShelfLabel">Shelf Label Print</label>
</div>

<div>
    <input id="Transfer" name="checks" type="checkbox" asp-for="UserAccess.MODULECODE" value="3">
    <input name="result[2].isChecked" type="hidden" value="false" />
    <input name="result[2].value" type="hidden" value="3" />
    <input name="result[2].name" type="hidden" value="Transfer" />
    <label for="lblTransfer" style="margin-right:5px;">Transfer</label>
</div>    
</form>


@section Scripts{
    <script>
        $(document).ready(function () {
            $('#StockTake').change(function () {
                var isChecked = $(this).is(':checked');
                $('input[name="result[0].isChecked"]').val(isChecked);
            });

            $('#ShelfLabelPrint').change(function () {
                var isChecked = $(this).is(':checked');
                $('input[name="result[1].isChecked').val(isChecked);
            });

            $('#Transfer').change(function () {
                var isChecked = $(this).is(':checked');
                $('input[name="result[2].isChecked').val(isChecked);
            });
        });
    </script>
}

动图演示