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

短版 :

你知道有什么方法可以得到一个输入按钮(submit)和一个锚标记来用CSS而不是javascript呈现相同的视觉效果吗?

长版 :

我正在开发一个ASP.NET MVC应用程序。该网站包含用于查看我的模型的详细信息或创建或更新我的模型的页面。页面操作包含在表单的底部,通常包括 更新 和 取消 或 编辑 , 删除 和 表 (如果在详细信息视图页上)。这个 更新 , 编辑 和 删除 操作将数据从表单发布到服务器,而 取消 和 表 可以通过适当的GET请求来处理操作。重要的是要注意,我的设计目标之一是,如果禁用javascript,使其与启用javascript时的工作方式相同,则使站点尽可能地工作。我还希望UI元素以可视方式呈现相同的内容,不管该元素是导致回发还是触发GET请求。

为了让表单提交在没有javascript的情况下工作,我想我必须使用提交按钮。我将用CSS覆盖按钮的视觉样式,使其呈现与so页面顶部的“按钮”非常类似——纯文本的纯色平面。我希望生成GET请求的操作可以用定位标记来处理,但是我在让这些标记和样式化按钮呈现相同的效果时遇到了问题。似乎对齐和字体大小有问题。我能让他们接近但不完全相同。

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

我尝试的一件事是围绕一个按钮包装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>