小编Kri*_*ten的帖子

我希望改进我们的CRUD网络表单,并欣赏任何良好的UI设计的例子.

我们有很多数据库表,用户只需要很少的编辑需求 - 国家代码,税码,产品价格等等 - 这些目前都使用简单的CRUD格式,但它是由开发人员设计的,看起来很平淡,并且很可能具有更好的可用性,当然还有更好的设计.

我们的流程是:

查找屏幕 - 它还有一个ADD NEW按钮.输入与搜索相关的任何参数的值,然后按"查找"按钮.使用EDIT链接匹配网格中显示的记录.相应的编辑表单允许CLONE,DELETE和SAVE.

在适当的情况下,编辑表单可以显示子记录.

对于非常复杂的记录/关系,编辑表单被记录卡取代,记录卡显示包括厨房水槽在内的所有内容!并且适当的记录/子记录具有EDIT链接.

它的功能,但没有吸引力.

在80:20的基础上,代码都是机械生成的,因此为一个新的比喻重新生成代码应该不会太难.

我喜欢Magento电子商务管理页面中的很多用户界面,但我会对你推荐的任何其他例子感兴趣

我刚刚开始关注JQuery.我目前在我的网络应用程序中没有任何AJAX.

我在HTML中的现有JavaScript看起来像:

<form ...>
<p>Find what? <input ...></p>
<div class="ButtonArray">
  <a href="AddRecord.ASP&amp;Action=ADD">ADD</a>
  <a href="#" onClick="return MyFormSubmit();">FIND</a>
</div>
</form>

这将显示[添加]和[查找]的按钮.对于Find,有必要提交表单,我使用MyFormSubmit()验证数据,为页面添加视觉效果,然后POST数据.

我可以为Find按钮添加一个CLASS或ID,在JQuery中我可以编写如下内容:

$(function() {
  $(".MySearchButtonClass").click(function() {
    // validate and process form here
  });
});

在我与JQuery理解的"新手"阶段,我不明白为什么我会这样做

我的旧方法识别对象附近的方法.在用户按下按钮之前可能存在JS未加载的风险(在那里？JS的LOAD位于页面顶部).

在加载文档之前,JQuery Document Ready方法不会被激活(我假设JS已经存在并准备好运行了吗？),但它将代码移动到我的HTML文件的一个单独部分 - 所以当我在HTML源代码中看到了MyButtonArray DIV,对我来说哪些对象有方法,哪些对象没有方法不明显.

能否帮助我了解我的选择以及我应该注意的好处/问题？

编辑:我觉得DOM操作 - 比如点击任何带有类"LightBoxThumb"的缩略图时可以出现的LightBox - 会使用Unobtrusive Javascript.

但是,我正在努力说服自己,具有特定操作的按钮应该以这种方式应用其方法.(我当然不会在按钮上放任何代码而不是单个函数调用"其他地方"的东西,但在我看来,这是我最好的线索,关于那个按钮做什么,而不显眼的Javascript层可能会更难确定.)

Edit2 - 接受的答案

我已经接受了Russ Cams的回答.它以一种对我有所帮助的方式描述了Unobtrusive Javascript,以便更多地了解应该如何以及何时应该使用它.

目前(当我有更多经验时可能会改变!)我将坚持使用OnClick事件对一个对象进行单个,不变的动作,因为我觉得我更容易调试 - 并且如果出现问题则进行诊断.对于允许单击标题列进行排序(以及该类型的情况)的表上的ZebraStripes,我可以看到Unobtrusive Javascript方法的好处

Russ的最终评论特别有用,在此重复:

"@Kristen - 你是对的,就像许多编程主题一样,有不止一种方法,人们会强烈支持他们的信念!如果我们谈论单一按钮的单一方法,我完全理解你的位置来自......

如果我们讨论的是大量的JavaScript,同一个函数调用多个元素,不同的函数调用不同的方法,等等.我认为自己混合内联和不显眼的方法会更加困难,而且它会是更好地采用一种或另一种方法"

关于如何将参数合并到SEO友好URL中,我将不胜感激

我们决定首先使用"技术"参数,然后是"SEO Slug"

\product\ABC123\fly-your-own-helicopter

很像SO - 如果SEO Slug发生变化,或被截断或缺失,我们仍然有Product和ABC123参数; 各种文章说,拥有这样的额外数据不会损害SEO排名.

我们需要有额外的参数; 我们可以使用" - "分隔参数,因为它使它们看起来类似于SEO Slug,或者我们可以/应该使用别的东西？

\product\ABC123-BOYTOY-2\boys\toys\fly-your-own-helicopter

这是product = ABC123,在Category = BOYTOY和Page =中2.

我们还希望尽可能保持层次结构平坦,因此我认为:

\product-ABC123-BOYTOY-2\boys\toys\fly-your-own-helicopter

会更好 - 少一级.

我们有许多"区域",例如

\product-ABC123\seo-slug-for-product
\category-BOYTOY\seo-slug-for-category
\article-54321\terms-and-conditions

如果我们可以只使用我们的5位数页码编号,它会对我们有很大的帮助,所以这些会变成

\12345-ABC123\seo-slug-for-product
\23456-BOYTOY\seo-slug-for-category
\54321\terms-and-conditions

(产品和类别为不同的模板提供了许多不同的页面ID,这种风格将我们直接带到正确的模板)

我很感激您对使用哪些参数分隔符的洞察力,以及领先的技术数据是否适用于我们.

如果相关:

IIS7 + MSSQL2008上的经典ASP应用程序产品和类别代码仅包含AZ,0-9,"_".

检查我们的网络日志，我们发现大量点击是其他双击或重复点击（例如，当系统繁忙且反应不够快时）。

双击提交按钮可能会导致表单处理两次（通常我们针对此进行编程，但我想避免我们没有针对此编程的错误的可能性），但即使双击链接也意味着服务器必须处理响应两次（通常服务器会在第一次单击时检测到“断开连接”并为此中止处理 - 但我们仍然会为此付出服务器时间，当服务器负载过重时，这种情况会更加复杂）。

话虽如此，有时我从来没有得到对点击的响应，只有重新点击才有效。

我们确实看到的一个动作是误点击——点击一个链接，意识到它不是想要的链接，然后点击正确的、相邻的链接——显然我们仍然需要允许。

你如何处理这个/你有什么建议？一般而言，在整个应用程序中实现这一目标的最佳方法是什么？

1）我们可以在点击后禁用链接/按钮（可能在一段时间内，然后重新启用）

2）我们可以隐藏页面的“主体”——我们过去已经这样做了，只留下“横幅”窗格（在所有页面上看起来都一样），它给出了下一个页面加载的外观（但不在某些浏览器中使用后退按钮效果很好） - 这也会让误点击的用户感到困惑

多年来我的目标是将ASP/VBScript转移到"更好"的语言 - 我的偏好是C#,因为我有C技能 - 但我也会考虑其他语言(包括PHP等,所以不仅仅是DotNet )

目标是使用一种语言为代码库提供更多功能.我讨厌在VBScript中缺少数据输入,我想要一些不同的"容器对象" - 而不仅仅是一个字典对象,等等 - 实际上我想知道为什么,在80年代从Basic转移到C,然后C++一段时间之后,我设法将"返回"基本输入到00.

(我可以在VBScript中对容器对象进行编程,但我的直觉是它们的运行速度很慢;我们在页面渲染中使用了大量的HTML"片段",ASP应用程序对象是一个非常钝的工具!)

我的ASP/VBScript是一个单独的大型应用程序,它基本上是一个提供Web内容的"引擎".

它已经有很多年了,现在ASP代码很少变化.(所以我确实需要证明移动它,或者只是"永远与VBScript一起生活")

它由MS SQL数据库中的数据驱动.

只有一个.ASP页面(由几个包含文件组成).

基于查询字符串参数,从数据库加载页面的Skin和CMS模板,并运行合适的数据库Sprocs以获取合并到CMS模板中的数据.

还从数据库中检索有关页面的数据(要使用的方法等),以及访问权限等的详细信息.

从我读到的一些内容可能会使迁移变得更容易:

不使用ASP会话 - 会话cookie用于从数据库中检索会话数据(因此我可以轻松地与ASPX共享一半的会话

VBScript始终使用OPTION EXPLICIT,因此所有变量都是预定义的.

所有输出都是通过Response.Write(实际上大多数内容合并为单个变量然后输出).没有HTML和<%服务器代码%>的混合.

我有一些VBScript类,但不是很多.

我有很多VBScript函数和一些子例程.

我有一个测试套件.这会从浏览器中捕获屏幕截图并以图形方式将它们与主图像进行比较 - 因此我可以进行回归测试.

我没有足够的资源来完成重写; 在迁移期间需要继续维护现有代码; 但是说我们99%的工作都在CMS或SQL Sprocs中,因此对ASP代码的更改很少.

我已经阅读了MS的实用程序,将ASP代码迁移到VB.NET.鉴于我的代码是100%VBScript并且没有HTML/Script的混合,我会很感激这对我是否会帮助很多或者一点点的意见？

我很乐意重构STAYING IN VBscript,以便稍后更容易迁移到DotNet(但我需要知道我的目标是做什么:)).例如,我可以将一些/所有函数移动到COM对象,并且可能会那么零碎地进行操作？

谢谢你的帮助

我可以在JS中做到这一点,但我开始使用JQuery并且更愿意为此开发技能.

我有一条提醒消息[#CheckboxReminder]"勾选此复选框表示您已检查过您的数据".

然后,我想在勾选复选框时隐藏提醒消息[#IsConfirmed],如果未选中则将其恢复为原始状态.

页面将呈现,提醒消息设置为Visible或Hidden类; 如果用户最近将其数据标记为"已检查",则该消息将被隐藏(但如果他们愿意,欢迎用户再次选中该框)

我相信JQuery toggle()可以做到这一点,但我读到它取决于#CheckboxReminder设置样式以指示可见性的方式,而且我还读过Toggle()可能与#IsConfirmedCheckBox 不同步- 例如快速双击.也许我应该让toggle(FunctionA, FunctioB)FunctionA设置复选框状态,而FunctionB取消设置它 - 而不是允许Click设置它？

请问这个代码的最佳方法是什么？

如果有用,这里是HTML可能的样子:

<p>When the data above is correct please confirm 
    <input type="checkbox" id="IsConfirmed" name="IsConfirmed"> 
    and then review the data below</p>
...
<ul>
<li id="CheckboxReminder" class="InitHide OR InitShow">If the contact details
    above are correct please make sure that the CheckBox is ticked</li>
<li>Enter any comment / message in the box above</li>
<li>Then press <input type="submit"></li></ul>