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

2024-01-30

简洁版本:


您是否知道有什么方法可以使用 CSS 而无需使用 Javascript 来获取输入按钮(提交)和锚标记来以视觉方式呈现相同的内容?

长版:


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

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

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

我尝试过的一件事是将 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>

None

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ASP.NET MVC 导航和用户界面设计 的相关文章

  • 最大宽度不适用于弹性项目

    我有一列中有一个弹性容器和两个弹性子容器 顶部 div 应填充所有剩余空间 底部 div 的高度应由内容和max width 但底部 div 的宽度正在缩小到其内容的宽度 这max width正在被忽视 hero image min hei
  • 调用函数值[重复]

    这个问题在这里已经有答案了 可能的重复 函数提前触发 https stackoverflow com questions 12201816 function triggering early 我已经编写了这段代码 但是当我调用函数 test
  • 从标签中提取 HTML5 数据属性

    我想从标签中提取所有 HTML5 数据属性 就像这个 jQuery 插件 http www orangesoda net jquery dataset html 例如 给定 span class highlight Joe Bloggs s
  • 如何添加从 Outlook 到 Web 表单的拖放上传功能?

    我正在寻找一种方法 允许用户以简单的方式将 Outlook 电子邮件上传到基于 Web 的系统 我可以让它以手动方式为用户工作 他们可以将电子邮件从 Outlook 拖放到桌面上 这会创建一个 msg 文件 这非常有效 尤其是 电子邮件中是
  • Polygonal Divs——让内容以特定形状溢出?

    这是我目前正在开发的网站 http willcrichton net http willcrichton net 如果单击中间六边形每一侧的箭头 您可以看到它使用 jQuery jQuery Cycle jQuery Easing 左右过渡
  • MVC - 没有具有“IEnumerable”类型键的 Viewdata 项目

    我是 MVC 和 ASP NET 的新手 希望学习一些知识 因此我尝试制作一些简单的应用程序来了解细节 好吧 我正在尝试制作一个下拉框显示书籍列表 其中显示书名但发布 book id 主键 我得到的错误是 不存在键为 IEnumerable
  • 使用asp.net mvc计算相对日期

    在 C 中使用 ASP NET MVC 显示相对日期 例如 20 分钟前 的最佳库是什么 当简单的扩展方法可以做到这一点时 您就不需要库了 这是我使用过的扩展方法 public static string TimeAgo this Date
  • 使用百分比宽度进行布局时如何修复 Internet Explorer 7 错误?

    请帮助我 我需要使用百分比宽度创建布局 我有一个 100 宽度的包装纸 现在我有一个 DIV 主要包装器 我想将其保持在 94 宽度百分比 100 主体的 94 好吧 所以为了让这个简单 gt BODY 100 宽度设置 gt 容器 94
  • 检测计算机是否可以正确支持 3D 变换

    当我检测到 webkit 时 我使用 3D Transforms 属性添加额外的样式表 尽管它在许多不同的计算机上运行良好 全部使用相同的 chrome 版本 有些无法正确渲染动画 这些是较旧的计算机 具有更便宜的显卡 我猜这就是导致问题的
  • ASP.NET MVC 4 Web Api 和 REST 经典服务之间的区别

    我看到了ASP Net MVC4 WebApi将服务公开为 Rest 服务 但实际上和正常有什么区别Rest and ASP Net MVC4 WebApi 我不确定你的意思normal Rest REST http en wikipedi
  • 如何使用 JS/Puppeteer 上传文件

    我试图弄清楚如何将图片文件上传到输入对话框中 不可能只输入名称并按 Enter 键 因为我没有找到使用 Puppeteer 实现自动化的方法 我想我必须设置一些值作为图片 但我不知道该怎么做 有任何想法吗 您使用上传文件elementHan
  • 对于 SEO 而言,.html 扩展名是否比 .php 和 .aspx 更好?

    对于 SEO 而言 html 扩展名是否比 php 和 aspx 更好 或者少扩展名的 url 比全部更好 该扩展对排名和所有 SEO 影响不大 您页面的扩展名可能不一定表明内容是如何生成的 PHP 或 ASPX 虽然通常具有动态内容 但始
  • 验证动态添加的输入字段

    我用过this http docs jquery com Plugins Validation以下表单的 jquery 验证插件
  • 当用户输入/删除时,使文本字段中的提示消失/重新出现[关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 有谁知道我怎样才能在我的搜索栏中做出
  • PHP:如何使用 nl2br() 和 HTML Purifier 保持换行?

    Issue 使用时HTML 净化器 http htmlpurifier org 为了处理用户输入的内容 换行符不会被转换为 br tags 考虑以下用户输入的内容 Lorem ipsum dolor sit amet This is ano
  • 在 Android 中使用 Fragment 时处理后按

    我在应用程序中使用 Android 滑动菜单和导航抽屉 并且在应用程序中使用片段而不是活动 当我打开抽屉时 单击一个项目会出现一个片段 我使用以下代码从一个片段移动到另一个片段 Fragment fragment null fragment
  • 如何使用 jQuery 检测浏览器是否关闭

    我需要使用 jQuery 检测浏览器是否被关闭 如果是这样 则执行一个事件 我的网站上有一个聊天功能 很像 Facebook 可以让用户在导航到网站结构中的其他页面时保持登录状态 但如果他们单击 则需要将他们从聊天中注销 这样他们就不会在线
  • 父级 div 未扩展到子级的高度

    正如你将看到的 我有一个div innerPageWrapper 包围包含内容的 div innerPageWrapper在视觉上也确实充当布局中的半透明边框 我的问题是 innerPageWrapper不会扩展以容纳内部的子元素 更不用说
  • 编辑时可以在文本框控件内使用 Angular 的管道格式化程序吗?

    我已经声明了一种将大数字分成三位数组的格式 并像这样经常使用它 div Huge number i am huge make threesome div 现在 有一个对相应功能的请求 但在像这样的输入控件中实现
  • 表单帖子上的 asp.net mvc 编码

    我在我的 asp net mvc 表单 带有文本区域的 nicedit 中使用富文本编辑器 当我在帖子上提交表单时 因为它不是 html 编码的 我收到以下消息 从客户端检测到潜在危险的 Request Form 值 如何对 post 上的

随机推荐