将复选框列表与Razor页面一起使用以输入数据库 [英] Using a checkbox list with Razor Pages for input to DB

问题描述

我希望表单中的输入之一来自用户选择的复选框列表.我已经花了几个小时了，但我仍然不明白我需要做什么.为什么MVC在此主题上有这么多帮助，而Razor却几乎没有帮助?

I want one of my inputs in a form to come from a list of checkboxes that the user selects. I've been going at this for several hours now, and I still don't understand what I need to do for this. Why is there so much help for MVC on this topic and hardly any for Razor?

.cshtml

<form method="post">
    <label asp-for="ServiceRqLd.JobType" class="control-label"></label>
    <div class="form-check-inline">
        @for (var i = 0; i < Model.JobTypes.Count(); i++)
        {
            <div class="form-check">
                <input asp-for="@Model.JobTypes[i].Selected" class="form-check-input" />
                <label asp-for="@Model.JobTypes[i].Selected">@Model.JobTypes[i].Text</label>
                <input type="hidden" asp-for="@Model.JobTypes[i].Value" />
                <input type="hidden" asp-for="@Model.JobTypes[i].Text" />
            </div>
        }
    </div>
    <span asp-validation-for="ServiceRqLd.JobType" class="text-danger"></span>
</form>

.cshtml.cs

[BindProperty]
public ServiceRqLd ServiceRqLd { get; set; }
[BindProperty]
public List<string> AreTypes { get; set; }

public IActionResult OnGet()
{
    JobTypes = new List<SelectListItem>()
    {
        new SelectListItem() { Text="Mechanical", Value="Mechanical" },
        new SelectListItem() { Text="Electrical", Value="Electrical" },
        new SelectListItem() { Text="Fluid Power", Value="Fluid Power" },
        new SelectListItem() { Text="Programming", Value="Programming" }
    };

    return Page();
}

public async Task<IActionResult> OnPostAsync()
{
    _context.ServiceLeadInfo.Add(ServiceRqLd);
    ServiceRqLd.JobType = FilterSelected();
    await _context.SaveChangesAsync();
}

private string FilterSelected()
{
    foreach (var c in JobTypes)
    {
        if (c.Selected)
        {
            SelectedTypes = c.Value + ", " + SelectedTypes;
        }
    }

    return SelectedTypes;
}

模型

public class ServiceRqLd
{
    public int ServiceRqLdID { get; set; }
    public string JobType { get; set; }
}

到目前为止，这就是我所拥有的，但是我不知道我在做什么.我既不了解如何正确显示复选框列表，也不了解如何将ServiceRqLd.JobType设置为等于所选框(无论是所选选项的串联字符串还是其他).

This is all I have so far, but I have no idea what I'm doing with this. I neither understand how to properly display the list of checkboxes nor know how to set ServiceRqLd.JobType equal to the selected boxes (be it a concatenated string of the selected options or otherwise).

通过将复选框的名称设置为相同或不相同以及如何存储所选信息，我收到了有关如何执行此操作的冲突信息.任何帮助将不胜感激.

I have received conflicting information on how to do this by setting the name of the checkbox the same or not and how the selected information is stored. Any bit of help would be greatly appreciated.

我已经对代码进行了编辑，直到到目前为止.问题在于，提交表单后，ServiceRqLd.JobType保持为空.我不相信自己真正了解.cshtml文件中的内容.所有这些输入都是必要的吗?我需要更改哪一个，以便将复选框输入到模型的JobType属性中.

I have edited my code to what I have figured out thus far. The problem is that ServiceRqLd.JobType remains null after submitting the form. I don't believe I really understand what I have in the .cshtml file. Are all of these inputs necessary? Which one do I need to change so that the checked boxes are inputs to the JobType property of the model.

推荐答案

如果要选中复选框，则可以使用 name 绑定数据，它可以替换 asp-for 绑定数据.这是一个演示示例:

If you want to get selected checkbox,you can use name to bind data,it can replace asp-for in binding data.Here is a demo worked:

cshtml:

<div>
    <form method="post">
        <label asp-for="ServiceRqLd.JobType" class="control-label"></label>
        <div class="form-check-inline">
            @for (var i = 0; i < Model.JobTypes.Count(); i++)
            {
                <div class="form-check">
                    <input type="checkbox" value="@Model.JobTypes[i].Text" name="AreTypes"/>
                    <label>@Model.JobTypes[i].Text</label>
                    </div>
                    }
                </div>
                <input type="submit" value="submit" />
</form>
</div>

cshtml.cs:

cshtml.cs:

public class testModel : PageModel
    {
        [BindProperty]
        public ServiceRqLd ServiceRqLd { get; set; }
        [BindProperty]
        public List<string> AreTypes { get; set; }
        [BindProperty]
        public List<SelectListItem> JobTypes { get; set; }
        public IActionResult OnGet()
        {
            JobTypes = new List<SelectListItem>()
        {
        new SelectListItem() { Text="Mechanical", Value="Mechanical" },
        new SelectListItem() { Text="Electrical", Value="Electrical" },
        new SelectListItem() { Text="Fluid Power", Value="Fluid Power" },
        new SelectListItem() { Text="Programming", Value="Programming" }
        };

            return Page();
        }

        public async Task<IActionResult> OnPostAsync()
        {
           
            ServiceRqLd.JobType = string.Join(",", AreTypes.ToArray());
            return Page();
        }

    }

结果:

这篇关于将复选框列表与Razor页面一起使用以输入数据库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！