MVC部分视图中的命名约定以避免ID冲突

Question

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

现在有很大的问题,这个已经全部被讨论过.建议的解决方案通常是" 切换到MVC ",您可以在其中控制您的ID.太棒了!......除了......

...你最终遇到的问题(切换到MVC后),如果你不小心,就像下面这样:

• 页面上的两个表单都包含一个带有EmailID 的电子邮件字段 .
• 浏览器将呈现正常(XHTML不允许重复的ID,但浏览器不会拒绝它们)
• 甚至表单提交也会起作用,因为它FORM会将自己相应的内容发送到服务器操作.

你可以逃脱 - 如果你是一个非常糟糕的程序员,不关心标准.但是,如果你开始使用jQuery甚至只是getElementById(..):你会很快看到一些非常奇怪的东西:

让我们说:

• 你有两个用户控件,一个用于"提交评论",另一个用于"加入邮件列表".每个都有一个Email字段.他们每个人都有id="Email"

• 你在'提交评论'控件中有javascript进行验证:

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

• 哎呀!该#Email选择将选择的第一个实例<input id="Email">在页面上.因此,在提交SECOND表单时,您最终可能会实际验证FIRST电子邮件字段的值.但检查数据库 - 您将拥有正确的值.这可以快速推动你的QA上升;-)

我正在寻找任何人都可能提出的任何聪明的伎俩.我在这个问题中找到了一些有趣的想法:ASP.NET MVC View User Control - 如何设置ID,但我觉得答案不够,或者利用了一些最新的绑定模型.

您可以做一些显而易见的事情,例如始终使用唯一IDS,为每个ID添加前缀或控件前缀.这很快就开始看起来像ASP.NET 1.0!

您可以做的另一件事是使用选择器$('#contatUsForm #Email')来获取电子邮件ID.但是,只有你没有XHTML才好.我认为这个解决方案非常糟糕.事实上它是如此糟糕我甚至没有测试,看看jQuery甚至让你运行它!

我提出的一个有用的东西(在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);
});

这将帮助您快速找到哪些控件可能会出现此问题,但让我仍然希望找到一个优雅的解决方案.

我对与模型绑定结合使用的解决方案特别感兴趣.一旦我开始手动添加前缀,我就会开始打破整个地方的模型绑定.

必须有一个比我更聪明的人,已经考虑过了......

Answer 1

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