How to use enum value in checkbox and store the accourding in integer number?-CodePudding

I have a string property that corresponds have some checkbox values. I want to use an enum. Enum values want to store on that string property.

My property:

[Display(Name = "What type of assistance are you seeking?")]
public string AssistanceType { get; set; }

This is the enum

public enum AssistanceTypes
{
        AssistanceWithDisconnection = 0,
        UtilityGaslineHookup = 1,
        EmergencyHeatingFuel = 2,
        SystemRepair = 3,
        Anything = 4,
}

This is my view page

<div >
    <div >
        <input  type="checkbox" >
        <label  for="flexCheckChecked"> Assistance with Disconnection </label>
    </div>
    <div >
        <input  type="checkbox" >
        <label  for="flexCheckChecked"> Utility Pole/ Gas line Hookup or Deposit </label>
    </div>
    <div >
        <input  type="checkbox" >
        <label  for="flexCheckChecked"> Emergency Heating Fuel </label>
    </div>
    <div >
        <input  type="checkbox" >
        <label  for="flexCheckChecked"> System Repair or Replacement </label>
    </div>
    <div >
        <input  type="checkbox" >
        <label  for="flexCheckChecked"> Anything else ?  </label>
    </div>
    <div >
        <input type="text"  placeholder="Explain" />
    </div>
</div>

I want to store all checkbox values like a list, 1,2,3.....

1 is the first checkbox value
2 is the second checkbox value

I want to store it in a database like a string.

So how to store it?

CodePudding user response：

First approach:

You can bind the selected checkbox values to a list of integers then convert the list to comma separated string inside OnPost method. Notice that the name attribute of the checkboxes name="AssistanceTypeList" has the same name as the bound property public List<int> AssistanceTypeList { get; set; }. This is important.

Page:

<div >
    <input  type="checkbox" value="@((int)AssistanceTypes.AssistanceWithDisconnection)" name="AssistanceTypeList"
           checked="@(Model.AssistanceTypeList.Contains((int)AssistanceTypes.AssistanceWithDisconnection))">

    <label  for="flexCheckChecked"> Assistance with Disconnection </label>
</div>
<div >
    <input  type="checkbox" value="@((int)AssistanceTypes.UtilityGaslineHookup)" name="AssistanceTypeList"
           checked="@(Model.AssistanceTypeList.Contains((int)AssistanceTypes.UtilityGaslineHookup))">

    <label  for="flexCheckChecked"> Utility Pole/ Gas line Hookup or Deposit </label>
</div>
<div >
    <input  type="checkbox" value="@((int)AssistanceTypes.EmergencyHeatingFuel)" name="AssistanceTypeList"
           checked="@(Model.AssistanceTypeList.Contains((int)AssistanceTypes.EmergencyHeatingFuel))">

    <label  for="flexCheckChecked"> Emergency Heating Fuel </label>
</div>
<div >
    <input  type="checkbox" value="@((int)AssistanceTypes.SystemRepair)" name="AssistanceTypeList"
           checked="@(Model.AssistanceTypeList.Contains((int)AssistanceTypes.SystemRepair))">

    <label  for="flexCheckChecked"> System Repair or Replacement </label>
</div>
<div >
    <input  type="checkbox" value="@((int)AssistanceTypes.Anything)" name="AssistanceTypeList"
           checked="@(Model.AssistanceTypeList.Contains((int)AssistanceTypes.Anything))">

    <label  for="flexCheckChecked"> Anything else ?  </label>
</div>

PageModel:

[BindProperty]
public List<int> AssistanceTypeList { get; set; }

public void OnGet()
{
    var selectedAssistantType = data.AssistanceType;
        
    AssistanceTypeList = selectedAssistantType
        .Split(",")
        .Select(int.Parse)
        .ToList();
}

public void OnPost()
{
    // AssistanceTypeList contains the enum values that where checked by the user. We just need to convert the list to comma separated string.
    
    var selectedAssistantType = string.Join(",", AssistanceTypeList);
}

Second approach (my recommendation):

First of all use the Display attribute to set the display name for each enum value. The display name will be shown inside the label of each checkbox.

public enum AssistanceTypes
{
    [Display(Name = "Assistance with Disconnection")]
    AssistanceWithDisconnection = 0,

    [Display(Name = "Utility Pole/ Gas line Hookup or Deposit")]
    UtilityGaslineHookup = 1,

    [Display(Name = "Emergency Heating Fuel")]
    EmergencyHeatingFuel = 2,

    [Display(Name = "System Repair or Replacement")]
    SystemRepair = 3,

    [Display(Name = "Anything else ?")]
    Anything = 4,
}

Inside your Page, instead of creating each checkbox "manually", iterate the AssistanceTypes values and create a checkbox for each value. Use @Html.DisplayFor html helper to get the friendly display names for the labels.

@foreach (var assistanceType in Enum.GetValues<AssistanceTypes>())
{
    <div >
        <input  type="checkbox" value="@((int)assistanceType)" name="AssistanceTypeList"
               checked="@(Model.AssistanceTypeList.Contains((int)assistanceType))">

        <label  for="flexCheckChecked"> @Html.DisplayFor(model => assistanceType) </label>
    </div>
}

The PageModel stays the same.

This way if in the future you need to add new values to the AssistanceTypes enum. You don't need to change anything in your Page and PageModel.

https://www.learnrazorpages.com/razor-pages/forms/checkboxes#binding-to-collections