Как получить несколько флажков для одного свойства в MVC

Question

Я делаю простой проект MVC для моей практики. Но я не знаю, как разместить несколько флажков для одного свойства модели.

Например,

 public class TestVeiwModel
 {
     public string LanguagePreference {get; set;}
 }

В связи с этим я хотел бы установить 3 флажка для этого свойства LanguagePreference. Английский, французский и другие, Таким образом, пользователь может выбрать только один из этих флажков или не выбирать ни один из них. Если выбран английский, LanguagePreference будет английский. Это ведет себя во многом как переключатель, за исключением того, что можно отменить выбор. Но я хочу, чтобы это выглядело как флажок.

Я пытался использовать помощники @ Html.CheckBoxFor и @ Html.CheckBox, но мне не удалось получить эту работу.

Буду очень признателен, если кто-нибудь сможет мне помочь.

Answer 1

Написать перечисление для таких опций, как

    public enum LanguageOptionSelected
    {       
       English= 0,
       French= 1,        
       Other= 2
    }

И напишите ниже код в модели:

public LanguageOptionSelected? Option { get; set; }

Answer 2

В этом случае вы должны использовать переключатель. Но если вам нужно такое поведение флажка, вы можете сделать это с помощью jquery. Вам нужно еще одно свойство, чтобы узнать, какое из них выбрано.

public class TestVeiwModel
{
     public string LanguageName {get; set;}
     public bool IsSelected {get; set;}
}

После этого свяжите свой список тем и перейдите к такому просмотру.

@model List<yourproejctName.modelNameSpace.TestVeiwModel> //Path of your model

for (int i = 0; i < Model.Count; i++)
{
   @Html.CheckBoxFor(r => Model[i].IsSelected, htmlAttributes: new { @class = "chkBoxClass", onchange = "fun_Onchange(this)" })

   @Html.DisplayFor(r => Model.LanguageName)
}

И нужно написать функцию jquery: -

  function  fun_Onchange(evt)
  {
       if($(evt).is(':checked')){
        $('.chkBoxClass').prop('checked', false);
        $(evt).prop('checked', true);
    }
    else{
        $('.chkBoxClass').prop('checked', false);
    }
  }