Share via

How to call external scripts and img links in master page of "asp.net empty web site" in VS2019

Ashok Kumar 221 Reputation points
2022-11-04T13:30:22.92+00:00

I want to call external scripts and img links in HomeMaster page and also I have created a Home.aspx page under the homepage folder and I have created this project using asp.net empty web site in VS2019. So while I'm running the Home.aspx page the page is executing but the related css,js,img links are not loading properly.

This is my project structure :-

project structure

And I'm calling the scripts, img links in HomeMaster page like this.

In header 

   <head runat="server">  
     
      <meta charset="utf-8">  
     <meta content="width=device-width, initial-scale=1.0" name="viewport">  
     
     <title>Path</title>  
     <meta content="" name="description">  
     <meta content="" name="keywords">  
     
     <!-- Favicons -->  
     <link href="../assets/img/favicon.png" rel="icon">  
     <link href="../assets/img/apple-touch-icon.png" rel="apple-touch-icon">  
     
     <!-- Google Fonts -->  
     <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">  
     
     <!-- Vendor CSS Files -->  
     <link href="../assets/vendor/aos/aos.css" rel="stylesheet">  
     <link href="../assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">  
     <link href="../assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">  
     <link href="../assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">  
     <link href="../assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">  
     <link href="../assets/vendor/remixicon/remixicon.css" rel="stylesheet">  
     <link href="../assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">  
     
     <!-- Main CSS File -->  
     <link href="../assets/css/style.css" rel="stylesheet">  
     
       <asp:ContentPlaceHolder id="head" runat="server">  
       </asp:ContentPlaceHolder>  
   </head>

And in body after footer content(at the end) calling the js related files :- 

   <body>  
       <form id="form1" runat="server">  
       <div>  
     
         <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">  
        </asp:ContentPlaceHolder>  
     
     <!-- Vendor JS Files -->  
     <script src="../assets/vendor/purecounter/purecounter_vanilla.js"></script>  
     <script src="../assets/vendor/aos/aos.js"></script>  
     <script src="../assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>  
     <script src="../assets/vendor/glightbox/js/glightbox.min.js"></script>  
     <script src="../assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>  
     <script src="../assets/vendor/swiper/swiper-bundle.min.js"></script>  
     
     <!-- Main JS File -->  
     <script src="../assets/js/main.js"></script>  
     
       </div>  
       </form>  
   </body>

And in Home.aspx page calling the img links like below :- 

   <%@ Page Title="" Language="C#" MasterPageFile="~/HomeMaster.master" AutoEventWireup="true" CodeFile="Home.aspx.cs" Inherits="homepage_Home" %>  
     
   <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">  
   </asp:Content>  
     
   <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">  
     
     <div class="row">  
     
             <div class="col-lg-2 col-md-4 col-6 d-flex align-items-center justify-content-center" data-aos="zoom-in">  
               <img src="../assets/img/clients/client-1.png" class="img-fluid" alt="">  
             </div>  
     
             <div class="col-lg-2 col-md-4 col-6 d-flex align-items-center justify-content-center" data-aos="zoom-in">  
               <img src="../assets/img/clients/client-2.png" class="img-fluid" alt="">  
             </div>  
     
             <div class="col-lg-2 col-md-4 col-6 d-flex align-items-center justify-content-center" data-aos="zoom-in">  
               <img src="../assets/img/clients/client-3.png" class="img-fluid" alt="">  
             </div>  
     
             <div class="col-lg-2 col-md-4 col-6 d-flex align-items-center justify-content-center" data-aos="zoom-in">  
               <img src="../assets/img/clients/client-4.png" class="img-fluid" alt="">  
             </div>  
     
             <div class="col-lg-2 col-md-4 col-6 d-flex align-items-center justify-content-center" data-aos="zoom-in">  
               <img src="../assets/img/clients/client-5.png" class="img-fluid" alt="">  
             </div>  
     
             <div class="col-lg-2 col-md-4 col-6 d-flex align-items-center justify-content-center" data-aos="zoom-in">  
               <img src="../assets/img/clients/client-6.png" class="img-fluid" alt="">  
             </div>  
     
           </div>  
     
   </asp:Content>

So while I'm running the Home.aspx page I didn't get any error and the images are not displaying in Home.aspx page

I'm very new to this web site forms development.

Suggest me where I did the mistake and how to achieve this.

Please Help me.

Microsoft 365 and Office Development Office JavaScript API
Developer technologies ASP.NET Other
0 comments

2 answers

Sort by: Most helpful
Most helpful Newest Oldest
  1. AgaveJoe 30,126 Reputation points
    2022-11-04T15:04:50.133+00:00

    Use relative references from the root. The following examples assume the "assets" folder is in the application root. 

    <img src="/assets/img/clients/client-2.png" class="img-fluid" alt="">

    And 

    <link href="/assets/vendor/aos/aos.css" rel="stylesheet">

    Or 

    <link href="~/assets/vendor/aos/aos.css" rel="stylesheet">
    0 comments
  2. Lan Huang-MSFT 30,186 Reputation points Microsoft External Staff
    2022-11-07T07:24:26.027+00:00

    Hi @Ashok Kumar , 

    <link href="../assets/img/favicon.png" rel="icon">  
 <link href="../assets/img/apple-touch-icon.png" rel="apple-touch-icon">

    First of all your url is written incorrectly. should be: 

    <link href="../assets/img/testimonials/favicon.png" rel="icon">  
<link href="../assets/img/testimonials/apple-touch-icon.png" rel="apple-touch-icon">

    An image placed in the head will only be displayed here257774-image.png, and only one image can be placed.
    If you want to display in the html header, you need to put the image in the body.
    257767-image.png

    You can put both css and js in the head. You can drag and drop files into the page to avoid url errors.
    You can see specific errors through the F12 Developer Tools.

    Best regards,
    Lan Huang

    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    0 comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.