ASP.NET MVC 导航和用户界面设计 [英] ASP.NET MVC Navigation and User Interface design

问题描述

短版:

您知道任何方法来获取输入按钮(提交)和锚标记以使用 CSS 而无需 Javascript 在视觉上呈现相同的内容吗?

Do you know of any way to get an input button (submit) and an anchor tag to render the same visually using CSS and no Javascript?

加长版:

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

I'm developing an ASP.NET MVC application. The site contains pages to view the details of or to create or update my models. The page actions are contained at the bottom of the form and typically include Update and Cancel or Edit, Delete and List (if on a details view page). The Update, Edit, and Delete actions post data from a form to the server, while the Cancel and List actions are/can be handled by appropriate GET requests. It's important to note that one of my design goals is to make the site work as identically as possible if Javascript is disabled to the way it does when Javascript is enabled. I also want the UI elements to render the same visually whether the element causes a postback or fires off a GET request.

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

In order to get the form submissions to work in the absence of Javascript, I think I must use submit buttons. I'm overriding, with CSS, the visually styling of the buttons to render much like the "buttons" on the top of the SO page -- flat, solid-color with plain text. I'd like the actions that generate GET requests to be handled with anchor tags, but I had problems getting these tags and the styled buttons to render identically. There seem to be issues with alignment and font-sizing. I was able to get them close but not identical.

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

我尝试过的一件事是将 GET 操作包裹在按钮周围，其样式类似于表单按钮.这在 Firefox 中效果很好，但在 IE7 中却不行.在 IE7 中单击此类按钮不会将单击传播回锚点.我现在想出的是为 GET 创建一个新表单，使用 method="GET"，与所需的操作相关联.我将它包裹在一个提交按钮周围，该按钮具有一个 onclick 处理程序，该处理程序将 location.href 设置为所需操作的 URL.即使表单嵌套在另一个表单中，这在视觉上呈现相同并且似乎可以工作.一个小问题是，如果禁用了 Javascript，那么我的 GET url 在末尾包含一个 ? 而不是你想要的干净的 url.

One thing I tried was wrapping the GET-actions around a button, styled like the form buttons. This worked great in Firefox, but not in IE7. Clicking on such a button in IE7 didn't propogate the click back to the anchor. What I've come up with now is to create a new form for the GET, using method="GET", associated with the required action. I wrap that around a submit button that has an onclick handler that sets location.href to the URL of the desired action. This renders visually the same and seems to work, even if the form is nested in another form. A minor niggle is that if Javascript is disabled, then my GET url contains a ? at the end instead of being the nice clean url that you would desire.

我想知道的是，是否有其他人以不同的方式解决了这个问题，效果更好(并且可能需要更少的 HTML)?你有什么我可以尝试的其他想法吗?关闭 Javascript 后，当请求作为帖子提交时，有什么方法可以修复 GET url 上的 ??

What I'd like to know is whether anyone else has solved this in a different way that would work better (and maybe require less HTML)? Do you have any other ideas that I could try? Any way to fix the ? on the GET url when the request is submitted as a post when Javascript is turned off?

下面的示例代码来自详细信息视图.我意识到我也可以(并且可以说应该)通过 javascript 添加 onclick 处理程序，但是当我内联执行时，代码实际上读起来更好.我正在使用 HtmlHelper 扩展来生成下面的所有标记.我已对其进行了重新格式化以提高可读性.

Sample code below from a details view. I realize that I could (and arguably should) add the onclick handlers via javascript as well, but the code actuall reads better when I do it inline. I'm using HtmlHelper extensions to generate all of the mark up below. I have reformatted it to improve readability.

    <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 和相似的标签，并且还具有允许按钮中的图标的副作用.

You should check out this article about styling the button tag. It includes CSS for both rendering both and tags similar and have the side effect of allowing icons in the button as well.

这篇关于ASP.NET MVC 导航和用户界面设计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！