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

短版


你知道任何方式来获得一个输入按钮(提交)和一个锚标记,使用CSS呈现相同的视觉效果,并没有Javascript?

长版本


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

为了让表单提交在没有Javascript的情况下工作,我想我必须使用提交按钮。 我用CSS重写了按钮的视觉样式,使其非常像SO页面顶部的“按钮” - 平坦,纯色和纯文本。 我希望生成GET请求的动作可以通过锚标签来处理,但是我在获取这些标签和样式化按钮时出现问题的问题相同。 似乎有对齐和字体大小的问题。 我能够让他们接近但不完全相同。

编辑 :使用按钮和锚点的样式差异包括无法获取字体在相对于边界框内的基线相同的位置呈现,并获得边界框本身呈现在相对于容器相同的大小和对齐。 不管我做了些什么调整,事情只有一个或几个像素。 如果你已经能够实现它,请让我知道。 知道这是可能的,会让我们更容易继续尝试,直到我能够实现它为止。

我试过的一件事就是围绕一个按钮来包装GET操作,就像表单按钮一样。 这在Firefox中运行良好,但在IE7中不起作用。 点击IE7中的这样一个按钮并不会将点击传回锚点。 我现在想到的是为GET创建一个新的表单,使用方法=“GET”,与所需的操作相关联。 我围绕一个提交按钮,它具有一个将location.href设置为所需操作的URL的onclick处理程序。 即使窗体以另一种形式嵌套,这在视觉上也会呈现相同的效果,并且似乎可行。 一个小问题是如果Javascript被禁用,那么我的GET url包含一个? 在最后,而不是你想要的漂亮干净的网址。

我想知道的是,是否有其他人以不同的方式解决了这个问题,并且效果更好(可能需要更少的HTML)? 你有什么其他想法可以尝试吗? 任何方式来解决? 在JavaScript被关闭时,当请求被提交为一个帖子时,在GET网址上?

来自详情视图的以下示例代码。 我意识到我可以(也可以说)应该通过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,用于渲染两者和标签类似,并具有允许按钮中的图标的副作用。

链接地址: http://www.djcxy.com/p/36505.html

上一篇: ASP.NET MVC Navigation and User Interface design

下一篇: Reloading embed PDF in a DIV (empty Accrobat Reader error popup)