在页面模型的Razor页面上如何获取未选中的复选框列表?

huangapple go评论67阅读模式
英文:

How to get list of checkboxes not checked on page model razor page?

问题

I working on razor page with .NET core 7. I face issue I can't pass checkboxes that are not checked with values as 1, 2, 3, from the HTML page to the page model on the post method? So, when the user clicks the submit button, the post method should collect the values of the unchecked checkboxes as a list. Here's the view model used:

public class UserAccessViewModel
{
    public UserAccess userAccess { get; set; }
    public int[] checks { get; set; }
}

In the page.cshtml file, you have checkboxes defined like this:

<input id="StockTake" name="UserAccessViewModel.checks" type="checkbox" asp-for="UserAccess.MODULECODE" value="1">
<label for="lblStockTake">Stock Take</label>

<input id="ShelfLabelPrint" name="UserAccessViewModel.checks" type="checkbox" asp-for="UserAccess.MODULECODE" value="2">
<label for="lblShelfLabel">Shelf Label Print</label>

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

In the pagemodel.cshtml.cs file, you can receive the unchecked checkboxes in the OnPost method of your page model like this:

public async Task OnPost(UserAccessViewModel UserAccessViewModel)
{
    // You can access the unchecked checkboxes in UserAccessViewModel.checks here.
}

For more details, please refer to the image: pass unchecked checkboxes to razor page.

英文:

I working on razor page with .NET core 7 . I face issue I can't pass checkboxes that not checked with values as 1 2 3 from html page to page model on post method ?

so user click submit button then on post method fire then it will collect check boxes values not checked as list

view model used

public class UserAccessViewModel
        {

            public UserAccess userAccess { get; set; }
            public int[] checks { get; set; }
        }

on page.cshtml

@Html.AntiForgeryToken()
    &lt;form method=&quot;post&quot;&gt;
        &lt;button id=&quot;FillCheckBox&quot; type=&quot;submit&quot; class=&quot;col-sm-1 btn btn-primary&quot;&gt;Submit&lt;/button&gt;
      
    &lt;input id=&quot;StockTake&quot; name=&quot;UserAccessViewModel.checks&quot; type=&quot;checkbox&quot; asp-for=&quot;UserAccess.MODULECODE&quot; value=&quot;1&quot;&gt;
        &lt;label for=&quot;lblStockTake&quot;&gt;Stock Take&lt;/label&gt;
    &lt;input id=&quot;ShelfLabelPrint&quot; name=&quot;UserAccessViewModel.checks&quot; type=&quot;checkbox&quot; asp-for=&quot;UserAccess.MODULECODE&quot; value=&quot;2&quot;&gt;
        &lt;label for=&quot;lblShelfLabel&quot;&gt;Shelf Label Print&lt;/label&gt;

    &lt;input id=&quot;Transfer&quot; name=&quot;UserAccessViewModel.checks&quot; type=&quot;checkbox&quot; asp-for=&quot;UserAccess.MODULECODE&quot; value=&quot;3&quot;&gt;
        &lt;label for=&quot;lblTransfer&quot; style=&quot;margin-right:5px;&quot;&gt;Transfer&lt;/label&gt;

        
                    
        
    &lt;/form&gt;

on pagemodel .cshtml.cs

public async Task OnPost(UserAccessViewModel UserAccessViewModel)
{
   //How to pass checkboxes not checked to razor page
}

for more details what I need

在页面模型的Razor页面上如何获取未选中的复选框列表?

答案1

得分: 1

以下是您要翻译的内容:

尝试修改您的视图模型:

public class UserAccessViewModel
{
    //其他属性...
    public List<CheckBoxModel> Checks { get; set; } = default!;
}

public class CheckBoxModel
{
    public int Value { get; set; }

    public bool Selected { get; set; }
    public string Label { get; set; } = default!;
}

页面模型(我尝试使用默认的RazorPage项目的Privacy Page):

public class PrivacyModel : PageModel
{
    //.......

    [BindProperty(SupportsGet = true)]
    public UserAccessViewModel userAccessViewModel { get; set; }

    public void OnGet()
    {
        userAccessViewModel = new UserAccessViewModel()
        {
            Checks = new List<CheckBoxModel>
            {
                new CheckBoxModel(){Value=1,Label="Stock Take"} ,
                new CheckBoxModel(){Value=2,Label="Shelf Label Print"} ,
                new CheckBoxModel(){Value=3,Label="Transfer"} ,
            }
        };
    }
    public void OnPost(UserAccessViewModel UserAccessViewModel)
    {

    }
}

页面中的代码(添加隐藏输入来保存整数值,并使用`asp-for`来绑定复选框的选中状态):

@page
@model PrivacyModel

<form method="post">
    <button id="FillCheckBox" type="submit" class="col-sm-1 btn btn-primary">Submit</button>
    @for(int i = 0; i < Model.userAccessViewModel.Checks.Count; i++)
    {
        <input asp-for="userAccessViewModel.Checks[i].Selected" type="checkbox"/>
        <input asp-for="userAccessViewModel.Checks[i].Value" hidden />
        <label asp-for="userAccessViewModel.Checks[i].Label">@Model.userAccessViewModel.Checks[i].Label</label>
        <input asp-for="userAccessViewModel.Checks[i].Label" hidden />
    }    
</form>

结果:

[![enter image description here][1]][1]

未选中的复选框:

var notchecked = userAccessViewModel.Checks.Where(x => x.Selected == false).ToList();

希望这有所帮助。如果需要进一步的帮助,请告诉我。

英文:

try modify your viewmodel:

public class UserAccessViewModel
    {
        //other properties...
        public List&lt;CheckBoxModel&gt; Checks { get; set; } = default!;
    }

    public class CheckBoxModel
    {
        public int Value { get; set; }

        public bool Selected { get; set; }
        public string Label { get; set; } = default!;
    }

Page Model(I tried with Privacy Page of a default RazorPage project):

public class PrivacyModel : PageModel
    {
        //.......

        [BindProperty(SupportsGet =true)]
        public UserAccessViewModel userAccessViewModel { get; set; }

        

        public void OnGet()
        {
            userAccessViewModel=new UserAccessViewModel() 
            { 
                Checks=new List&lt;CheckBoxModel&gt; 
                { 
                    new CheckBoxModel(){Value=1,Label=&quot;Stock Take&quot;} ,
                    new CheckBoxModel(){Value=2,Label=&quot;Shelf Label Print&quot;} ,
                    new CheckBoxModel(){Value=3,Label=&quot;Transfer&quot;} ,
                } 
            };
        }
        public void OnPost(UserAccessViewModel UserAccessViewModel)
        {

        }
    }

Codes in Page(add hidden input hold your int values and bind the statue of selected or not with asp-for in checkbox):

@page
@model PrivacyModel


&lt;form method=&quot;post&quot;&gt;
    &lt;button id=&quot;FillCheckBox&quot; type=&quot;submit&quot; class=&quot;col-sm-1 btn btn-primary&quot;&gt;Submit&lt;/button&gt;
    @for(int i = 0; i &lt; Model.userAccessViewModel.Checks.Count; i++)
    {
        &lt;input asp-for=&quot;userAccessViewModel.Checks[i].Selected&quot; type=&quot;checkbox&quot;/&gt;
        &lt;input asp-for=&quot;userAccessViewModel.Checks[i].Value&quot; hidden /&gt;
        &lt;label asp-for=&quot;userAccessViewModel.Checks[i].Label&quot;&gt;@Model.userAccessViewModel.Checks[i].Label&lt;/label&gt;
        &lt;input asp-for=&quot;userAccessViewModel.Checks[i].Label&quot; hidden /&gt;
    }    
&lt;/form&gt;

Result:

在页面模型的Razor页面上如何获取未选中的复选框列表?

not selected checkbox:

var notchecked = userAccessViewModel.Checks.Where(x =&gt; x.Selected == false).ToList();

huangapple
  • 本文由 发表于 2023年5月14日 01:56:04
  • 转载请务必保留本文链接:https://go.coder-hub.com/76244185.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定