Felder sperren und freigeben

using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using FMH.Komponente.Basis.Ui.Controls;
using FMH.Komponente.Basis.Ui.Validation.DataAnnotation;
using Microsoft.AspNetCore.Mvc.Rendering;

namespace FMH.Komponente.WebUI.Areas.Basis.Models
{
    /// <summary>
    /// Je ein Feld der vier Eingabearten, die sich über die Skript-Funktionen der Basis sperren
    /// und wieder freigeben lassen.
    /// </summary>
    /// <remarks>
    /// Die Funktionen sprechen die Felder über den **Eigenschaftsnamen** an – deshalb ist hier
    /// wichtig, wie die Eigenschaften heissen, nicht was sie enthalten.
    /// </remarks>
    public class ElementStatusBeispielViewModel
    {
        /// <summary>
        /// Holt oder setzt das Textfeld; angesprochen über <c>disableTextField('Name')</c>.
        /// </summary>
        [Display(Name = "Name")]
        public string Name { get; set; } = "Muster";

        /// <summary>
        /// Holt oder setzt die Auswahlbox; angesprochen über <c>disableDropdown('DossierId')</c>.
        /// </summary>
        [Display(Name = "Dossier")]
        [UIHint(UiEditor.Basis.DropdownList)]
        [AdditionalMetadata("Selection", nameof(Dossiers))]
        public int? DossierId { get; set; } = 4;

        /// <summary>
        /// Holt die Auswahlliste der Auswahlbox.
        /// </summary>
        public IEnumerable<SelectListItem> Dossiers { get; } = new List<SelectListItem>
                                                               {
                                                                   new ("Dossier 2024", "2"),
                                                                   new ("Dossier 2025", "3"),
                                                                   new ("Dossier 2026", "4"),
                                                               };

        /// <summary>
        /// Holt oder setzt die Radio-Auswahl; angesprochen über <c>disableRadio('RadioAuswahl')</c>.
        /// </summary>
        [Display(Name = "Anrede")]
        [UIHint(UiEditor.Basis.RadioList)]
        [AdditionalMetadata("Selection", nameof(Anreden))]
        [AdditionalMetadata("Direction", FlexDirection.Row)]
        public string RadioAuswahl { get; set; } = "f";

        /// <summary>
        /// Holt die Auswahlliste der Radio-Gruppe.
        /// </summary>
        public IEnumerable<SelectListItem> Anreden { get; } = new List<SelectListItem>
                                                              {
                                                                  new ("Frau", "f"),
                                                                  new ("Herr", "m"),
                                                                  new ("Keine Angabe", "x"),
                                                              };

        /// <summary>
        /// Holt oder setzt die Mehrfachauswahl; angesprochen über
        /// <c>disableCheckbox('CheckBoxAuswahl')</c>.
        /// </summary>
        [Display(Name = "Zustellwege")]
        [UIHint(UiEditor.Basis.CheckboxList)]
        [AdditionalMetadata("Selection", nameof(Zustellwege))]
        [AdditionalMetadata("Direction", FlexDirection.Row)]
        public IEnumerable<int> CheckBoxAuswahl { get; set; } = new[] { 1 };

        /// <summary>
        /// Holt die Auswahlliste der Mehrfachauswahl.
        /// </summary>
        public IEnumerable<SelectListItem> Zustellwege { get; } = new List<SelectListItem>
                                                                  {
                                                                      new ("Post", "1"),
                                                                      new ("E-Mail", "2"),
                                                                      new ("Portal", "3"),
                                                                  };
    }
}

// Beispiel «Felder sperren und freigeben» (Basis).
//
// Die Funktionen sind global und kommen aus jquery-fmh-validation.js der Basis-Komponente. Sie
// erwarten den **Eigenschaftsnamen** des Feldes, nicht einen Selektor, ein führendes '#' wird
// zwar toleriert, gehört aber nicht hin.
//
// Ausnahme: disableButton/enableButton suchen als Klasse, sobald der Wert einen Punkt enthält,
// sonst als Id.
var statusFunktionen = {
    'TextField:sperren': disableTextField,
    'TextField:freigeben': enableTextField,
    'Dropdown:sperren': disableDropdown,
    'Dropdown:freigeben': enableDropdown,
    'Radio:sperren': disableRadio,
    'Radio:freigeben': enableRadio,
    'Checkbox:sperren': disableCheckbox,
    'Checkbox:freigeben': enableCheckbox,
    'Button:sperren': disableButton,
    'Button:freigeben': enableButton,
};

// Delegation an das document: Der Zeitpunkt des Renderns spielt damit keine Rolle.
document.addEventListener('click', function (ereignis) {
    var knopf = ereignis.target.closest('[data-status]');

    if (knopf === null) {
        return;
    }

    var funktion = statusFunktionen[knopf.dataset.statusTyp + ':' + knopf.dataset.status];

    if (funktion) {
        funktion(knopf.dataset.statusFeld);
    }
});

// Dieselbe Umsetzung mit jQuery. Diese Datei wird NICHT geladen, sie steht nur im Code-Tab
// «jQuery». Würden beide Fassungen laufen, liefe jeder Klick doppelt.
//
// Die Funktionen selbst sind in beiden Fassungen dieselben: Sie stammen aus
// jquery-fmh-validation.js der Basis-Komponente und setzen jQuery ohnehin voraus.
var statusFunktionen = {
    'TextField:sperren': disableTextField,
    'TextField:freigeben': enableTextField,
    'Dropdown:sperren': disableDropdown,
    'Dropdown:freigeben': enableDropdown,
    'Radio:sperren': disableRadio,
    'Radio:freigeben': enableRadio,
    'Checkbox:sperren': disableCheckbox,
    'Checkbox:freigeben': enableCheckbox,
    'Button:sperren': disableButton,
    'Button:freigeben': enableButton,
};

// $(document).on(ereignis, selektor, ...) ist die jQuery-Form der Delegation.
// .data('statusTyp') liest data-status-typ, jQuery wandelt die Bindestrich-Schreibweise selbst um.
$(document).on('click', '[data-status]', function () {
    var $knopf = $(this);
    var funktion = statusFunktionen[$knopf.data('statusTyp') + ':' + $knopf.data('status')];

    if (funktion) {
        funktion($knopf.data('statusFeld'));
    }
});