Cách thích hợp để sử dụng JQuery khi sử dụng MasterPages trong ASP.NET?

Tôi không gặp vấn đề gì khi sử dụng JQuery trên trang aspx mà không có masterpage, nhưng khi tôi cố gắng sử dụng nó trong các trang có masterpage, nó không hoạt động, vì vậy tôi sẽ đưa các tập tin jquery và các tập tin script khác trong trang thay vì chủ. Bây giờ nếu tôi có 10 trang, tôi làm điều này cho tất cả 10 trang mà tôi biết là không chính xác. Trong trang chủ mẫu bên dưới, tôi sẽ đặt các tệp kịch bản của mình ở đâu.Cách thích hợp để sử dụng JQuery khi sử dụng MasterPages trong ASP.NET?

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

Gần đây tôi đã sử dụng các plugin Fancybox và những gì tôi đã làm là thay vì đưa kịch bản và Fancybox script jquery trong masterpage vì tôi đã thất vọng về nhận được nó để làm việc, tôi chỉ cần đặt nó trong trang mà tôi muốn kịch bản để chạy, cụ thể ở dưới cùng, ngay trước khi đóng asp: Nội dung. Tất nhiên, bây giờ tôi có vấn đề, nếu tôi muốn sử dụng các plugin fancybox trong các trang khác, tôi sẽ đặt kịch bản jquery và kịch bản fancybox trên tất cả 5 trang thay vì chỉ là masterpage. Khi xử lý các trang cái, mọi thứ sẽ sử dụng ví dụ ở trên của tôi ở đâu?

Nguồn

2009-04-08 Xaisoft

Bạn sẽ tuyên bố kịch bản jQuery chính của bạn trong trang chủ, như thường lệ:

<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>

Và sau đó bất kỳ trang file JS cụ thể có thể được nạp trong các điều khiển nội dung mà tham khảo Trưởng ContentPlaceHolder. Tuy nhiên, một lựa chọn tốt hơn là xem xét các điều khiển ScriptManager và ScriptManagerProxy - những điều này có thể cung cấp cho bạn nhiều quyền kiểm soát hơn đối với cách các tệp JS của bạn được phân phát cho khách hàng.

Vì vậy, bạn sẽ đặt một điều khiển ScriptManager trong bạn làm chủ trang, và thêm một tham chiếu đến mã lõi jQuery ở chỗ:

<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>

Sau đó, trong trang của bạn đòi hỏi phải có một số tập tin JS tùy chỉnh, hoặc một jQuery plugin, bạn có thể có:

<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>

các ScriptManager cho phép bạn làm những việc như kiểm soát nơi trên kịch bản trang được trả lại với LoadScriptsBeforeUI (hoặc tốt hơn nữa, sau khi bằng cách thiết lập nó để False).

Nguồn

2009-04-08 19:44:22

Được rồi, hãy sử dụng một trình giữ chỗ nội dung khác cho tập lệnh của bạn. Hình ảnh trông giống như thế này

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

</asp:ContentPlaceHolder>

Đặt thẻ này ở cuối trang chính của bạn, gần thẻ </body>. Điều này sẽ cho phép bạn thêm các tập lệnh trên trang chính cũng như trên các trang của bạn. Đảm bảo rằng tập lệnh của bạn đang tải đúng thứ tự bằng cách xem nguồn trang và đảm bảo HTML được hiển thị đúng cách. Chúc may mắn.

Một điều nữa, hãy đảm bảo jQuery và sau đó FancyBox tải lên trước bất kỳ js nào khác mà bạn có thể có ở đó hoặc người nào khác nó sẽ không hoạt động. Javascript tải theo thứ tự nó được gọi, jQuery phải tải đầu tiên!

Nguồn

2009-04-08 19:19:10

Tải javascript trước khi đánh dấu html? – Xaisoft

Tôi sử dụng phương pháp này.

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

Chỉ cần đặt nó phía trên thẻ của bạn ...

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

Nguồn

2010-02-11 01:40:25 Kieran

+1 nhưng tôi nhận được cảnh báo khi đưa thuộc tính ngôn ngữ nói thuộc tính không hợp lệ –

Tôi thích cái này vì nó không yêu cầu ScriptManager hoặc thành phần bổ sung. –

Đây là những gì sẽ làm việc bên trong một trang Master:

Đối Script file:

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

Đối với tập tin CSS:

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

bổ sung Không es:

Sử dụng các phiên bản rút gọn như thể càng tốt (FileName.min.js) và (FileName.min.css) để giảm thời gian tải và cải thiện SEO.
Đặt CSS trước </head> và tập lệnh trước khi </body> đến nâng cao hiệu suất và cải thiện SEO.
Ký tự gạch (~) trong đường dẫn sẽ tự động giải quyết vào thư mục gốc của trang web của bạn.
Đừng quên sử dụng runat="server" cho biểu định kiểu chỉ. Tập lệnh không được có runat="server" vì tập lệnh đã sử dụng toán tử máy chủ <%= %>.
Bạn có thể sử dụng trực tuyến http://jscompress.com/ để nén javascript và https://csscompressor.net/ để nén tệp CSS của mình.

Nguồn

2015-05-12 01:12:52

Cách thích hợp để sử dụng JQuery khi sử dụng MasterPages trong ASP.NET?

Trả lời

Các vấn đề liên quan