当前位置：文江博客话题详情

在 ASP.NET 中使用 MasterPages 时使用 JQuery 的正确方法是什么？

发布于 2024-07-16 21:11:23 字数 745 浏览 5 评论 0 原文

我在没有母版页的 aspx 页面中使用 JQuery 时没有任何问题，但是当我尝试在有母版页的页面中使用它时，它不起作用，所以我最终将 jquery 文件和其他脚本文件放在页面而不是母版。现在，如果我有 10 页，我会对所有 10 页执行此操作，但我知道这是不正确的。在下面的示例母版页中，我将把脚本文件放在哪里。

<html>
<head runat="server">
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <asp:ContentPlaceHolder ID="ContentPanel" runat="server">
    </asp:ContentPlaceHolder>            
</body>
</html>

我最近使用了 fancybox 插件，我所做的不是将 jquery 脚本和 fancybox 脚本放在母版页中，因为我对其工作感到沮丧，我只是将其放在我希望脚本运行的页面中，特别是在底部，就在关闭 asp:Content 之前。当然，现在我有一个问题，如果我想在其他页面中使用 fancybox 插件，我会将 jquery 脚本和 fancybox 脚本放在所有 5 个页面上，而不仅仅是母版页上。处理母版页时，使用上面的示例，所有内容都去哪里了？

原文

I have no issues when doing using JQuery in a aspx page without a masterpage, but when I try to use it in pages that have a masterpage, it doesn't work, so I end up putting the jquery files and other script files in the page instead of the master. Now if I have 10 pages, I am doing this for all 10, which I know is incorrect. In the sample masterpage below, where would I put my script files.

<html>
<head runat="server">
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <asp:ContentPlaceHolder ID="ContentPanel" runat="server">
    </asp:ContentPlaceHolder>            
</body>
</html>

I recently used the fancybox plugin and what I did was instead of putting the jquery script and fancybox scripts in the masterpage because I got frustrated on getting it to work, I just put it in the page where I wanted the script to run, specifically at the bottom, right before the closing asp:Content. Of course, now I have the issue of, if I wanted to use the fancybox plugin in other pages, I would put the jquery script and fancybox script on all 5 pages instead of just the masterpage. When dealing with masterpages, where does everything go using my example above?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

￡烟消云散 2024-07-23 21:11:23

您可以像平常一样在母版页中声明主要 jQuery 脚本：

<head runat="server">
  <link href="/Content/Interlude.css" rel="Stylesheet" type="text/css" />
  <script type="text/javascript" src="/Scripts/jquery-1.3.2.min.js"></script>
  <asp:ContentPlaceHolder ID="head" runat="server">
  </asp:ContentPlaceHolder>
</head>

然后可以在引用 Head ContentPlaceholder 的内容控件中加载任何特定于页面的 JS 文件。

但是，更好的选择是查看 ScriptManager< /a> 和 ScriptManagerProxy 控件 - 这些可以为您提供对向客户端提供 JS 文件的方式的更多控制。

因此，您可以在母版页中放置一个 ScriptManager 控件，并在其中添加对 jQuery 核心代码的引用：

<body>
  <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
      <Scripts>
        <asp:ScriptReference Path="/Scripts/jquery-1.3.2.min.js" />
      </Scripts>
    </asp:ScriptManager>

然后，在需要一些自定义 JS 文件或 jQuery 插件的页面中，您可以：

<asp:Content ID="bodyContent" ContentPlaceholderID="body">
  <asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
      <Scripts>
        <asp:ScriptReference Path="/Scripts/jquery.fancybox-1.2.1.pack.js" />
      </Scripts>
  </asp:ScriptManagerProxy>

ScriptManager 允许您执行一些操作，例如控制页面上脚本的呈现位置 LoadScriptsBeforeUI（或者更好，将其设置为 False 之后）。

You would declare your main jQuery scripts within the master page, as you would normally:

<head runat="server">
  <link href="/Content/Interlude.css" rel="Stylesheet" type="text/css" />
  <script type="text/javascript" src="/Scripts/jquery-1.3.2.min.js"></script>
  <asp:ContentPlaceHolder ID="head" runat="server">
  </asp:ContentPlaceHolder>
</head>

And then any page specific JS files could be loaded within the Content controls that reference the Head ContentPlaceholder.

However, a better option would be to look into the ScriptManager and ScriptManagerProxy controls - these can provide you with a lot more control over the way your JS files are served to the client.

So you would place a ScriptManager control in you master page, and add a reference to the jQuery core code in that:

<body>
  <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
      <Scripts>
        <asp:ScriptReference Path="/Scripts/jquery-1.3.2.min.js" />
      </Scripts>
    </asp:ScriptManager>

Then, in your page that requires some custom JS files, or a jQuery plugin, you can have:

<asp:Content ID="bodyContent" ContentPlaceholderID="body">
  <asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
      <Scripts>
        <asp:ScriptReference Path="/Scripts/jquery.fancybox-1.2.1.pack.js" />
      </Scripts>
  </asp:ScriptManagerProxy>

The ScriptManager allows you to do things like control where on the page scripts are rendered with LoadScriptsBeforeUI (or better yet, after by setting it to False).

回复收藏 0 原文

不忘初心 2024-07-23 21:11:23

我用这个方法。

<script type="text/javascript" language="javascript" src='<%=ResolveUrl("~/scripts/jquery.js") %>' ></script>

只需将其放在您的标签上方即可...

<asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>

I use this method.

<script type="text/javascript" language="javascript" src='<%=ResolveUrl("~/scripts/jquery.js") %>' ></script>

Just place it above your tag...

<asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>

回复收藏 0 原文

蓦然回首 2024-07-23 21:11:23

好吧，为您的脚本使用不同的内容占位符。它应该如下所示

<script type="text/javascript" src="myscript.js" />
<asp:ContentPlaceHolder ID="ScriptContent" runat="server">

</asp:ContentPlaceHolder>

将此标记放置在母版页的底部，靠近标记。这将允许您在母版页以及您的页面上添加脚本。通过查看页面源代码并确保以正确的方式呈现 HTML，确保脚本以正确的顺序加载。祝你好运。

哦，还有一件事，请确保 jQuery 和 FancyBox 在您可能拥有的任何其他 js 之前加载，否则它将无法工作。 Javascript 按照调用的顺序加载，jQuery 必须首先加载！

Alright use a different contentplaceholder for your script. It should look like this

<script type="text/javascript" src="myscript.js" />
<asp:ContentPlaceHolder ID="ScriptContent" runat="server">

</asp:ContentPlaceHolder>

Place this tag at the bottom of your masterpage, close to the </body> tag. This will allow you add scripts on the masterpage and also on your pages as well. Make sure that your scripts are loading in the right order by viewing the page source and ensuring the HTML rendered in the right way. Good luck.

Oh one more thing, make sure jQuery and then FancyBox load up before any other js you may have out there or else it won't work. Javascript loads in the order it was called, jQuery must load first!

回复收藏 0 原文

友欢 2024-07-23 21:11:23

这是母版页中的工作方式：

对于脚本文件：

<script type="text/javascript" src="<%= ResolveUrl("~/script/scriptFile.min.js") %>"></script>

对于 CSS 文件：

<link rel="stylesheet" href="~/styles/CssFile.min.css" runat="server" />

附加说明：

尽可能使用缩小版本(文件名.min.js) 和
(FileName.min.css) 以减少加载时间并提高 SEO。
将 CSS 放在之前，将脚本放在之前
提高性能并改善 SEO。
路径中的平铺字符 (~) 将自动解析为您网站的根目录。
不要忘记仅对样式表使用 runat="server"。该脚本不得包含 runat="server"，因为它已使用服务器运算符 <%= %>。
您可以使用在线 http://jscompress.com/ 来压缩您的 javascript 和 https://csscompressor.net/ 来压缩 CSS 文件。

This is what will work inside a Master page:

For Script file:

<script type="text/javascript" src="<%= ResolveUrl("~/script/scriptFile.min.js") %>"></script>

For CSS file:

<link rel="stylesheet" href="~/styles/CssFile.min.css" runat="server" />

Additional Notes:

Use the minified versions as could as possible (FileName.min.js) and
(FileName.min.css) to reduce loading time and improve SEO.
Put the CSS before the </head> and the script before the </body> to
enhance performance and improve SEO.
The tile character (~) in the path will resolve automatically to the root of your website.
Do not forget to use runat="server" for the stylesheet only. The script must not have runat="server" because it already uses server operators <%= %>.
You can use the online http://jscompress.com/ to compress your javascript and https://csscompressor.net/ to compress your CSS files.