ASP.NET MVC навигации и пользовательский интерфейс дизайн

Question

Короткая версия:

---

Вы знаете какой-либо способ получить кнопку ввода (подать) и якорь тег оказывать такое же визуально с помощью CSS и нет Javascript?

Long Version:

---

Я занимаюсь разработкой приложений ASP.NET MVC. Сайт содержит страницы для просмотра деталей или для создания или обновления моих моделей. Действия страниц содержатся в нижней части формы и, как правило, включают в себя Update и Отменить или Редактировать, Удалить и Список (если на детали просмотра страницы). Update, Edit и Удалить действия отправки данных из формы на сервер, в то время как Отменить и Список действия/могут быть обработаны с помощью соответствующих запросов GET. Важно отметить, что одна из моих целей проекта - сделать работу сайта максимально точной, если Javascript отключен так, как он делает, когда включен Javascript. Я также хочу, чтобы элементы пользовательского интерфейса отображали одинаково визуально, вызывает ли элемент обратный вызов или срабатывает запрос GET.

Для того чтобы получить представление формы для работы в отсутствие Javascript, я думаю, что я должен использовать кнопки отправки. Я переопределяю CSS с визуальным стилем кнопок, которые очень напоминают «кнопки» на верхней части страницы SO - плоские, сплошные цвета с простым текстом. Мне бы хотелось, чтобы действия, которые генерировали запросы GET, обрабатывались с помощью якорных тегов, но у меня были проблемы с получением этих тегов и стилизованных кнопок для точного отображения. Кажется, что есть проблемы с выравниванием и размером шрифта. Мне удалось закрыть их, но не идентично.

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

Одна вещь, которую я пробовал, заключалась в том, чтобы обернуть GET-действия вокруг кнопки, стилизованные как кнопки формы. Это отлично работает в Firefox, но не в IE7. Нажатие на такую ​​кнопку в IE7 не проталкивало клик на якорь. Теперь я создал новую форму для GET, используя метод = «GET», связанный с требуемым действием. Я обернул это вокруг кнопки отправки, которая имеет обработчик onclick, который устанавливает location.href в URL-адрес желаемого действия. Это визуально выглядит одинаково и, похоже, работает, даже если форма вложена в другую форму. Небольшое недоразумение заключается в том, что если Javascript отключен, то мой GET-url содержит ? в конце, а не как чистый чистый URL-адрес, который вы хотите.

Что бы я хотел знать, может ли кто-либо другой решить это по-другому, что будет работать лучше (и, возможно, требует меньше HTML)? У вас есть другие идеи, которые я мог бы попробовать?Любой способ исправить ? на URL-адресе GET, когда запрос отправляется в виде сообщения при отключении Javascript?

Образец кода ниже из описания деталей. Я понимаю, что я мог (и, возможно, должен) добавлять обработчики onclick через javascript, но код actall лучше читает, когда я делаю это inline. Я использую расширения 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> 

Answer 1

Вы должны проверить this article о стилизации кнопки тег. Он включает CSS для рендеринга обоих и тегов, похожих на них, и имеет побочный эффект, позволяющий значкам в кнопке.