#asp.net-mvc #image #razor #checkbox #html-helper
#asp.net-mvc #изображение #бритва #флажок #html-помощник
Вопрос:
Так что я не очень хорошо знаком с помощниками html или синтаксисом Razor. Я уверен, что есть способ сделать то, что я пытаюсь сделать с этими двумя, но я не совсем уверен. Было бы проще сделать это с помощью контроллера, но я хотел попробовать это в представлении. Вот некоторый код:
<img src="@Url.Content(Model.Photo)" alt="@Model.AlternateText" />
Таким образом, это отображает мои изображения идеально так, как я бы хотел, чтобы они отображались. Теперь я хотел добавить флажок, который пользователь мог бы установить или снять, что в основном делало бы изображение видимым или нет. Есть ли способ каким-то образом интегрировать html checkbox helper в мой img? Я полагаю, что-то в этом роде…
@Html.CheckBox("Photos", "Show Image")
<img src="@Url.Content(Model.Photo)" alt="@Model.AlternateText" />
Спасибо!
Комментарии:
1. Планируете ли вы сделать это с помощью jQuery или путем обратной публикации и фильтрации изображений? Если последнее, то как выглядит ваша модель (т.Е. Как вы сопоставляете флажки с изображениями)? Если первое, то вам, возможно, лучше просто использовать обычный HTML. Помощники, как правило, полезны только в том случае, если вы пытаетесь сгенерировать поля формы, которые будут привязаны к классу модели.
Ответ №1:
То, что у вас есть, будет работать, насколько позволяет HTML-часть уравнения, хотя ваш синтаксис для Html.CheckBox отключен. Второй параметр является логическим значением, указывающим, следует ли его проверять изначально или нет. Если вы хотите, чтобы рядом с ним появилось «Показать изображение», вам нужно просто поместить текст в представление и, желательно, обернуть все содержимое ярлыком:
<label>@Html.CheckBox("Photos", false) Show Image</label>
Теперь, что касается отображения и скрытия изображения, вам нужно будет использовать JavaScript для этого. Я дал вам версию jQuery, поскольку она проще и по умолчанию поставляется с MVC:
<script>
$(document).ready(function () {
$('#Photos').on('click', function () {
if ($(this).is(':checked')) {
$('#Image').show();
} else {
$('#Image').hide();
}
});
});
</script>
Примечание: на основе передачи первого параметра «Photos» в Html.CheckBox , результирующий ввод будет иметь атрибуты name и id «Photos», позволяющие выбирать его по этому идентификатору. Если вы измените это значение, вам нужно будет соответствующим образом обновить JS. Кроме того, этот код предполагает добавление идентификатора «Image» к вашему тегу img. Вы можете использовать все, что хотите, но, опять же, соответствующим образом обновите JS.
Комментарии:
1. Сработало отлично! Спасибо!!
Ответ №2:
Я предполагаю, что есть два способа, которыми вы могли бы это сделать (я предполагаю, что вы хотите иметь возможность многократно использовать эту функцию, отсюда и вопрос, чтобы избежать большого количества копирования / вставки кода) :
1) Создайте частичное представление, в котором вы передаете данные, необходимые для этого представления.
2) Создайте Html-помощник, который создает HTML-код для вас. Либо расширяя существующий вспомогательный флажок, либо создавая свой собственный.
Теперь все зависит от того, с каким из них вы больше всего знакомы.
Частичное представление может быть самым простым для начала, а затем вы можете создать html helper впоследствии, если захотите.
Для переключения, я думаю, вам понадобится какой-нибудь простой javascript, чтобы показать скрытие, что можно было бы сделать довольно просто, используя существующую среду, такую как bootstrap, или какой-нибудь простой jquery. все, что вам нужно сделать, это привязать тег изображения к флажку, чтобы он знал, что когда он установленчто изображение должно изменить состояние.
если вам нужен какой-нибудь пример кода, чтобы дать вам лучшее представление о том, что я пытаюсь сказать, тогда дайте мне знать, и я посмотрю, что я приведу в качестве примера.