問題描述

短版:

您知道任何方法來獲取輸入按鈕(提交)和錨標記以使用 CSS 而無需 Javascript 在視覺上呈現相同的內容嗎?

Do you know of any way to get an input button (submit) and an anchor tag to render the same visually using CSS and no Javascript?

加長版:

我正在開發一個 ASP.NET MVC 應用程序.該站點包含查看詳細信息或創建或更新我的模型的頁面.頁面操作包含在表單的底部，通常包括 Update 和 Cancel 或 Edit、Delete 和列表(如果在詳細信息視圖頁面上).Update、Edit 和 Delete 操作將數據從表單發布到服務器，而 Cancel 和 List 動作是/可以由適當的 GET 請求處理.重要的是要注意，我的設計目標之一是在禁用 Javascript 時使站點盡可能地工作，就像啟用 Javascript 時那樣.我還希望 UI 元素在視覺上呈現相同的元素，無論該元素是導致回發還是觸發 GET 請求.

I'm developing an ASP.NET MVC application. The site contains pages to view the details of or to create or update my models. The page actions are contained at the bottom of the form and typically include Update and Cancel or Edit, Delete and List (if on a details view page). The Update, Edit, and Delete actions post data from a form to the server, while the Cancel and List actions are/can be handled by appropriate GET requests. It's important to note that one of my design goals is to make the site work as identically as possible if Javascript is disabled to the way it does when Javascript is enabled. I also want the UI elements to render the same visually whether the element causes a postback or fires off a GET request.

為了讓表單提交在沒有 Javascript 的情況下工作，我認為我必須使用提交按鈕.我用 CSS 覆蓋了按鈕的視覺樣式，以呈現很像 SO 頁面頂部的按鈕"——平面、純色和純文本.我希望使用錨標記處理生成 GET 請求的操作，但是我無法讓這些標記和樣式按鈕以相同的方式呈現.對齊和字體大小似乎存在問題.我能夠讓它們接近但不完全相同.

In order to get the form submissions to work in the absence of Javascript, I think I must use submit buttons. I'm overriding, with CSS, the visually styling of the buttons to render much like the "buttons" on the top of the SO page -- flat, solid-color with plain text. I'd like the actions that generate GET requests to be handled with anchor tags, but I had problems getting these tags and the styled buttons to render identically. There seem to be issues with alignment and font-sizing. I was able to get them close but not identical.

編輯:使用按鈕和錨點的樣式差異包括無法讓字體在邊界框內相對于基線的相同位置呈現，并且無法讓邊界框本身相對于容器以相同的大小和對齊方式渲染.無論我如何調整，事情都只是以一種或另一種方式偏離了幾個像素.如果你能夠讓它工作，請告訴我.知道這是可能的，這會讓我更容易繼續嘗試，直到我讓它發揮作用.

我嘗試過的一件事是將 GET 操作包裹在按鈕周圍，其樣式類似于表單按鈕.這在 Firefox 中效果很好，但在 IE7 中卻不行.在 IE7 中單擊此類按鈕不會將單擊傳播回錨點.我現在想出的是為 GET 創建一個新表單，使用 method="GET"，與所需的操作相關聯.我將它包裹在一個提交按鈕周圍，該按鈕具有一個 onclick 處理程序，該處理程序將 location.href 設置為所需操作的 URL.即使表單嵌套在另一個表單中，這在視覺上呈現相同并且似乎可以工作.一個小問題是，如果禁用了 Javascript，那么我的 GET url 在末尾包含一個 ? 而不是你想要的干凈的 url.

One thing I tried was wrapping the GET-actions around a button, styled like the form buttons. This worked great in Firefox, but not in IE7. Clicking on such a button in IE7 didn't propogate the click back to the anchor. What I've come up with now is to create a new form for the GET, using method="GET", associated with the required action. I wrap that around a submit button that has an onclick handler that sets location.href to the URL of the desired action. This renders visually the same and seems to work, even if the form is nested in another form. A minor niggle is that if Javascript is disabled, then my GET url contains a ? at the end instead of being the nice clean url that you would desire.

我想知道的是，是否有其他人以不同的方式解決了這個問題，效果更好(并且可能需要更少的 HTML)?你有什么我可以嘗試的其他想法嗎?關閉 Javascript 后，當請求作為帖子提交時，有什么方法可以修復 GET url 上的 ??

What I'd like to know is whether anyone else has solved this in a different way that would work better (and maybe require less HTML)? Do you have any other ideas that I could try? Any way to fix the ? on the GET url when the request is submitted as a post when Javascript is turned off?

下面的示例代碼來自詳細信息視圖.我意識到我也可以(并且可以說應該)通過 javascript 添加 onclick 處理程序，但是當我內聯執行時，代碼實際上讀起來更好.我正在使用 HtmlHelper 擴展來生成下面的所有標記.我已對其進行了重新格式化以提高可讀性.

Sample code below from a details view. I realize that I could (and arguably should) add the onclick handlers via javascript as well, but the code actuall reads better when I do it inline. I'm using HtmlHelper extensions to generate all of the mark up below. I have reformatted it to improve readability.

    <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>

推薦答案

你應該看看 這篇文章關于按鈕標簽的樣式.它包括用于呈現兩者的 CSS 和相似的標簽，并且還具有允許按鈕中的圖標的副作用.

You should check out this article about styling the button tag. It includes CSS for both rendering both and tags similar and have the side effect of allowing icons in the button as well.

這篇關于ASP.NET MVC 導航和用戶界面設計的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！