A guide on incorporating external scripts and image links into the master page of an "ASP.NET empty web site" using Visual Studio 2019

Question

A guide on incorporating external scripts and image links into the master page of an "ASP.NET empty web site" using Visual Studio 2019

When working on my project, I encountered an issue with calling external scripts, img links, and related resources in the HomeMaster page. My project structure includes a Home.aspx page within the homepage folder of an asp.net empty web site created using VS2019. However, when running the Home.aspx page, the css, js, and img links are not loading properly.

This is the structure of my project:

https://i.sstatic.net/xizuA.png

In the HomeMaster page, I call the scripts and img links as follows:

In the 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">
  ... (Other link imports)

  <!-- Main CSS File -->
  <link href="../assets/css/style.css" rel="stylesheet">

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

After the footer content in the body, I call the related js 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>
  ... (Other script imports)

  <!-- Main JS File -->
  <script src="../assets/js/main.js"></script>

    </div>
    </form>
</body>

Additionally, in the Home.aspx page, I call the img links as shown below:

<%@ Page Title="" Language="C#" MasterPageFile="~/HomeMaster.master" AutoEventWireup="true" CodeFile="Home.aspx.cs" Inherits="homepage_Home" %>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
... (Image links including client-1.png to client-6.png)
</asp:Content>

Despite no errors occurring while running the Home.aspx page, the images fail to display. This troubleshooting process is new to me, so any guidance on identifying mistakes and resolving them would be greatly appreciated.

Please lend a helping hand!

javascript css asp.net image

Answer 1

Answer №1

Alright, let's talk about your master page.

Your master page is located in the root directory, so there's no need to navigate down a folder level like you were doing before.

For example:

<script src="../assets/vendor/purecounter/purecounter_vanilla.js"></script>

Should actually be written as:

<script src="/assets/vendor/purecounter/purecounter_vanilla.js"></script>

(Assuming the above code snippet is in your master page).

You can easily test this out by opening your master page and dragging the JavaScript file from its respective folder into the master page.

For instance:

<html>
<head runat="server">
    <title></title>


    <script src="/Scripts/Test.js"></script>


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

    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server"gt;
        <div>
                    <h3>My Master page part</h3>
        <br />

            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
        </div>
    </form>
</body>
</html>

Notice how the path is referenced from the "master" page itself.

So, the JavaScript function included within the master page is defined as follows:

function myhello() {

    alert("Hello")

}

Now, even if you add a new web page (with the same master) in a nested folder:

https://i.sstatic.net/WjIi7.png

You can still use the myhello() function in your code without any issues.

For example:

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>


<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

        <asp:Button runat="server" Text="Button"
            OnClientClick="myhello();return false" />

</asp:Content>

Therefore, it's important that your script references start from the root just like the master page does.

Any page, including nested ones, can now freely utilize the myhello() function we declared in the master page regardless of their location.

However, if you want only specific pages to access certain resources on a given web page (whether with a master or not), then relative path names will come into play.

Answer 2

Alright, let's talk about your master page.

Your master page is located in the root directory, so there's no need to navigate down a folder level like you were doing before.

For example:

<script src="../assets/vendor/purecounter/purecounter_vanilla.js"></script>

Should actually be written as:

<script src="/assets/vendor/purecounter/purecounter_vanilla.js"></script>

(Assuming the above code snippet is in your master page).

You can easily test this out by opening your master page and dragging the JavaScript file from its respective folder into the master page.

For instance:

<html>
<head runat="server">
    <title></title>


    <script src="/Scripts/Test.js"></script>


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

    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server"gt;
        <div>
                    <h3>My Master page part</h3>
        <br />

            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
        </div>
    </form>
</body>
</html>

Notice how the path is referenced from the "master" page itself.

So, the JavaScript function included within the master page is defined as follows:

function myhello() {

    alert("Hello")

}

Now, even if you add a new web page (with the same master) in a nested folder:

https://i.sstatic.net/WjIi7.png

You can still use the myhello() function in your code without any issues.

For example:

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>


<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

        <asp:Button runat="server" Text="Button"
            OnClientClick="myhello();return false" />

</asp:Content>

Therefore, it's important that your script references start from the root just like the master page does.

Any page, including nested ones, can now freely utilize the myhello() function we declared in the master page regardless of their location.

However, if you want only specific pages to access certain resources on a given web page (whether with a master or not), then relative path names will come into play.

A guide on incorporating external scripts and image links into the master page of an "ASP.NET empty web site" using Visual Studio 2019

Answer №1

Similar questions

Link the Sass variable to Vue props

Deleting an List Item from an Unordered List using Angular

Guide to displaying a spherical grid helper in Three JS

Is it possible to use AJAX to target and retrieve multiple first children within an element using .children(":first-child")

What is the best way to showcase a lengthy webpage similar to that of dzone.com?

The integration of RequireJS with THREE.js Orbit Controls

How to reach the Twitter share iframe with JavaScript/HTML

Changing from system mode to dark mode or light mode

Bootstrap 4 fails to adapt on mobile devices, causing columns to pile on top of each other

How to reference an image located in one folder from a page in a different folder using React

Is combining the use of dapper and MongoDB in a single application considered best practice?

Steps to Change the Background Color to White in a Dropdown menu

Avoid the issue of text overlapping in table cell due to specified width

How come the margin-bottom is displaying as the margin-top?

Is it possible to access multiple domains within the same IIS server using the same ASPNETDB members database for login?

I'm stuck trying to figure out all the parameters for the MapsPage component in Angular 2

Use JavaScript to clear the content of the text input field

Having difficulty injecting $timeout into an AngularJS controller within the app

The background image is functioning correctly, but there seems to be an issue with the image overlay

What is the best method for retrieving logs from one Cloud Function to another?