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>
Related
I have a base layout which contains following:
#section('javascripts')
<script src="<?php echo asset('js/all.js') ?>"></script>
#endsection
In my child template I have following:
#extends('layouts.master')
<!-- some other html code -->
#section('javascripts')
#parent
<!-- some local scripts -->
<script>
$(function() { console.log('test'); });
</script>
#endsection
My javascripts from both parent and child are not loading at all.
However, following works:
Base layout:
<!-- load main scripts -->
<script src="<?php echo asset('js/all.js') ?>"></script>
#yield('javascripts')
Child template:
#extends('layouts.master')
<!-- some other html code -->
#section('javascripts')
<!-- some local scripts -->
<script>
$(function() { console.log('test'); });
</script>
#endsection
It's true that you can use stacks but for your question, you are not closing the section correctly. Instead of #endsection you have to use #show at your base layout.
#section('javascripts')
<script src="<?php echo asset('js/all.js') ?>"></script>
#show
You can better use the #stack and #push structures here I think. This would look like this
In your parent template you can add a #stack tag where you would like to see your javascript code like this
<head>
<title>My website</title>
#stack('scripts')
</head>
Then in your child template you will use the #push tag it will look like this.
#push('scripts')
<script>
$(function() { console.log('test'); });
</script>
#endpush
This will push your javascript from the child template to the stack of the parent template in.
I found a topic on laracasts where it is explained.
https://laracasts.com/discuss/channels/general-discussion/blade-push-and-stack-are-they-here-to-stay
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 am trying to use tablesorter.js with DocPad. I have added the required lines to docpad.coffee to load the css and js for the tablesorter, and I have added the call to tablesorter() in the page where I have the the table I want to sort.
However, the resulting tables do not sort properly for two reasons: All scripts are deferred (defer="defer") and the call to tablesorter() appears before the scripts are loaded, like this:
</tbody></table></p>
<script>
$(document).ready(function(){$("#mytable").tablesorter();})
</script></div>
</article>
...
<!-- Scripts -->
<script defer="defer" src="/vendor/jquery/1.10.2/jquery.min.js"></script>
<script defer="defer" src="/vendor/jquery/tablesorter/jquery.tablesorter.js"></script>
<script defer="defer" src="/vendor/modernizr/2.6.2/modernizr.min.js"></script>
<script defer="defer" src="/vendor/twitter-bootstrap/dist/js/bootstrap.min.js"></script>
<script defer="defer" src="/scripts/script.js"></script>
</body>
If I delete the defer stuff and move the tablesorter() call down, it works fine:
<!-- Scripts -->
<script src="/vendor/jquery/1.10.2/jquery.min.js"></script>
<script src="/vendor/jquery/tablesorter/jquery.tablesorter.js"></script>
<script src="/vendor/modernizr/2.6.2/modernizr.min.js"></script>
<script src="/vendor/twitter-bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/scripts/script.js"></script>
<script>
$(document).ready(function(){$("#mytable").tablesorter();})
</script>
</body>
I need to get rid of the defer setting and I need to call tablesorter() after the scripts have been loaded. How can I do this in DocPad 6.59.6?
I found a fix and a workaround to get tablesorter working.
The sequence issue: In order to load all Javascript before the call
to tablesorter(), I moved the scripts section in the default layout
(src/layouts/default.html.eco) to be loaded as part of the <head/>,
not as the lats part of the <body/> as it originally was.
The defer issue: I couldn't figure out how to modify Docpad's
#getBlock('scripts') to not include the defer="defer" setting.
The workaround was then to not use getBlock and instead just
hardcode the references to the script files.
In summary, going from this:
<html>
...
<body>
...
<%- #getBlock('scripts')...
</body>
</html>
to this:
<html>
<head>
...
<script src="/vendor/jquery/...
...
</head>
<body>
...
</body>
</html>
fixed the problem. I now have a maintenance problem that I have to maintain the list of scripts within the layout (instead of using the scripts: section in docpad.coffee); I can live with that.
I cannot get jQuery UI working in my ASP.NET MVC4 application. I tried dialog and datepicker.
Here is part of the code of my view.
<link href="../../Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
alert('A');
//$('#datepicker').val('test');
$('#datepicker').datepicker();
alert('B');
});
</script>
<h1>Test</h1>
<form id="testForm" action="#" method="get">
<input type="text" id="datepicker" name="datepicker" class="datepicker" />
</form>
The alert A is displayed. When I uncomment the next row, the value test is assigned. But datepicker is not working and alert B does not display.
Thanks,
Petr
In the layout.cshtml view, move
#Scripts.Render("~/bundles/jquery")
from body to head and add in head too
#Scripts.Render("~/bundles/jqueryui")
I spent lots of time to figure out how to make it working.
Finally the steps are following:
Create ASP .NET MVC4 project Internet Application.
Clean some of the last lines of the _Layout.cshtml so it should look like this
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© #DateTime.Now.Year - My ASP.NET MVC Application</p>
</div>
</div>
</footer>
#RenderSection("scripts", required: false)
Change header like I did here
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - My ASP.NET MVC Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
#Styles.Render("~/Content/themes/base/css")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryui")
#Scripts.Render("~/bundles/modernizr")
<script type="text/javascript">
$(document).ready(function () {
// We will test DataPicker
$('#datep').datepicker();
// We will test TABS
$(function () {
$("#tabs").tabs();
});
});
</script>
</head>
Delete all code after #section featured { section and add some html to Home/Index.cshtml
A. Put some code from the view source link of http://jqueryui.com/tabs/ page (It is inside of < div id="tabs" > ... < div >)
B. Add this
< div >
Date: < input id="datep" type="text" / >
< / div >
DONE!!!
Your code runs just fine in a fiddle: http://jsfiddle.net/m3QFL/
Check the console for errors and the path to your scripts. Chrome includes a console to help with js debugging or you can run FireFox and FireBug.
Either one will go a long way in helping you solve issues like this.
Also, hosted versions of jquery and jquery ui are available through jquery and jquery ui or Google. Here are yours:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
jquery ui has links at the bottom of their homepage to their hosted versions.
BTW, the // instead of http:// allows the script to pick up the http prefix from the site. If you are on ssl it will pick up the https:// so you don't have secure and non-secure items on your page.
You will need to add a couple lines to your _Layout.cshtml to get jQuery UI working out of the box. First is the javascript bundle:
#*you should already have this line*#
#Scripts.Render("~/bundles/jquery")
#*add this line*#
#Scripts.Render("~/bundles/jqueryui")
Next you need the CSS for jQuery UI as well:
#*you should already have this line*#
#Styles.Render("~/Content/css")
#*add this line*#
#Styles.Render("~/Content/themes/base/css")
I'm trying to create simple Ajax call, but after clicking the link I get a blank page with "Test" string in top left corner:
In my Details view I have:
#Ajax.ActionLink("test", "AddPositive", new AjaxOptions() { UpdateTargetId = "countDiv" })
<div id="countDiv">
</div>
In controller:
public string AddPositive()
{
String test = "Test";
return (test);
}
Action does get called.
In _Layout.cshtml I imported.
<script src="#Url.Content("/Scripts/MicrosoftMvcAjax.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>
It's probably something really simple, but still cannot figure it out after going trough a few beginners tutorials for Ajax. Appreciate any help, thanks!
<script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
You are missing jquery and jquery.unobtrusive-ajax file.
Either there i bug in MicrosoftMvcAjax.js or M.S. has forgot to mention these files on their Tutorial. I hardly use this feature (#Ajax.ActionLink) so its tough for me figure out why it didnt worked without jQuery files.
You want to import two different .js files like so:
<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
Also, I could be wrong, but doesn't your Action need to return an ActionResult?