Combine JavaScript and CSS in an ASP.NET website, not a web application

I have the following set up:

There is a Class named BundleConfig located in the App_Code Folder

Imports System.Web.Optimization

Public Class BundleConfig
  Public Shared Sub RegisterBundles(bundles As BundleCollection)

    bundles.Add(New ScriptBundle("~/bundles/WerbFormsJs").Include(
                "~/js/Global.min.js",
                "~/js/bootstrp.min.js"
    ))


   End Sub
End Class

Next, in the Global.asax file

Sub Application_Start(ByVal sender As Object, ByVal e As EventArgs)
        ' Code that runs on application startup

        BundleConfig.RegisterBundles(BundleTable.Bundles)
    End Sub

Lastly, the Header User Control used on all pages has the following snippet

<asp:PlaceHolder runat="server">        
         <%: Scripts.Render("~/bundles/WerbFormsJs") %>          
</asp:PlaceHolder>

However, I am facing Build Errors with Scripts - 'Scripts' is not declared. It may be inaccessible due to its protection level.

To address this issue, I also included the following code in the Web.config file

<pages>
  <namespaces>
    <add namespace="System.Web.Optimization" />
  </namespaces>
</pages>

Answer №1

I encountered an issue where I had to fully qualify the Scripts.Render with a little tweak. Here is how I managed to fix it:

 <%: Optimization.Scripts.Render("~/bundles/WerbFormsJs") %>   

Glad to report that the problem has been successfully resolved.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is preventing the input box from shrinking further?

I created a search box using CSS grid that is supposed to shrink when the page is resized. However, it doesn't seem to shrink as much as I expected it to. Here is how it appears when fully extended: https://i.stack.imgur.com/tPuCg.png And here is how ...

Applying Bootstrap's inline styling to adjust the width of a label

I'm having trouble adjusting the width of a Bootstrap label using inline styles. Here is my code: <td><span class="label label-info" style="width:30px; text-align:center; background-color:#6d8cbf"> TEXT </span></td> Unfort ...

Refresh tab content when the tab is clicked or changed using AJAX technology

I have implemented a cool tab strip with 3 tabs on my website. Each time a tab is selected, it triggers a postback event and I have defined a TabClick event to handle this. In this event, I specifically check if the 2nd tab is selected and then refresh the ...

Is there a way to streamline routine tasks in C# when utilizing Selenium 2 with Webforms?

Our company has been utilizing Selenium 2 for automating testing with Webforms and MVC. Due to frequently changing control IDs in Webforms, we find ourselves heavily relying on xpath for even the simplest tasks. Examples of our xpath usage include: driver ...

Removing vacant rows from a table using Jquery in asp.net mvc

In my partial view, I am using BeginCollectionItem to manage the code. <tr> @using (Html.BeginCollectionItem("QuoteLines")) { <td> @Html.HiddenFor(m => m.QuoteID) @Html.HiddenFor(m => m.QuoteLineID) </td> ...

Update Button Visibility Based on State Change in ReactJS

Currently, I'm utilizing a Material UI button within my React application. Despite changing the state, the button remains visible on the screen. Here's the relevant code snippet: function MainPage() { const state = useSelector(state => sta ...

"Encountered difficulty in retrieving the width of an element upon refreshing the

I have come across a puzzling situation with my code that involves determining the width of a block element. Here is an excerpt from the code snippet: //get the largest block: if no block, apply to first block var previous = $('.block-grid .block-gr ...

What is the ideal location for storing my CSS files?

I have a medium-sized website that shares a common header/footer, and each page has its own specific layout file. The common header/footer is stored in a separate html file, but I am struggling with where to place the CSS file because the link element in f ...

Is there a way to eliminate this from the footer section?

Check out my website: If the text is not visible, try using a larger monitor or zooming out in your browser. I've added an image to help explain: I only want to remove that element + title on the first page This is the HTML code: <div id="to ...

Applying jQuery to target a specific class and manipulate its CSS attributes

My portfolio is designed so that potential employers can easily view samples of my work in specific programming languages. For example, if they are interested in seeing projects involving PHP only, they simply tick the PHP box and all relevant samples will ...

Is there a way to permanently position the carousel-caption in bootstrap4?

Looking for a solution to keep the carousel caption fixed when changing carousel images and to use a nav-tab in conjunction with the carousel. Is there a way to achieve this or a method to fix the nav-tab on the carousel? Thank you! ...

Adjusting the width of a DataBound column in an ASP.NET GridView

One of the challenges I'm facing is trying to set a maximum width for my UserInfo column in a GridView that utilizes BoundField for its columns. No matter how many different approaches I've attempted, none seem to have worked so far. Below is th ...

Building a loading bar using dots

<span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot">< ...

Adjusting the visibility leads to modification of the font size

My iPhone seems to be the only device affected by this issue. Every time I toggle the visibility of an element, it results in a different font size. The problem only arises when I show and hide multiple elements within the "Show All" section. <style& ...

A website with two distinct pages, where only the first page is refreshed

I have split the content of my HTML page into 2 separate subpages, based on the references provided below: Multiple distinct pages in one HTML file This is how my code is structured: ... <script> function show(shown, hidden) { document.getEle ...

Directional CSS box-shadow styling

I need to create a design that features cascading shadows. Here's my attempt: box-shadow: -6px 0px 10px #514E49 However, the shadow appears in the opposite direction. Adjusting the h-shadow parameter to 6px results in the shadow only being visible ...

Adjusting diagram size based on screen width using Bootstrap and jQuery

I recently created a diagram that adjusts its size according to the screen width. However, when I implemented this code on my page, I encountered an issue where the final circle or glyph would drop to the next line instead of staying on the same line as in ...

Ways to rotate SVG images exclusively upon clicking

After experimenting with rotating SVG images on my navbar buttons, I encountered an issue. Whenever I click one button, all the images rotate simultaneously. Additionally, clicking elsewhere does not reset the images to their original positions. This is t ...

"Enhance the appearance of bootstrap buttons by applying CSS to add shadow and border when the

Working on a frontend project using the React framework and Bootstrap 5.3 for design. Noticing that shadows are deactivated in Bootstrap by default, which means buttons don't display shadows when active as per the Bootstrap v5.0 documentation. Link ...

The varying website layouts across different devices

I recently encountered an issue while working on my WordPress website. When I view the page, some features behave differently than expected. One example is a banner that moves in and out based on scroll position (using jQuery Waypoints). Interestingly, whe ...