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

Posted 2023-04-13

【中文标题】ASP.NET MVC 导航和用户界面设计

【英文标题】：ASP.NET MVC Navigation and User Interface design

【发布时间】：2010-10-07 12:40:40

【问题描述】：

短版：

---

您知道任何方法来获取输入按钮（提交）和锚标记以使用 CSS 而无需 javascript 以视觉方式呈现相同的内容吗？

加长版：

---

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

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

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

我尝试过的一件事是将 GET 操作包裹在一个按钮周围，其样式类似于表单按钮。这在 Firefox 中效果很好，但在 IE7 中却不行。在 IE7 中单击此类按钮不会将单击传播回锚点。我现在想出的是为 GET 创建一个新表单，使用 method="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>

【问题讨论】：

我认为您应该提供更多关于 CSS 样式问题的详细信息（您看到对齐和字体大小的确切差异）。

我进行了编辑以添加更多细节。

这不是“像按钮一样设计链接”，而是用按钮替换链接。样式会涉及为 a 元素添加边框和不同的光标，因此它看起来就像一个按钮。

【参考方案1】：

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

【讨论】：

链接页面现在是 404。

不，链接页面又回来了。