Короткая версия :
Знаете ли вы какой-нибудь способ получить кнопку ввода (отправить) и тег привязки для визуализации того же визуального кода с использованием CSS и без Javascript?
Длинная версия :
Я занимаюсь разработкой приложения ASP.NET MVC. Сайт содержит страницы для просмотра деталей или для создания или обновления моих моделей. Действия страницы содержатся в нижней части формы и обычно включают Обновление и Отмена или Редактирование , Удаление и Список (если на странице просмотра подробностей). Действия Update , Edit и Delete отправляют данные из формы на сервер, в то время как Cancel и List действия выполняются / могут быть обработаны соответствующими запросами GET. Важно отметить, что одна из моих целей дизайна - сделать сайт максимально идентичным, если Javascript отключен, так же, как и при включенном Javascript. Я также хочу, чтобы элементы пользовательского интерфейса визуализировали одинаково, независимо от того, вызывает ли элемент обратную передачу или запускает запрос GET.
Чтобы заставить отправку формы работать в отсутствие Javascript, я думаю, что я должен использовать кнопки отправки. Я переопределяю с помощью CSS визуальное оформление кнопок для рендеринга, очень похожих на «кнопки» в верхней части страницы SO - плоские, сплошные цвета с простым текстом. Мне бы хотелось, чтобы действия, генерирующие запросы GET, обрабатывались с помощью тегов привязки, но у меня были проблемы с отображением этих тегов и стилевых кнопок одинаковым образом. Кажется, есть проблемы с выравниванием и размером шрифта. Я смог подобрать их близко, но не идентично.
РЕДАКТИРОВАТЬ : Стилизация различий с использованием кнопок и якорей включала в себя невозможность отрисовки шрифтов в одной и той же позиции относительно базовой линии внутри ограничительной рамки и получение самой ограничительной рамки для визуализации в том же размере и выравнивании относительно контейнера. Вещи были всего в нескольких пикселях, так или иначе, независимо от моих настроек. Если вам удалось заставить его работать, пожалуйста, дайте мне знать. Знание того, что это возможно, облегчит пробовать вещи, пока я не смогу заставить их работать.
Я попробовал обернуть GET-действия вокруг кнопки, стилизованной под кнопки формы. Это прекрасно работало в Firefox, но не в IE7. Нажатие на такую кнопку в IE7 не способствовало распространению клика обратно на якорь. Сейчас я создал новую форму для GET, используя method = "GET", связанный с требуемым действием. Я оборачиваю это вокруг кнопки отправки, которая имеет обработчик onclick, который устанавливает location.href на URL желаемого действия. Это визуально делает то же самое и, кажется, работает, даже если форма вложена в другую форму. Небольшое затруднение заключается в том, что если Javascript отключен, то мой URL-адрес GET содержит ? в конце, вместо того, чтобы быть хорошим чистым URL-адресом, который вы хотели бы.
Что я хотел бы знать, так это то, что кто-то еще решил это другим способом, который будет работать лучше (и, возможно, потребует меньше HTML)? У вас есть другие идеи, которые я мог бы попробовать? Есть ли способ исправить ? в URL-адресе GET, когда запрос отправляется как сообщение, когда Javascript выключен?
Пример кода ниже из подробного представления. Я понимаю, что мог бы (и, возможно, должен) добавить обработчики onclick через javascript, но код на самом деле читается лучше, когда я делаю это в строке. Я использую расширения HtmlHelper, чтобы создать все пометки ниже. Я переформатировал его, чтобы улучшить читаемость.
<form action="../Edit/2" class="inline-form" method="get">
<input class="button"
onclick="location.href='../Edit/2';return false;"
value="Edit"
type="submit" />
</form>
<form action="../Delete/2" class="inline-form" method="post">
<input class="button"
value="Delete"
type="submit" />
</form>
<form action="../List" class="inline-form" method="get">
<input class="button"
onclick="location.href='../List';return false;"
value="List Donors"
type="submit" />
</form>