I have a javascript file that I have included in _ViewStart.cshtml like below but I want it to append in the end of view.
#if (!Request.Browser.IsMobileDevice)
{
<script type="text/javascript" src="#Url.Content("~/scripts/example.js")"></script>
}
There is no layout to the view if its ajax call and there are alot of views which I will have to change if there is not simple way of appending this js file in the end of view.
If you don't currently have a layout for mobiles then you could introduce a new layout:
_Layout.Mobile.cshtml:
#RenderBody()
<script type="text/javascript" src="#Url.Content("~/scripts/example.js")"></script>
MVC4 will recognise the .Mobile part of the layout name and use that for mobile devices.
And then your _ViewStart.cshtml will simply be:
#{ Layout = "~/Views/Shared/_Layout.cshtml"; }
Related
I'm working on dashaboard stats on one of my projects, and I'm using the C3js to add charts to my dashboard, and all it works fine,
but when I wanna generate a pdf of this dashboard using Rotativa Plugin and wkhtmltopdf, but it doesn't work properly, it generates a pdf with data but not showing charts.
Conf Application:
Server-Side : ASP.Net MVC5
Client-Side :Javascript, Rotativa, C3js
In my similar situation, I found that Rotiva wasn't going out and getting all my included files, and/or was taking too long.
So I decided what was vital, and put that into a "static layout" that contained everything I needed inline. This might include CSS files you need to render correctly, or javascript files that you include. If you go to those files, you can copy and paste their contents into style or script tag in this Static Layout, and now Rotativa will have those payloads without having to go and get them.
//Layout Static
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<meta charset="utf-8" />
<style type="text/css">
body {
color: white;
}
/*Whatever style info needed*/
</style>
<script type="text/javascript">
/*Whatever code needed*/
</script>
</head>
<body>
<div class="container">
#RenderBody()
</div>
</body>
</html>
I put this into a Layout that replaced my standard Layout just for the rotiva exporting views.
Then, I made a copy of the view for rotativa PDF output, where it used this static layout.
#model SomeModel
#{
ViewBag.Title = "Some Title";
Layout = "~/Views/Shared/_LayoutStatic.cshtml";
}
I created an application that based on ASP.NET Core .NET Framework.
I have a view and want to add javascript file on it and did as follow:
#{
ViewData["Title"] = "Index";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>
<script src="~/js/app.js"></script>
<input id="greet" value="Hello!" type="button"/>
I do not add to the layout template, because it is only for view specific.
The file structure looks as follow:
My problem is, when I start the application, then the javascript file app.js does not load at all, also jquery.backstretch.min.js file.
What am I doing wrong?
Javascript
In your view
#section scripts {
<script src="~/js/app.js"></script>
}
In your layout
#RenderSection("scripts", required: false)
CSS
in your view:
#section Styles {
<link href="~/Content/contact.css" rel="stylesheet" type="text/css" />
}
In your layour
#RenderSection("styles", false)
Add the script as follows:
<script type="text/javascript" src="#Url.Content("~/js/app.js")"></script>
Browsers don't understand the meaning of ~
My current structure has a layout with header, body and footer. Inside the body load a view using ajax to call for a action controller returning a Json and painting a tree view. When user click on the tree view the footer should load the detailed information. But isnt working, my guess is because the scripts section isnt render properly.
Right now the script are in the layout without bundles or anything and work ok on the Main body because I use Jquery and a Tree to load the Json data.
But in the partial View get an error. I could write a #section scripts area and copy all the script from the layout in the Partial View but why should I duplicate the code?
The worst part is only give me problem in the production enviroment ... on my devolpment enviroment works ok.
So the questions:
Why the main view can see the scripts define on the Layout but the Partial View Doesnt?
Why my development enviroment work ok, but productions doesnt?
What should I do to solve this?
EDIT: More testing.
This is a test View, this render in the Body. But I need include script section otherwise the dialog doesnt show, even when layout have the scripts too.
#{
ViewBag.Title = "TreeDetails";
}
<html>
<head>
<title>#ViewBag.Title</title>
</head>
<body>
<h2>TEST PAGE</h2>
<script>
// Your code goes here.
$(document).ready(function () {
console.log("before dialog");
$("#dialog").dialog();
console.log("after dialog");
})
</script>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>
#section scripts {
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
}
It seems a run time error due to an unrecognized jquery function.. try to move your link reference to jquery from your view #section area in the layout header..
Simple question: I want to place some Javascript in my view. I have defined a section in my _Layout:
<head>
#RenderSection("Javascript",required:false)
</head>
and on the bottom of my view I have placed:
#section Javascript{
<script type="text/javascript">
$(document).ready(function() {
$('.collapse').on('shown.bs.collapse', function() {
$(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
}).on('hidden.bs.collapse', function() {
$(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});
});
</script>
}
This does not render in my view. What am I missing?
EDIT:
I moved the #RenderSection to the body section of the _Layout page and still did not work. I then took the Javascript and directly injected into the body section of the _Layout and now works? Am I missing another setting for #RenderSection to work?
Put #RenderSection("Javascript",required: false) right before </body> in your _Layout file and it should work.
Edit:
Make sure you have a file called _ViewStart.cshtml in your Views folder that contains
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
If you don't. Make sure Layout = "~/Views/Shared/_Layout.cshtml"; is written in your view file.
i thing i put something wrong here sorry for that if you confused.
i want to put Javascript or Css in the Head of my page [who is render in browser].
when i try to put them then i found that he inside of Body not inside of head tag.
i know that i can easily put in head if i not inherit them from master page.
but how i can put on my page if i inherit them from master page.
i want a sollution for MVC 3 project and my page is written using Razor viewenzine.
In the head section of your layout page, add a
RenderSection("head")
call. Then, in your Razor view, add
#section head {
#myincludemarkup
}
Where "myincludemarkup" of course is the html markup of your script/stylesheet references.
edit:
The section in your layout page (master page) could look something like this:
<head>
#RenderSection("head")
</head>
This would force each and everyone of your views to define a section called "head" by writing the code at the top of my answer, #section etc.
If you want the section optional in your viewpages, you can write
<head>
#RenderSection("head", optional:true)
</head>
Use this page for reference:
http://weblogs.asp.net/scottgu/archive/2010/07/02/introducing-razor.aspx
edit: to use your own code:
#inherits System.Web.Mvc.WebViewPage<dynamic>
#using Razor
#using Razor.Models
#{
View.Title = "Index";
LayoutPage = "~/Views/Shared/_Layout.cshtml";
}
<h2>#View.Message</h2>
#{
UserManager.product prod = UserManager.getUserinfo();
}
#prod.Price
#prod.Title
#prod.ID
<h2></h2>
#section head {
#myincludemarkup
}
Place a content area in the head section. Then you can add code there in any content page.