30050

how to refere CSS in CSHTML file?

How can I apply/put external or extra <script> references and CSS <link> in my Razor content/child pages?

@model Portal.Common.Models.TempModel @{ ViewBag.Title = "asdasd"; ViewBag.MissionId = id; ViewBag.id = 0; Layout = "~/Views/Shared/_Layout.cshtml"; } @if (false) { <script src="../../Scripts/jquery-1.7.1-vsdoc.js" type="text/javascript"></script> <link href="../../Content/Site.css" rel="stylesheet" type="text/css" /> <script src="...../ui/jquery.ui.mouse.js"></script> <script src="...../ui/jquery.ui.draggable.js"></script> } <style type="text/css"> img[src*="iws3.png"] { display: none; } @section JavaScript { <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"></script> "

Answer1:

In your _Layout you could have 2 sections: one for the scripts and one for the styles:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>@ViewBag.Title</title> @RenderSection("Styles", false) </script> </head> <body> @RenderBody() @RenderSection("Scripts", false) </body> </html>

and then in your view override the sections you want:

@model Portal.Common.Models.TempModel @{ ViewBag.Title = "asdasd"; ViewBag.MissionId = id; ViewBag.id = 0; Layout = "~/Views/Shared/_Layout.cshtml"; } @section Styles { <!-- main CSS --> <link href="@Url.Content("~/Content/Site.css)" rel="stylesheet" type="text/css" /> <!-- some external CSS --> <link href="http://www.example.com/foo.css" rel="stylesheet" type="text/css" /> <!-- some inline CSS --> <style type="text/css"> img[src*="iws3.png"] { display: none; } </style> } @section Scripts { <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script src="@Url.Content("~/ui/jquery.ui.mouse.js")></script> <script src="@Url.Content("~/ui/jquery.ui.draggable.js")></script> <script type="text/javascript"> // some inline javascript </script> }

Answer2:

Another way, It's useful while same css and script files are referenced from different cshtml files and you are not using a default layout. Create a partial view(let _Reference.cshtml) in shared folder and add the following for raw output :

@Html.Raw("<link href='../../Content/Site.css' rel='stylesheet'>") ..... @Html.Raw("<script src='../../Scripts/jquery-1.5.1.min.js'></script>")

Now in the head tag of your referencing cshtml, add this :

<head> <title>MVC Test</title> @Html.Partial("_Reference") </head>

Hope this will help someone.

Recommend

  • GET http://localhost/Roles/Create 500 (Internal Server Error) [closed]
  • Add items in listbox in view when button is clicked
  • How can jQuery DataTables be applied to AJAX rendered partial view in MVC4?
  • Using the jquery datepicker in ASP.Net MVC3 projects
  • Use Hidden field in syncfusion column chart series
  • Gradle test fails with NullPointerException
  • Model binder ValueProvider appends to the existing value + MVC 4
  • Recursion in ASP.NET Core Razor views
  • MVC extension method error
  • Is there a chance to get -splash: work for SWT applications that require -XstartOnFirstThread?
  • how to make vpython .exe using pyinstaller
  • How to change the default configuration files used in bootstrapping of reactJs through npm
  • Is there any way of quickening monkeyrunner script execution?
  • Most efficient way to replace lowest list values in dataframe in R
  • py4j.protocol.Py4JJavaError when selecting nested column in dataframe using select statetment
  • python: forcing relative imports to search from script file
  • Less Conflicting Session Manager for Zope 2
  • Python 3.2.2, error(scripts to exe)
  • Jenkins Grails plugin does not list lastest versions of Grails
  • How to pass a value from ASP.NET MVC controller to ASP.NET webforms control inside MVC View?
  • Ubuntu and bcrypt
  • Test if a set exists before trying to drop it
  • req.body is undefined - nodejs
  • Modifying destination and filename of gulp-svg-sprite
  • MySQL WHERE-condition in procedure ignored
  • Importing jscolor library in angular 2
  • jQuery tmpl and DataLink beta
  • Web-crawler for facebook in python
  • jqPlot EnhancedLegendRenderer plugin does not toggle series for Pie charts
  • How to disable jQuery.jplayer autoplay?
  • trying to dynamically update Highchart column chart but series undefined
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • Angular 2 constructor injection vs direct access
  • How do I configure my settings file to work with unit tests?
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • Append folder name and increment by 1 using batch script
  • Binding checkboxes to object values in AngularJs
  • java string with new operator and a literal