C# ASP.NET母版页中增强元素的Javascript

我遇到了一个小问题，我做了一些挖掘，但很难找到一个最终的答案/解决方案

基本上，我有一些javascript（由第三方创建），它可以对页面元素进行一些出色的处理，使它们看起来漂亮。代码在单页（即没有母版）上非常有效，但是，当我尝试将效果应用到母版中的内容页时，它不起作用

简而言之，我有一个母版页，其中包含主脚本引用。所有页面都将使用该脚本，但传递给它的参数将因内容页面而异

母版页脚本参考

<script src="scripts.js" language="javascript" type="text/javascript" />

<script>
    MakePretty("elementID");
</script>

现在，此无法工作。但是，如果我用像

警报（“HI！”）

这样简单的东西来替换，那么一切都可以正常工作。所以代码被添加好了，它似乎并不总是根据它所做的事情来执行

现在，在做了一些挖掘之后，我了解到内容页的

Load

事件是在母版页之前引发的，这可能会产生影响，但是，我认为页面上的javascript是一次性加载/运行的

如果这是一个愚蠢的问题，请原谅，但我对使用javascript还是比较陌生的，尤其是在母版页场景中

如何让内容页调用母版页中引用的javascript代码？

谢谢你对这些人的帮助，你会帮我解决这个工作问题的

笔记：

• RegisterStartupScript

  等似乎在任何级别都不起作用
• 控件ID设置得很好，即使在母版页环境中也是如此，并按预期呈现

---

---

抱歉，如果有任何不清楚的地方，我真的很累，因此如果需要，请在需要回复/澄清时发表评论。

是否可以使用干净的javascript？-）

--只需在body标记中添加类似的内容：

<script type="text/javascript">
  window.onload = function(){
    MakePretty("elementID");
  }
</script>

window.onload=函数（）{
MakePretty（“elementID”）；
}

顺便说一下，脚本标记必须有一个结束标记：

<script type="text/javascript" src="myScript.js"></script>

---

在母版页的标题部分放置一个ContentPlaceHolder，然后在内容页上添加一个asp:Content控件，引用该占位符，并将脚本放置在该控件中。您可以通过这种方式为每个页面自定义它

---

此外，按ID引用可能不起作用，因为在使用母版页时，页上的控件ID会根据容器结构自动创建。因此，它可能会输出“ctl00\u MainContentPlaceHolder\u elementID”以查看源代码或使用firebug检查表单元素以查看输出的ID，而不是预期的“elementID”。

一旦使用母版页，客户端控件的ID就不是您所认为的。生成脚本时应使用Control.ClientID。

为什么不使用jQuery查找所有控件？大概是这样的：

$(document).ready(function(){
  $("input[type='text'], input[type='radio'], input[type='checkbox'], select, textarea").each(function(){
    MakePretty(this);
  });
});

通过这种方式，您将获得页面上的所有元素，您可以等待页面准备就绪（这样您就不会随意修改DOM）。如果需要的话，jQuery选择器可以获得更多特定格式的元素（例如，添加一个根元素，比如body div的ID）

---

最好修改MakePretty方法，使其以元素而不是ID作为参数，以减少处理开销。

使用母版页时，需要小心html属性ID，因为.NET将修改此值，因为它需要保持ID的唯一性

我假设您的javascript通过ID应用css样式，并且当您使用母版页时，ID与您的aspx中的ID不同。如果验证是否始终添加javascript，则回答时需要考虑以下因素：

• 始终在页面加载中设置母版页id（this.id=“myPrefix”）
• 母版页中的任何HTML元素都将以母版页id作为前缀（即：呈现页面上的“myPrefix_myDiv”）
• 内容占位符id中的任何HTML元素都将以附加前缀作为前缀（即myPrefix\u ContentPlaceholder ID1\u myDiv）

---

如果我能澄清什么，请告诉我。希望这有帮助

问题更新为包含ID上的点，这些都设置得很好。这个技巧真的帮助我走上了一条很好的道路，实现了这一点，并使代码在重复使用时更加优雅（即母版页中的引用，能够根据内容进行自定义调用。谢谢，我很感激！

$(document).ready(function(){
  $("input[type='text'], input[type='radio'], input[type='checkbox'], select, textarea").each(function(){
    MakePretty(this);
  });
});