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

问题描述

精简版

---

你知道的任何方式来获得输入按钮（提交）和一个锚标记呈现相同的视觉使用CSS和没有使用Javascript？

长的版本

---

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

为了得到表单提交在没有的Javascript工作，我想我必须使用提交按钮。我覆盖，使用CSS，按钮的视觉样式呈现很像在SO页面顶部的按钮 - 平，纯色与纯文本。我想生成GET请求与锚标记处理的行动，但我不得不让这些标签和样式按钮来呈现相同的问题。似乎有与对齐和字体大小的问题。我能够让他们接近，但并不完全相同。

修改：使用按钮和锚包括不能够得到的字体相对于边框内的基准相同的位置在渲染和得到边界框本身造型的差异呈现相对于容器相同的尺寸和对准在。事情只有几个像素关闭的一种方式或其他无论我扭动。如果你已经能够得到它的工作，请让我知道。知道它可能会更容易继续尝试的事情，直到我能得到它的工作。的

有一件事情我想是围绕一个按钮，一开始动作，风格等形式的按钮。这在Firefox工作很大，但不是在IE7。点击在IE7这种按钮也不会传播点击回到主播。我想出来的，现在是创造一种新形式的获取，使用方法=GET，与所需的行动有关。我包裹，大约一个提交按钮，有一个onclick处理，设置 location.href 来所需操作的URL。这使得在视觉上相同，并且似乎工作，即使形式嵌套在另一种形式。 A小调挑剔的是，如果JavaScript被禁用，那么我的GET网址中包含？结尾，而不是作为干净的URL，你会渴望。

我想知道的是其他人是否已经以不同的方式，将更好地工作（也许需要更少的HTML）解决了这个？你有任何其他想法，我能试试吗？有办法解决的？上时，当JavaScript被关闭的请求提交作为后的GET网址是什么？

样code下面从细节来看。我知道我可以（按理说应该）通过JavaScript添加的onclick处理为好，但code实际工作中读取更好，当我做内联。我使用的HtmlHelper扩展到下面生成所有的印记了。我已经重新格式化它以提高可读性。

 ＆LT;形式的行动=../编辑/ 2级=直列形式的方法=获取＆GT;
        ＆LT;输入类=按钮
               的onclick =location.href ='.. /编辑/ 2';返回false;
               值=编辑
               类型=提交/＆GT;
    ＆LT; /表及GT;
    ＆LT;形式的行动=../删除/ 2级=直列形式的方法=后＆GT;
         ＆LT;输入类=按钮
                值=删除
                类型=提交/＆GT;
    ＆LT; /表及GT;
    ＆LT;形式的行动=../列表级=直列形式的方法=获取＆GT;
        ＆LT;输入类=按钮
               的onclick =location.href ='.. /列表;返回false;
               值=捐赠者名单
               类型=提交/＆GT;
    ＆LT; /表及GT;
 

解决方案

您应该检查出本文有关样式按钮标签。它包括CSS为渲染都和标签类似，并有使图标按钮以及副作用。

Short Version:

---

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?

Long Version:

---

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.

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.

EDIT: Styling differences using buttons and anchors included not being able to get the fonts to render in the same position relative to the baseline within the bounding box and getting the bounding box itself to render at the same size and alignment relative to the container. Things were just a few pixels off one way or the other regardless of my tweaks. If you've been able to get it to work, please let me know. Knowing that it's possible would make it easier to keep trying things until I could get it to work.

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.

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?

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>

解决方案

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屋！