2009-02-13 58 views
7

精簡版ASP.NET MVC導航和用戶界面設計


你知道有什麼方法可以得到一個輸入按鈕(提交)和一個錨標記呈現視覺使用CSS相同,沒有Javascript?

長的版本


我開發一個ASP.NET MVC應用程序。該網站包含頁面來查看詳細信息或創建或更新我的模型。該頁面動作都包含在表單的底部,通常包括更新取消編輯刪除列表(如果在詳細信息視圖頁面)。該更新編輯,並刪除行動從形式到服務器發佈數據,而取消列表動作/可以通過適當的GET請求來處理。重要的是要注意,我的設計目標之一是儘可能使網站的工作儘可能地相同,如果Javascript被禁用到啓用Javascript時的方式。我還希望UI元素可以在視覺上呈現相同的內容,無論該元素是否會導致回發或觸發GET請求。

爲了讓表單提交在沒有Javascript的情況下工作,我想我必須使用提交按鈕。我用CSS重寫了按鈕的視覺樣式,使其非常像SO頁面頂部的「按鈕」 - 平坦,純色和純文本。我希望生成GET請求的動作可以通過錨標籤來處理,但是我在獲取這些標籤和樣式化按鈕時出現問題的問題相同。似乎有對齊和字體大小的問題。我能夠讓他們接近但不完全相同。

編輯:使用按鈕和錨包括不能夠得到的字體相對於邊框內的基準位置相同渲染和獲取邊界框本身在同一尺寸渲染和造型差異相對於容器對齊。不管我做了些什麼調整,事情只有一個或幾個像素。如果你已經能夠實現它,請讓我知道。知道這是可能的,會讓我們更容易繼續嘗試,直到我能夠實現它爲止。

我試過的一件事就是圍繞一個按鈕封裝GET操作,就像窗體按鈕一樣。這在Firefox中運行良好,但在IE7中不起作用。點擊IE7中的這樣一個按鈕並不會將點擊傳回錨點。我現在想到的是爲GET創建一個新的表單,使用方法=「GET」,與所需的操作相關聯。我圍繞一個提交按鈕,它具有一個onclick處理程序,將location.href設置爲所需操作的URL。即使窗體以另一種形式嵌套,這在視覺上也會呈現相同的效果,並且似乎可行。一個小問題是,如果Javascript被禁用,那麼我的GET url在最後包含一個?而不是你想要的漂亮乾淨的url。

我想知道的是,其他人是否以不同的方式解決了這個問題,並且效果更好(可能需要更少的HTML)?你有什麼其他想法可以嘗試嗎?當Javascript被關閉時,將請求提交爲帖子時,有什麼方法可以修復GET URL中的?

下面的示例代碼從詳細視圖。我意識到我可以(也可以說)應該通過javascript添加onclick處理程序,但是當我在內聯中執行代碼時,它的讀取效果會更好。我使用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> 
+0

我認爲你應該提供一些關於你的CSS樣式問題的細節(你看到了對齊和字體大小的確切區別)。 – 2009-02-13 19:26:11

+0

我編輯添加更多的細節。 – tvanfosson 2009-02-13 19:36:52

回答

10

你應該檢查出this article關於按鈕標記的樣式。它包含CSS,用於渲染兩者和標籤類似,並具有允許按鈕中的圖標的副作用。