I need help, i need someone to explain in the most basic way possible so i, a dummy can understand what environment variables are and ho they affect my code. i noticed that when i remove some classes with the environment include or exclude tags it affects my web app performance.
<environment exclude="Development">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-
bootstrap/4.1.3/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-
value="absolute"
crossorigin="anonymous"
integrity="sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE="/>
</environment>
<environment include="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
</environment>
<environment exclude="Development">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-
bootstrap/4.1.3/js/bootstrap.bundle.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
crossorigin="anonymous"
integrity="sha256-E/V4cWE4qvAeO5MOhjtGtqDzPndRO1LBk8lJ/PR7CA4=">
</script>
</environment>
<script src="~/js/site.js" asp-append-version="true"></script>
#RenderSection("Scripts", required: false)
i don't understand at all what this means but i know if i remove it, a dropdown toggle button on my web app layout page doesn't function but if i put the above block of codes back my toggle button works but another dashboard toggle button on the same layout does not work...i have tried to check online but i don't seem to understand what anyone is saying about it .
note i used a custom layout and added my style and scripts libraries
Environment Tag Helper(<environment></environment>) is used to display content based on the application hosting environment.
For example: Whenever you are running your application in your local machine from Visual Studio IISExress, by default environment variable of the application is Development. So in this case following content will not be shown because you are telling that content inside <environment></environment> should be exclude from rendering with exclude="Development" attribute value:
<environment exclude="Development"> // This will be shown in all environment except Development
<span>Don't render this</span>
</environment>
But following content inside <environment></environment> will be shown because you are telling to render the content inside <environment></environment> with include="Development" attribute value.
<environment include="Development"> // This will be shown only in Development environment
<span>Render this</span>
</environment>
Hope it is clear to you now!
For more details: Environment Tag Helper in ASP.NET Core
Related
I want to use environment tag on my view (.NET Core 3 and VS 2019 latest update).
Just create a simple project and added the code shown below in my view (in header section), but when I run it, it loads both CSS files, why? I mean my machine has product environment variable and because of it, the code should just load the second .min.css file - not both.
I tested my machine environment when I run .exe file on my project path \bin\Debug\netcoreapp3.0 and it shows "Hosting environment: Production", then what is wrong?
<environment include="Development">
<link rel="stylesheet" href="~/css/StyleSheet1.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="~/css/StyleSheet1.min.css" asp-append-version="true" />
</environment>
In Chrome inspector:
It must not load both processed CSS and unprocessed CSS files at the same time, am I wrong?
After a day searching I found that this is a simple work to do and just needed to add some environment tags on my view, it works good but why loading both files, it's weird.
Update 1:
I have two "Development" environment variables on my code but my real environment variable name is "Production", it means CSS file on the first section should not be load anymore but it does.
On the other hand when you remove second section of my codes, I mean this:
<environment exclude="Development">
<link rel="stylesheet" href="~/css/StyleSheet1.min.css"
asp-append-version="true" />
</environment>
It must loads nothing because environment name is "Development" on my code and real environment name is "Production" and the first section of my code are saying if environment variable name is "Development" load this CSS else don't do that.
After searching a lot I found I should add a file "_ViewImports.cshtml" on my view and add this codes on it:
#using WebApplicationTest
#using WebApplicationTest.Models
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
I don't know why should I do this to handle this case but .net core team would handle by the better ways, In my mind it can be made newbie confuse.
You should try names="Development" instead of include="Development"
<environment names="Development">
<link rel="stylesheet" href="~/css/StyleSheet1.css" />
</environment>
<environment exclude="Staging,Production">
<link rel="stylesheet" href="~/css/StyleSheet1.min.css" asp-append-version="true" />
</environment>
I'm new to stackoverflow so please excuse any error.
I'm getting a PopupCalendar issue in my application using Tomahawk2, JSF 2, WAS9.
I've defined the ExtensionFilter - /faces/myExtensionResource/* and at runtime it should load in source /faces/myFacesExtensionResource/org.apache.myfaces.renderkit.html.util.MyFacesResourceLoader -> calendar.HtmlCalendarRenderer while it is pointing to javax.faces.resource
The HTML is missing this:
<link rel="stylesheet" href="/DERO_WEB/faces/myFacesExtensionResource/org.apache.myfaces.renderkit.html.util.MyFacesResourceLoader/15238805/calendar.HtmlCalendarRenderer/WH/theme.css" type="text/css" />
<link rel="stylesheet" href="/DERO_WEB/faces/myFacesExtensionResource/org.apache.myfaces.renderkit.html.util.MyFacesResourceLoader/15238805/calendar.HtmlCalendarRenderer/DB/theme.css" type="text/css" />
<script type="text/javascript" src="/DERO_WEB/faces/myFacesExtensionResource/org.apache.myfaces.renderkit.html.util.MyFacesResourceLoader/15238805/prototype.PrototypeResourceLoader/prototype.js"></script>
<script type="text/javascript" src="/DERO_WEB/faces/myFacesExtensionResource/org.apache.myfaces.renderkit.html.util.MyFacesResourceLoader/15238805/calendar.HtmlCalendarRenderer/date.js"></script>
<script type="text/javascript" src="/DERO_WEB/faces/myFacesExtensionResource/org.apache.myfaces.renderkit.html.util.MyFacesResourceLoader/15238805/calendar.HtmlCalendarRenderer/popcalendar.js">
I have tried setting com.ibm.ws.webcontainer.invokeFiltersCompatibility=true in Web Container in WAS but that has not resolved the issue. I think this parameter setting is not required in WAS 9 but still I went ahead to see if it resolves anything.
Can anyone here help?
'h:head' instead of 'head' did the trick for me and the calendar functionality started working as normal.
In ASP.Net 5 project I have a file named _ValidationScriptsPartial.cshtml by default:
<environment names="Development">
<script src="~/lib/jquery-validation/jquery.validate.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
</environment>
<environment names="Staging,Production">
<script src="//ajax.aspnetcdn.com/ajax/jquery.validation/1.11.1/jquery.validate.min.js"
asp-fallback-src="~/lib/jquery-validation/jquery.validate.js"
asp-fallback-test="window.jquery && window.jquery.validator">
</script>
<script src="//ajax.aspnetcdn.com/ajax/mvc/5.2.3/jquery.validate.unobtrusive.min.js"
asp-fallback-src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"
asp-fallback-test="window.jquery && window.jquery.validator && window.jquery.validator.unobtrusive">
</script>
</environment>
But when I need to use jquery validation, I have to add:
<script src="~/lib/jquery-validation/jquery.validate.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
below part of _layout.cshtml:
<environment names="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/lib/hammer.js/hammer.js"></script>
<script src="~/lib/bootstrap-touch-carousel/dist/js/bootstrap-touch-carousel.js">
I HAVE TO ADD SCRIPT FOR JQUERY VALIDATION HERE
</script>
</environment>
What is the purpose of _ValidationScriptsPartial.cshtml?
How is this file used in the project?
Please give me reference how to use this file?
Partial Views are meant to be used inside other views. You would not normally add the validation scripts to the _layout.cshtml since that (_layout.cshtm) is used on every page.
However, if you have a view where you need to use these scripts you just add the partial view inside the .cshtml file of your view like this:
#section Scripts {
#{await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
}
If you created a standard web project with identity using VS 2015 then you can see an example of this usage in Views/Account/Register.cshtml
For example: you have a form with one of the field "Required" validation. You submit the form.
Case 1 : when _ValidationScriptsPartial is NOT used in the cshtml page
The validation will happen but it will check if ModelState is valid or not, everytime you submit the form.
Case 2 : when _ValidationScriptsPartial is NOT used in the cshtml page
The validation will happen but it will be a client side validation and it will not perform any of the tasks in the controller or relevant method, until and unless you resolve all validation issues.
To use the file in a cshtml page,
#section Scripts
{
<partial name="_ValidationScriptsPartial" />
}
I'm experiencing a peculiar issue and I'm having trouble diagnosing it.
I am using LessJs in an ASP.NET MVC web application and the less file is not being processed and I am seeing my variables in the "F12" debug tools -- and the style is not applied as expected as a bi-product.
The markup looks like this.
#Scripts.Render("~/bundles/modernizr")
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/site.less" rel="stylesheet" />
<script src="~/Scripts/less-1.5.1.min.js" type="text/javascript"></script>
I am seeing the files correctly delivered to the browser (from Network tab)
There are NO errors in the console.
but when I inspect my element, I see this:
The styles from bootstrap.css are applied as expected.
Am I missing a step? I've used less with ASP.NET before, this one's got me stumped.
Thanks!
Solved. This issue was that the link tag that references the less files had an incorrect rel attribute. For less it should be stylesheet/less as opposed to just stylesheet, which is used for CSS.
<link href="~/Content/site.less" rel="stylesheet/less" type="text/css" />
It's been a nightmare to me before I came to know that in order to get jquery ui working in ASP.NET MVC I need to add #Scripts.Render("~/bundles/jqueryui"). Before doing so I kept getting Uncaught error: Undefined is not a function. What I did not understand was why on earth this would happen when I could see the jquery ui file in the sources when inspecting the html source. This is the _Layout.cshtml file:
<!DOCTYPE html>
<html>
<head>
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/jquery.plugins.js"></script>
<script src="~/Scripts/Helpers.js"></script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
#RenderBody()
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryui")//Added later to get it working
#RenderSection("scripts", required: false)
</body>
</html>
In my Helper.js file I have some helper functions that I usually use. One of them is applyDatetimePickerAndFormat that is called on $(document).ready(). Inside that function I have the following code:
$('.txt-date').datepicker({
showAnim: "drop",
changeMonth: true,
changeYear: true,
dateFormat: "dd.mm.yy"
});
If I omit #Scripts.Render("~/bundles/jqueryui") in the _Layout.cshtml I will get the aforementioned error. This code works perfectly with any plain html or web form. So it seems that somehow the document can't see the contents of the jquery-ui file. To make my question concrete:
When I look at the Sources of the the web page I can see jquery-ui-1.8.24.js and it's referenced in the html source. Then why can't the code find jquery-ui functions?
If every java script file has to be specified in the #Scripts.Render then why isn't there any problem with my Helper.js file?
And finally where does this ~/bundles/jqueryui path refer to?
jquery-ui depends on jquery (i.e. it must be defined after jquery) but you have duplicated your files. In the head you have included <script src="~/Scripts/jquery-1.8.2.js"></script> followed by jquery-ui. You then reload jquery at the end of the file using #Scripts.Render("~/bundles/jquery") (Its now after jquery-ui).
Delete the script in the head and it should work. I addition, I recommend you delete jquery.validate and jquery.validate.unobtrusive from the head and use #Scripts.Render("~/bundles/jqueryval") at the end of the file (before #RenderSection..). You can examine these bundles in App_Start\BundleConfig.cs file. There are numerous advantages to using bundles (see Bundling and Minification).
If you are using all these files in every page based on _Layout, you can define your own bundle to includes all files.
You need to define the strategy for your js. I recomend you ot organize your js first and after that separate it to smaller parts. One should be common for all the pages(jQuery in your case) and other scripts for validation should be included only on pages that have some editing fileds etc.
Use DRY principle and read some information about how js works. It helps me a lot some time ago and won't take a lot of time.