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

你知道有什么方法可以得到一个输入按钮（提交）和一个锚标记呈现视觉使用CSS相同，没有Javascript？

长的版本：

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

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

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

我试过的一件事就是围绕一个按钮封装GET操作，就像窗体按钮一样。这在Firefox中运行良好，但在IE7中不起作用。点击IE7中的这样一个按钮并不会将点击传回锚点。我现在想到的是为GET创建一个新的表单，使用方法=“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>

来源

2009-02-13 tvanfosson

我认为你应该提供一些关于你的CSS样式问题的细节（你看到了对齐和字体大小的确切区别）。 – 2009-02-13 19:26:11

我编辑添加更多的细节。 – tvanfosson 2009-02-13 19:36:52

你应该检查出this article关于按钮标记的样式。它包含CSS，用于渲染两者和标签类似，并具有允许按钮中的图标的副作用。

来源

2009-02-13 21:17:21 veggerby

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

回答

相关问题