Как в .NET Core работают логические переключатели, привязанные к модели?

У меня возникли проблемы с привязкой свойства логической модели представления к переключателю в .NET Core с помощью вспомогательных функций тегов.

<fieldset class="form-group">
    <div class="row">
        <label asp-for="AffectsUsers" class="col-sm-2 col-form-label text-right">Affects Users?</label>
        <div class="col-sm-10">
            <div class="mt-2">
                <div class="form-check form-check-inline">
                    <input class="form-check-input" asp-for="AffectsUsers" type="radio" value="true" />
                    <label class="form-check-label" asp-for="AffectsUsers">Yes</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" asp-for="AffectsUsers" type="radio" value="false" />
                    <label class="form-check-label" asp-for="AffectsUsers">No</label>
                </div>
            </div>
            <span asp-validation-for="AffectsUsers" class="text-danger"></span>
        </div>
    </div>
</fieldset>

У меня есть событие изменения jQuery, привязанное к переключателям на основе идентификатора.

$('#AffectsUsers').change(function() {
   if (this.value === 'true') { ... } else { ... }
});

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

Как я могу привязать логическое значение в моей модели представления к переключателям, чтобы событие изменения реагировало соответствующим образом в зависимости от значения элемента управления?


asp.net-core-mvc asp.net-core-tag-helpers model-binding
person Brian Chambers    schedule 06.07.2018    source источник
comment
Повторяющиеся атрибуты id являются недопустимым html. Дайте каждому переключателю уникальный id или удалите его, используя id="", а затем дайте им имя класса, чтобы вы использовали $('.yourClassName').change() {` - затем обратитесь к этот ответ для определения того, какой переключатель отмечен   -  person    schedule 07.07.2018
comment
И в качестве примечания, ваши <label> элементы тоже не будут работать - вы можете использовать <label><input ... /><span>Yes</span></label>   -  person    schedule 07.07.2018
comment
Я следовал руководству Bootstrap по размещению переключателей для меток и входных данных: Bootstrap Руководство   -  person Brian Chambers    schedule 09.07.2018

Ответы (1)


arrow_upward
4
arrow_downward

Сначала я переопределил идентификатор, как предложил Стивен, чтобы обеспечить правильный HTML. Кроме того, я установил тег «для» вместо тега «asp-for» и изменил идентификатор, чтобы он ссылался на конкретный переключатель, на который он ссылается.

<fieldset class="form-group">
    <div class="row">
        <label asp-for="AffectsUsers" class="col-sm-2 col-form-label text-right">Affects Users?</label>
        <div class="col-sm-10">
            <div class="mt-2">
                <div class="form-check form-check-inline">
                    <input class="form-check-input" id="AffectsUsersYes" asp-for="AffectsUsers" type="radio" value="true" />
                    <label class="form-check-label" for="AffectsUsersYes">Yes</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" id="AffectsUsersNo" asp-for="AffectsUsers" type="radio" value="false" />
                    <label class="form-check-label" for="AffectsUsersNo">No</label>
                </div>
            </div>
            <span asp-validation-for="AffectsUsers" class="text-danger"></span>
        </div>
    </div>
</fieldset>

Затем я использовал имя переключателя вместо идентификатора в своем jQuery:

$('input[type=radio][name=AffectsUsers]').change(function() {
    if (this.value === 'true') { ... } else { ... }
});
person Brian Chambers    schedule 09.07.2018
comment
Что вы имеете в виду, когда говорите, что они не будут работать? Сейчас я запускаю свое приложение, и они отображают правильный текст рядом с переключателями. Мое событие изменения jQuery срабатывает, как и ожидалось. Это недопустимый HTML или что-то еще недействительное? Я хотел бы иметь чистую разметку, но на данный момент я не могу найти в ней ничего плохого. - person Brian Chambers; 09.07.2018
comment
Нажмите на ярлык - он не устанавливает этот переключатель :) - он должен быть <label class="form-check-label" for="AffectsUsersYes">Yes</label> (и то же самое для другого, но измените атрибут for на for"AffectsUsersNo") - и нет asp-for=".." - person ; 09.07.2018
comment
О, теперь я вижу! Я даже не заметил, что ярлыки не кликабельны! Спасибо за советы, Степан! (Я отредактирую свой ответ.) - person Brian Chambers; 09.07.2018