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.
Related
I learned that it is recommended to load jQuery at the end of the page (aka footer)
I am currently experimenting with the Scaffold template from the MVC project.
Now, my scenario is that I have a _Layout where jQuery/script/bootstrap are loaded in the footer.
Says I have a view called "Index.cshtml" that will use _Layout.cshtml as layout.
And inside "Index.cshtml", I am just having something as simple as this:
<script>
$(document).ready(function () {
$('#test').on('click', function (e) {
alert("hey");
});
});
</script>
<button id="test">test</button>
My questions is:
I want to bind event to the button using jQuery. How can i call $(document).ready... inside "Index.cshtml" so I can achieve this in the most efficient way? (since the jQuery is loaded later on at the footer and I want to write my code in the corresponding page instead of in a shared page like _Layout.cshtml). I was thinking to load jQuery in the view, but that would make it a duplicate load wouldn't it?
Solution
In case anyone ran in the the same question like me, please check out Robert's answer below.
Basically the Scaffold template of ASP MVC .Net Core defined a #Section named "Scripts". Therefore, if we define that Script in our View, it will be loaded into the footer of _Layout right after the scripts for jquery/js are loaded.
There are a few ways, but why not give the script section a try?
#section Scripts {
<script type="text/javascript" src="/scripts/main.js"></script>
}
Source: https://learn.microsoft.com/en-us/aspnet/core/mvc/views/layout?view=aspnetcore-3.0
Or in your case:
#section Scripts {
<script>
$(document).ready(function () {
$('#test').on('click', function (e) {
alert("hey");
});
});
</script>
}
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..
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"; }
I wanted to add a cusotm Script inside my partial view,the partial view will be retrieved when a user click on a paging link, but since I have included all the Jquery files inside a bundle that is referenced only inside a Script section as follow:-
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
So when I directly wrote a Script inside a partial view I got an error that Jquery is not defined , so I found a solution to directly reference the jquery file inside my partial view before ; my custom script and also before the #model IPagedList<TMS.Models.TMSServer>statement as follow:-
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#DCSort").click(function () {
//code goes here
</script>
#model IPagedList<TMS.Models.TMSServer>
<div id ="ServerTable">
So I have the following two questions:-
Is it right to directly include a refeecne to jquery insdie my partial view?
Can I write the refeecne to dynamically determine the jquery version such as <scriptsrc="~/Scripts/jquery-{version}.js">` ?
Thanks
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.