CODEWITHSUNDEEP
javascripthtmlcssasp.net-mvc
Anup Sharma
Anup Sharma

Reputation: 2083

How to remove reference of specific CSS files files from View

I have many JavaScript Files and CSS Files referenced in the Layout file. Now I have a couple of views which are referencing some custom libraries which are interfering with the existing CSS files. So my question is can I somehow remove those references from these two views only or not allow them to load at all in the said views.

Upvotes: 0

Views: 954

Answers (2)

Shyju
Shyju

Reputation: 218732

What you can do is, create a custom css file which overrides the existing styles from your regular (ex : bootstrap) css file. You can include this css files conditionally after your regular css styles in the views you want.

You may also use the !important attribute to explicitly override the values as needed.

So in your layout, add a new Section called CustomStyles

<head>
 <!-- Existing css include goes heree -->
    @RenderSection("CustomStyles", required: false)
</head>

And in your specific view, you can simply include the custom css file

@section CustomStyles
{
    <link href="~/MyCustomCss.css" rel="stylesheet">
}

EDIT : As per the comment.

If you are ok to completely ignore the specific css files in some views, you can update your Layout to conditionally include/exclude those.

So in your layout

<head>
@if (ViewBag.IncludeBootStrap == null|| (bool) ViewBag.IncludeBootStrap !=false)
{
    <link href="~/Content/css/bootstrap.min.css" rel="stylesheet" />
}
</head>

And in the view's in which you do not want to load this css file, Set the ViewBag.IncludeBootStrap value to false.

@{
    ViewBag.IncludeBootStrap = false;
}
<h1>This view will not use bootstrap styles</h1>

Upvotes: 1

Edison Biba
Edison Biba

Reputation: 4423

Give an id to the tag.

<link rel="stylesheet" href="style1.css" id="style1" />
<link rel="stylesheet" href="style2.css" id="style2" />

And use this code: You can use whatever event you want or just use the code without an event it's your choice

$("#A").click(function(){
    $("#style1").attr("disabled", "disabled");
});

Note: While there is no disabled attribute in the HTML standard, there is a disabled attribute on the HTMLLinkElement DOM object.

The use of disabled as an HTML attribute is non-standard and only used by some Microsoft browsers. Do not use it. To achieve a similar effect, use one of the following techniques:

If the disabled attribute has been added directly to the element on the page, do not include the <link> element instead;

Set the disabled property of the DOM object via scripting.

Upvotes: 1

Related Questions