Html ASP.NET MVC导航与用户界面设计

短版：

---

你知道有什么方法可以获得一个输入按钮（submit）和一个锚定标记来使用CSS而不是Javascript可视化地呈现相同的内容吗

长版本：

---

我正在开发一个ASP.NETMVC应用程序。该站点包含用于查看详细信息或创建或更新我的模型的页面。页面操作包含在表单底部，通常包括更新和取消或编辑、删除和列表（如果在详细信息视图页面上）。更新、编辑和删除操作将数据从表单发布到服务器，而取消和列表操作可以通过适当的GET请求来处理。需要注意的是，我的设计目标之一是，如果禁用Javascript，使站点尽可能以相同的方式工作，就像启用Javascript时一样。我还希望UI元素在视觉上呈现相同的效果，无论该元素导致回发还是触发GET请求

为了让表单提交在没有Javascript的情况下工作，我想我必须使用提交按钮。我用CSS覆盖了按钮的视觉样式，使其呈现出与SO页面顶部的“按钮”非常相似的效果——平面、纯色和纯文本。我希望生成GET请求的操作可以用锚标记来处理，但是我在让这些标记和样式化按钮以相同的方式呈现时遇到了问题。似乎在对齐和字体大小方面存在问题。我能把它们弄近，但不是一模一样

编辑：使用按钮和锚定设置样式的差异包括无法使字体渲染在与边界框内基线相对的相同位置，以及无法使边界框本身以与容器相对的相同大小和对齐方式渲染。不管我做了什么调整，事情都只差几个像素。如果你能让它工作，请告诉我。知道这是可能的会让我更容易继续尝试，直到我能让它工作

我尝试过的一件事是将GET操作包装在一个按钮上，样式类似于表单按钮。这在Firefox中非常有效，但在IE7中却不行。在IE7中点击这样一个按钮并没有使点击返回到锚。我现在想到的是使用与所需操作关联的method=“GET”为GET创建一个新表单。我将其包装在一个submit按钮上，该按钮有一个onclick处理程序，用于将

location.href

设置为所需操作的URL。即使表单嵌套在另一个表单中，这也会在视觉上呈现相同的效果，并且似乎有效。一个小问题是，如果禁用Javascript，那么我的GET url将在末尾包含一个

？

，而不是您想要的干净的url

我想知道的是，是否有其他人以一种更好的方式解决了这个问题（并且可能需要更少的HTML）？你还有什么其他想法我可以试试吗？当Javascript关闭时，请求作为post提交时，有没有办法修复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>

您应该查看按钮标签的样式设置。它包括CSS，用于呈现相似的内容和标签，并具有允许按钮中包含图标的副作用。

我认为您应该提供更多有关CSS样式问题的详细信息（您看到对齐方式和字体大小的确切差异）。我编辑此内容是为了添加更多详细信息。这不是“像按钮一样设置链接样式”，它正在用按钮取代链接。样式设计需要在a元素中添加边框和不同的光标，所以它看起来就像一个按钮。链接页面现在是404。不，链接页面回来了。