html - ASP.NET MVC 导航和用户界面设计

Question

短版:

---

您知道任何方法来获取输入按钮(提交)和 anchor 标记以使用 CSS 而无需 Javascript 在视觉上呈现相同的内容吗？

加长版:

---

我正在开发一个 ASP.NET MVC 应用程序。该站点包含查看详细信息或创建或更新我的模型的页面。页面操作包含在表单的底部，通常包括 Update 和 Cancel 或 Edit、Delete 和列表(如果在详细信息 View 页面上)。 Update、Edit 和 Delete 操作将数据从表单发布到服务器，而 Cancel 和 < strong>List Action 是/可以由适当的 GET 请求处理。重要的是要注意，我的设计目标之一是在禁用 Javascript 时使站点尽可能地工作，就像启用 Javascript 时那样。我还希望 UI 元素在视觉上呈现相同的元素，无论该元素是导致回发还是触发 GET 请求。

为了让表单提交在没有 Javascript 的情况下工作，我认为我必须使用提交按钮。我用 CSS 覆盖了按钮的视觉样式，以呈现很像 SO 页面顶部的“按钮”——平面、纯色和纯文本。我希望使用 anchor 标记处理生成 GET 请求的操作，但是我无法让这些标记和样式按钮以相同的方式呈现。对齐和字体大小似乎存在问题。我能够让它们接近但不完全相同。

编辑:使用按钮和 anchor 的样式差异包括无法让字体在边界框内相对于基线的相同位置呈现，并且无法让边界框本身相对于容器以相同的大小和对齐方式渲染。无论我如何调整，事情都只是以一种或另一种方式偏离了几个像素。如果你能够让它工作，请告诉我。知道这是可能的，这会让我更容易继续尝试，直到我让它发挥作用。

我尝试过的一件事是将 GET 操作包裹在按钮周围，其样式类似于表单按钮。这在 Firefox 中效果很好，但在 IE7 中却不行。在 IE7 中单击此类按钮不会将单击传播回 anchor 。我现在想出的是为 GET 创建一个新表单，使用 method="GET"，与所需的操作相关联。我将它包裹在一个提交按钮周围，该按钮具有一个 onclick 处理程序，该处理程序将 location.href 设置为所需操作的 URL。即使表单嵌套在另一个表单中，这在视觉上呈现相同并且似乎可以工作。一个小问题是，如果禁用了 Javascript，那么我的 GET url 在末尾包含一个 ? 而不是你想要的干净的 url。

我想知道的是，是否有其他人以不同的方式解决了这个问题，效果更好(并且可能需要更少的 HTML)？你有什么我可以尝试的其他想法吗？关闭 Javascript 后，当请求作为帖子提交时，有什么方法可以修复 GET url 上的 ?？

下面的示例代码来自详细信息 View 。我意识到我也可以(并且可以说应该)通过 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>

Answer 1

您应该查看 this article关于样式按钮标签。它包括用于呈现两者的 CSS 和相似的标签，并且还具有允许按钮中的图标的副作用。