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.
Related
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 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 am using requireJS for my hybrid app . Now I need to change the script tag located into my layout page with conditions on url . The script tag looks something like this
<script data-main="#Url.Content("~/Scripts/main")" src="#Url.Content("~/Scripts/Libs/Requirejs/require.min.js")" type="text/javascript"></script>
Now when the page loads the /Home/Login the script tag above should be changed to
<script data-main="#Url.Content("~/Scripts/login")" src="#Url.Content("~/Scripts/Libs/Requirejs/require.min.js")" type="text/javascript"></script>
Again when I load the page /Mail/Index The script tag above should change to
<script data-main="#Url.Content("~/Scripts/mail")" src="#Url.Content("~/Scripts/Libs/Requirejs/require.min.js")" type="text/javascript"></script>
Now Note that All of the three pages uses the same **_Layout.cshtml** page . And the above script tag is located in **_Layout.cshtml** page only .Now how do I track this scripts to change the script tag on change of the Url routing as mentioned above ?
I'd simply use a section for this. In the layout page:
#RenderSection("RequireScripts")
And put the script in each page:
#section RequireScripts {
<script data-main="#Url.Content("~/Scripts/main")" src="#Url.Content("~/Scripts/Libs/Requirejs/require.min.js")" type="text/javascript"></script>
}
If you're after a way to avoid re-writing the whole thing (only requiring the relative path), then I suppose you could make use of the dynamic Page variable:
#if (Page.RequireScript != null)
{
<script src='~/Scripts/#Page.RequireScript'></script>
}
Then the script block would get output to pages that define RequireScript.
#{
Page.RequireScript = "Libs/Requirejs/require.min.js";
}