jquery - MVC 部分 View 中的命名约定以避免 ID 冲突

Question

任何来自 ASP.NET(MVC 之前)的人都已经习惯了能够为他们的控件提供他们想要的任何 ID。您可以创建一个名为 Email 的字段在 .asmx文件，一个名为 Email 的字段在您的主页中，有一个名为 Email 的字段在您的母版页中，放置 .asmx 的多个实例文件在页面上，它们都会获得自己唯一的 ID。

现在有big problems有了这个 all been discussed before 。通常建议的解决方案是“switch to MVC” ' 您可以在其中控制您的 ID。太棒了!...除了...

...如果您不小心，您最终会遇到的问题(切换到 MVC 后)如下所示:

• 页面上的两个表单均包含带有 Email 的电子邮件字段作为 ID。
• 浏览器将正常渲染(“XHTML 不允许”重复的 ID，但浏览器不会拒绝它们)
• 自 FORM 起，甚至表单提交也能正常工作。会将自己对应的内容发送到服务器action。

如果你是一个非常糟糕的程序员，不关心标准，那么你可以逃脱惩罚。然而，如果您开始使用 jQuery，甚至只是 getElementById(..)，您很快就会开始看到一些非常奇怪的事情。 :

比方说:

• 您有两个用户控件，一个用于“提交评论”，另一个用于“加入邮件列表”。每个都有一个Email场内。他们每个人都有id="Email"

• 您在“提交评论”控件中有用于验证的 JavaScript:

  if ( $("#Email").val().indexOf("@") == -1 ) {
      // invalid email 
  }
  

• 哎呀! #Email选择器将选择 <input id="Email"> 的第一个实例在页面上。因此，在提交第二个表单时，您最终可能会实际验证第一个电子邮件字段的值。但检查数据库 - 你会得到正确的值。这会很快让你的 QA 陷入困境;-)

我正在寻找任何人可能想出的聪明技巧。我在问题中发现了一些有趣的想法:ASP.NET MVC View User Control - how to set IDs但我觉得答案还不够深入，也没有充分利用一些最新的绑定(bind)模型。

您可以做一些明显的事情，例如始终使用唯一的 IDS，为每个 ID 加上控制前缀或其他前缀。这很快就会看起来像 ASP.NET 1.0!

您可以做的另一件事是使用像 $('#contatUsForm #Email') 这样的选择器获取电子邮件 ID。但前提是您可以接受没有 XHTML。我认为这个解决方案非常糟糕。事实上，它太糟糕了，我什至没有测试过 jQuery 是否允许你运行它!

一件有用的事情I came up with (在 sunsean 的帮助下)是以下 jQuery 函数 - 我将其放在我的母版页上，并且肯定会保留到我同意为止。

// Warning Duplicate IDs - place on master page in $(function() { ... });
$('[id]').each(function(){
  var ids = $('[id='+this.id+']');
  if(ids.length>1 && ids[0]==this)
    alet('Multiple IDs #'+this.id);
});

这将帮助您快速找到哪些控件可能会出现此问题，但我仍然在寻找优雅的解决方案。

我对与模型绑定(bind)结合使用的解决方案特别感兴趣。一旦我开始手动添加前缀，我就会开始到处破坏模型绑定(bind)。

一定有比我更聪明的人已经想通了这个......

Answer 1

我觉得你想多了。简单的答案是，它们不一样，所以不要给它们相同的 ID。如果它们有相似之处，那就是类(class)的用途。如果一个输入用于注册时事通讯，请将其命名为 NewsletterEmail。如果另一个用于用户登录表单，请将其命名为 UserEmail。使用更具描述性的 ID 是很好的 HTML，而且与 Webforms 造成的困惑相差甚远。