#{
ViewBag.Title = "Home Page";
SquishIt.JavaScript.Add(
Url.Content("~/Scripts/jquery_ui.js"),
Url.Content("~/Scripts/jquery_1.4.4.js")
);
}
#SquishIt.JavaScript.Render(Url.Content("~/Scripts/min.js"))
It shows like this:
<script type="text/javascript" src="/Scripts/jquery_ui.js"></script>`
<script type="text/javascript" src="/Scripts/jquery_1.4.4.js"></script>`
Where is "min.js"?
The two js files are not combine into one js named min.js?
Thanks!
To help with debugging, SquishIt does not do anything to the files when in debug mode.
However, you can add a .ForceRelease() call before the .Render(...) call to force it to combine the files as if it's in release mode:
#SquishIt.JavaScript.ForceRelease().Render(Url.Content("~/Scripts/min.js"))
Do you have debug="true" in web.config? It must be set to "false" for squishit to work: http://www.codethinked.com/squishit-the-friendly-aspnet-javascript-and-css-squisher
Related
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" />
}
In previous versions of Razor I would conditionally load minified/debug versions of scripts by rendering a partial view that looked something like this:
#if (Context.IsDebuggingEnabled)
{
<script src="~/debug.js"></script>
}
else
{
<script src="~/release.js"></script>
}
If MVC6, vNext, VS2015, or whatever you call it :) I don't know how to accomplish this. Anyone know how?
In MVC6, you can use the environment tag helper to load different versions of scripts depending for Development vs Production environments. This is based on the value of the value of the ASPNET_ENV environment variable.
<environment names="Development">
<script src="~/debug.js"></script>
</environment>
<environment names="Staging,Production">
<script src="~/release.js"></script>
</environment>
Bundling and minification would be handled using a task like Gulp or Grunt.
I have outlined the new approach in detail here:
http://www.davepaquette.com/archive/2015/05/05/web-optimization-development-and-production-in-asp-net-mvc6.aspx
A bit old, but you could just create a ViewBag (or session object) in your controller and pass it to a ViewBag like this
#if DEBUG
ViewBag.IsDebug = true;
#endif
Then in your view:
#if (ViewBag.IsDebug)
{
<script src="~/debug.js"></script>
}
else
{
<script src="~/release.js"></script>
}
You can use the bundling in asp.net mvc
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.
I have few questions on partials and overriding templates.
For that i used the following folder structure.
projectRoot
dust-core-0.6.0.min.js
jquery.js
test.html
partial.tl
main_without_override.tl
The content of partial.tl:
{+greeting} Hola {/greeting}
{+world} World {/world}
The content of main_without_override.tl:
{>partial/}
The content of test.html:
<!DOCTYPE html>
<html>
<head>
<script src="dust-core-0.6.0.min.js" type="text/javascript"></script>
<script src="jq.js" type="text/javascript"></script>
</head>
<body>
</body>
<script>
$.get('main_without_override.tl', function(){
console.log(arguments);
})
</script>
</html>
In the index.html when i try to get the main_without_override.tl its saying 404. But im sure that the file is there. The path that firebug is showing is correct.But browser says 404.
I want to know
How to get this main_without_override.tl
Apply templating for main_without_override.tl and render in the browser.
I searched in google most of the examples give only the syntax. Can somebody help me in rendering the main_without_override.tl template.
In order to compile templates on the client (which is probably not a really good idea), you need to include dust-full instead of dust-core. This is because dust-core does not include the Dust compiler.
The reason that compiling templates on the client is probably not a good idea is that Dust compiles to JavaScript and as #monshi mentioned, you can compile the templates and then serve them as JavaScript. It is possible to get .tl files through AJAX if you include dust-full, but it is a better idea to compile that template beforehand and then make a dynamic request for that .js file when you need.
You can include your dust template as a JavaScript file by using <script> tag, but you need to compile it first, which is explained here
Then add following templates (scripts) to test.html:
<script type="text/javascript" src="partial.js"></script>
<script type="text/javascript" src="main_without_override.js"></script>
And in you JavaScript render the template by dust.render method:
dust.render('main_without_override', your_json_object, function(err, out){
your_dom_element.innerHTML = out;
});
Related question:
how to use dustjs-linkedin as client side templating?
I want to include a javascript reference like:
<script src="#Url.Content("~/Scripts/jqueryFoo.js")" type="text/javascript"></script>
If I have a Razor View, what is the proper way to include this without having to add it to the Layout (I only need it in a single specific View, not all of them)
In aspx, we could use content place holders.. I found older examples using aspx in mvc but not Razor view..
Depending how you want to implement it (if there was a specific location you wanted the scripts) you could implement a #section within your _Layout which would enable you to add additional scripts from the view itself, while still retaining structure. e.g.
_Layout
<!DOCTYPE html>
<html>
<head>
<title>...</title>
<script src="#Url.Content("~/Scripts/jquery.min.js")"></script>
#RenderSection("Scripts",false/*required*/)
</head>
<body>
#RenderBody()
</body>
</html>
View
#model MyNamespace.ViewModels.WhateverViewModel
#section Scripts
{
<script src="#Url.Content("~/Scripts/jqueryFoo.js")"></script>
}
Otherwise, what you have is fine. If you don't mind it being "inline" with the view that was output, you can place the <script> declaration within the view.
If you are using Razor view engine then edit the _Layout.cshtml file. Move the #Scripts.Render("~/bundles/jquery") present in footer to the header section and write the javascript / jquery code as you want:
#Scripts.Render("~/bundles/jquery")
<script type="text/javascript">
$(document).ready(function () {
var divLength = $('div').length;
alert(divLength);
});
</script>
You can add the script tags like how we use in the asp.net while doing client side validations like below.
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<script type="text/javascript" src="~/Scripts/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function () {
//Your code
});
</script>
You should add datatable.js script on defer="defer"
<script src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js" defer="defer"></script>