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会将自己相应的内容发送到服务器操作。

你可以逃脱 - 如果你是一个非常糟糕的程序员而不关心标准。但是，如果你开始使用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 - how to set IDs但我觉得答案不够，或者没有利用一些最新的绑定模型。

你可以做一些显而易见的事情，例如总是使用唯一的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);
});

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

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

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

Answer 1

我认为你过分思考它。简单的答案是，它们不一样，所以不要给它们相同的ID。如果他们有相似之处，那就是课程的用途。如果有一个输入用于简报注册，请将其命名为NewsletterEmail。如果另一个是用户登录表单，请将其命名为UserEmail。使用更具描述性的ID是很好的HTML，甚至远不能接近Webforms创建的混乱。

Answer 2

就表单字段而言，我认为您将id属性与name属性混淆。

你提到的jQuery适用于表单字段（略微调整）：

$('#contactUsForm input[name="Email"]')

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

2 个答案: