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

I have run in to a bit of a problem and I have done a bit of digging, but struggling to come up with a conclusive answer/fix.

我遇到了一些问题,我已经做了一些挖掘,但努力想出一个确定的答案/修复。

Basically, I have some javascript (created by a 3rd party) that does some whizzbang stuff to page elements to make them look pretty. The code works great on single pages (i.e. no master), however, when I try and apply the effects to a content page within a master, it does not work.

基本上,我有一些javascript(由第三方创建),它为页面元素做一些whizzbang的东西,使它们看起来很漂亮。代码在单个页面上工作得很好(即没有主页),但是,当我尝试将效果应用到主页内的内容页面时,它不起作用。

In short I have a master page which contains the main script reference. All pages will use the script, but the parameters passed to it will differ for the content pages.

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

Master Page Script Reference

母版页面脚本参考

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

Single Page

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

As you can see, I need the reference in each page (hence it being in the master) but the actual elements I want to "MakePretty" will change dependant on content.

正如你所看到的,我需要每个页面中的引用(因此它在master中),但是我想要“MakePretty”的实际元素将根据内容而改变。

Content Pages

Now, due to the content page not having a <head> element, I have been using the following code to add it to the master pages <head> element:

现在,由于内容页面没有元素,我一直使用以下代码将其添加到母版页元素:

HtmlGenericControl ctl = new HtmlGenericControl("script");
ctl.Attributes.Add("language", "javascript");
ctl.InnerHtml = @"MakePretty(""elementID"")";
Master.Page.Header.Controls.Add(ctl);

Now, this fails to work. However, if I replace with something simple like alert("HI!"), all works fine. So the code is being added OK, it just doesn't seem to always execute depending on what it is doing..

现在,这无法奏效。但是,如果我用简单的警告替换(“HI!”),一切正常。所以代码正在添加好,它似乎并不总是执行取决于它正在做什么..

Now, having done some digging, I have learned that th content page's Load event is raised before the master pages, which may be having an effect, however, I thought the javascript on the page was all loaded/run at once?

现在,做了一些挖掘,我已经了解到内容页面的Load事件是在主页面之前引发的,这可能会产生影响,但是,我认为页面上的javascript是全部加载/运行的?

Forgive me if this is a stupid question, but I am still relatively new to using javascript, especially in the master pages scenario.

请原谅我这是一个愚蠢的问题,但我仍然相对较新,使用javascript,尤其是在母版页方案中。

How can I get content pages to call javascript code which is referenced in the Master page?

如何让内容页面调用主页面中引用的javascript代码?

Thanks for any/all help on this guys, you will really be helping me out with this work problem.

感谢这些人的任何/所有帮助,你真的会帮助我解决这个问题。

NOTES:

RegisterStartupScript and the like does not seem to work at any level..

RegisterStartupScript等似乎在任何级别都不起作用..

The control ID's are being set fine, even in the MasterPage environment and are rendering as expected.

即使在MasterPage环境中,控件ID也设置正常,并且正在按预期进行渲染。

Apologies if any of this is unclear, I am real tired so if need be please comment if a re-word/clarification is required.

如果有任何不清楚的道歉,我真的很累,所以如果需要请注释,如果需要重新说明/澄清。

5 个解决方案

#1

Put a ContentPlaceHolder in the head section of the master page, then add a asp:Content control on the content page referring to the placeholder and put your script in that control. You can customize it for each page this way.

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

Also, the reference by ID may not be working because when you use Master Pages, the control IDs on the page are automatically created based on the container structure. So instead of "elementID" as expected, it may be outputting "ctl00_MainContentPlaceHolder_elementID" View your source or use firebug to inspect your form elements to see what the IDs outputted are.

此外,ID引用可能不起作用,因为当您使用母版页时,页面上的控件ID将根据容器结构自动创建。因此,不是按照预期的“elementID”,它可能会输出“ctl00_MainContentPlaceHolder_elementID”查看您的源或使用firebug检查您的表单元素以查看输出的ID是什么。

#2

Isn't it possible to do with clean javascript ?-)

是不是可以用干净的JavaScript? - )

-- just add something similar to this inside the body-tag:

- 只需在body-tag中添加与此类似的内容:

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

By the way the script-tag has to have an end-tag:

顺便说一句,script-tag必须有一个结束标记:

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

#3

Why not use jQuery to find all the controls? Something like this:

为什么不使用jQuery来查找所有控件?像这样的东西:

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

This way you'll get all elements on the page, you can wait until the page is ready (so you don't modify the DOM illigally). The jQuery selector can get the elements in a bit more of a specific format if you need (ie, add a root element, like the ID of the body div).

通过这种方式,您将获得页面上的所有元素,您可以等到页面准备就绪(因此您不会非法地修改DOM)。如果需要,jQuery选择器可以使元素更具特定格式(即添加根元素,如body div的ID)。

It'd also be best to modify the MakePretty method so it takes the element not the ID as the parameter to reduce processing overhead.

最好修改MakePretty方法,以便将元素而不是ID作为参数来减少处理开销。

#4

Once you use Master Pages, the ids of controls on the client side aren't what you think they are. You should use Control.ClientID when you generate the script.

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

#5

When using master pages, you need to be careful with the html attribute ID, since .NET will modify this value as it needs to keep ids unique.

使用母版页时,需要注意html属性ID,因为.NET会修改此值,因为它需要保持ID唯一。

I would assume your javascript is applying css styles via ID, and when you are using master pages the ID is different than what is in your aspx. If you verify your javascript is always being added, your answer needs to take into account the following:

我假设您的JavaScript通过ID应用css样式,当您使用母版页时,ID与您的aspx中的ID不同。如果您确定始终添加了javascript,则您的答案需要考虑以下因素:

ALWAYS set your master page id in page load (this.ID = "myPrefix";)

总是在页面加载中设置主页面ID(this.ID =“myPrefix”;)

Any HTML element in your master page will be prefixed by the master page id (i.e.: on the rendered page will be "myPrefix_myDiv")

主页面中的任何HTML元素都将以主页面ID为前缀(即:在呈现的页面上将为“myPrefix_myDiv”)

Any HTML element in your content place holder id will be prefixed with an additional prefix (i.e. myPrefix_ContentPlaceHolderId1_myDiv)

内容占位符ID中的任何HTML元素都将以附加前缀为前缀(即myPrefix_ContentPlaceHolderId1_myDiv)

Please let me know if I can clarify anything. Hope this helps!

如果我能澄清任何事情,请告诉我。希望这可以帮助!

#1

#2