I am new to asp.net. I have to use
#section Scripts{}
but it does not work.
Keep in mind that I adjusted the below code in layout page:
#RenderSection("scripts", required: false)
I read similar posts. But I still couldn't fix my problem.
Is there any other way I can use it?
It should be #section Scripts {} as opposed to #script Scripts{}
section allows you to add something in a view which will be added in the layout.
view
#section scripts {
<script>
alert('hello world');
</script>
}
layout
#RenderSection("scripts", false)
this named section scripts will be rendered wherever specified in layout.
#RenderSection also has 2 signatures:-
public HelperResult RenderSection(string name)
public HelperResult RenderSection(string name, bool required)
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>
}
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.
What is the difference between the following 2 Javascripts? I can use the second form of Javascript in Razor engine MVC pages without any issues, so what is the benefit of using the first form?
MVC style
#section Scripts {
function check()
{
//do some validation logic here
}
}
WebForms style
<script type="text/javascript">
function check()
{
//do some validation logic here
}
</script>
The #section Scripts doesn't produce any output in the page on its own, you need to render the section somewhere. When you use it, there is a RenderSection call somewhere, like this:
<script type="text/javascript">
#RenderSection('Scripts')
</script>
The fact that the section is named Scripts doesn't have any relevance, it's just a convention that is used for sections that contain scripts.
#section Scripts { is acting like place holder for your scripts. In your layout page you would include the following
<!DOCTYPE html>
<html>
<head>
....
</head>
<body>
// common html for all pages based on this layout
#RenderSection("scripts", required: false)
</body>
This is saying, that if the page includes the section Scripts, then render it here. So your page that uses this layout might have the following
#section scripts {
#Scripts.Render("~/bundles/jqueryval")
<script src="../../Scripts/YourScript.js" type="text/javascript"></script>
<script type="text/javascript">
$('#SomeElement').click(function() {
// do something
});
</script>
}
and #RenderSection("scripts", required: false) would be replaced by whats in the #section scripts {
This may work, but won't be ideal for one reason:
#section Scripts {
function check()
{
//do some validation logic here
}
}
Will cause you to lose intellisense. It may work, but will make life more difficult. It's often best to include the script tag:
#section Scripts {
<script type="text/javascript">
function check()
{
//do some validation logic here
}
</script>
}
Also #section scripts renders where a #RenderSection("Scripts") is defined in the master page. Without it, it renders EXACTLY where the script tag you have (in your WebForms example).
In a partial view I load a javascript file like this :
<script src="#Url.Content("~/Scripts/Testing.js")" type="text/javascript"></script>
In the Testing.js, there are some functons defined
That's work, the functions defined in the file can be used.
Now I do an action in my application, my controller return an another (where I don't load any js file) partial view. The functions defined in Testing.js are still available in this partial view.
Is there a way to "remove" the functions loaded in the first view ?
Thanks,
Update 1
I tried this in the partial view but error :
The file "~/Views/xxxx.cshtml" cannot be requested directly because it calls the "RenderSection" method.
#section MyScript {
<script src="#Url.Content("~/Scripts/Testing.js")" type="text/javascript"></script>
}
#RenderSection("MyScript", false)
You should avoid referencing any scripts in partials. You could define a section in your Layout, for example just before the closing </body> which will allow for views to include some custom scripts:
<script type="text/javascript" src="#Url.Content("~/scripts/some_common_script_that_will_be_used_by_all_views_such_as_jquery_for_example")"></script>
#RenderSection("scripts", false)
</body>
</html>
and then in the view (not in the partial view) override this section to include any scripts that this view might need:
#section scripts {
<script src="#Url.Content("~/Scripts/Testing.js")" type="text/javascript"></script>
}
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.