简洁版本:
您是否知道有什么方法可以使用 CSS 而无需使用 Javascript 来获取输入按钮(提交)和锚标记来以视觉方式呈现相同的内容?
长版:
我正在开发一个 ASP.NET MVC 应用程序。该站点包含用于查看详细信息或创建或更新我的模型的页面。页面操作包含在表单底部,通常包括Update and Cancel or Edit, Delete and List(如果在详细信息视图页面上)。这Update, Edit, and Delete操作将数据从表单发送到服务器,而Cancel and List操作可以通过适当的 GET 请求来处理。需要注意的是,我的设计目标之一是使网站在禁用 Javascript 时尽可能与启用 Javascript 时一样工作。我还希望 UI 元素在视觉上呈现相同的效果,无论该元素导致回发还是触发 GET 请求。
为了让表单提交在没有 JavaScript 的情况下工作,我想我必须使用提交按钮。我使用 CSS 覆盖了按钮的视觉样式,使其与 SO 页面顶部的“按钮”非常相似——平面、纯色和纯文本。我希望使用锚标记来处理生成 GET 请求的操作,但我在使这些标记和样式按钮呈现相同时遇到问题。对齐和字体大小似乎存在问题。我能够让它们接近但不完全相同。
EDIT: 使用按钮和锚点的样式差异包括无法使字体在相对于边界框内的基线的相同位置渲染,以及使边界框本身以相对于容器的相同大小和对齐方式渲染。无论我如何调整,事情都只是以某种方式偏离了几个像素。如果您能够使其正常工作,请告诉我。知道这是可能的会让我更容易继续尝试,直到我能够让它发挥作用。
我尝试过的一件事是将 GET 操作包装在按钮周围,其样式类似于表单按钮。这在 Firefox 中效果很好,但在 IE7 中则不然。在 IE7 中单击此类按钮不会将单击传播回锚点。我现在想到的是使用 method="GET" 为 GET 创建一个新表单,并与所需的操作关联。我将其包装在一个提交按钮周围,该按钮有一个 onclick 处理程序,该处理程序设置location.href
到所需操作的 URL。即使表单嵌套在另一个表单中,这在视觉上呈现相同并且似乎有效。一个小问题是,如果禁用 Javascript,那么我的 GET 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>