I trying to study .net core with a test project.
In this project there is a user javascript javascript file called "booklist.js" that call some functions like edit and delete button.
For some strange think any modifications of this file don't do any effect.
After delete this file, the project continue to work.
But if i disable these lines:
#section Scripts{
<script src="~/js/bookList.js"></script>
}
on the view page the project not read the data.
I'am new with MVC and I don't have any idea about.
Can you help me please ?
Thanks !
One of the reasons of this issue could be browser caching the old js in file, as a solution is to append a parameter to your js source like a timestamp
Then your js tag becomes:
<script type="text/javascript" language="javascript">
var versionUpdate = (new Date()).getTime();
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "~/js/bookList.js?v=" + versionUpdate;
document.body.appendChild(script);
</script>
Reference: https://www.c-sharpcorner.com/article/how-to-force-the-browser-to-reload-cached-js-css-files-to-reflect-latest-chan/
or
You can use the new feature in .Net Core
asp-append-version="true"
Then your js tag becomes:
<script src="~/js/bookList.js" asp-append-version="true"></script>
Reference: https://www.c-sharpcorner.com/blogs/aspappendversion-feature-in-asp-net-core
Related
So I'm trying to create a custom editor so that for a DataType of "Duration" a textbox appears with a masked format of HH:MM:SS.
I've created a very simple piece of code so far
#Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, new { #class = "text-box single-line", type = "duration" })
<script>
$(document).ready(function () {
$("##Html.NameFor(c => c)").mask("00:00:00");
});
</script>
This is in my ~/Views/Shared/EditorTemplates/Duration.cshtml file. However it requires an additional javascript to be loaded (maskedInput.js).
Is there any razor includes I can use here so that I can include the maskedInput.js file once and only once in a page load. I realise I could add it to the parent page the editor will be on (but that would require knowing every page where this editor is used). I could add it to the master layout view but this would mean overhead for the pages that don't use this editor.
So I suppose in summary all I'm asking is :- "Is there a way to include a javascript file once and only once from a EditorTemplate".
I wrote a nuget package exactly for this purpose and wrote the blog post that YD1m has referred to.
To use the package, first thing you need to do is add a call to Html.RenderScripts() somewhere in your layout so that all of the script file references and blocks added using the helpers during the rendering of a Razor view are outputted in the response. The typical place to put this call is after the core scripts in your top level layout. Here's an example layout:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>#ViewBag.Title</title>
<meta name="viewport" content="width=device-width">
</head>
<body>
#RenderBody()
<script src="~/Scripts/jquery-2.0.2.js"></script>
#* Call just after the core scripts in the top level layout *#
#Html.RenderScripts()
</body>
</html>
If you're using the Microsoft ASP.NET Web Optimization framework, you can use the overload of Html.RenderScripts() to use the Scripts.Render() method as the function for generating scripts:
#Html.RenderScripts(Scripts.Render)
With that done, now all you need to do in your editor template is use the helpers in the nuget package to add a reference to the script and add your code block
#Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, new { #class = "text-box single-line", type = "duration" })
#using (Html.BeginScriptContext())
{
Html.AddScriptFile("~/Scripts/maskedInput.js");
Html.AddScriptBlock(
#<script>
$(document).ready(function () {
$("##Html.NameFor(c => c)").mask("00:00:00");
});
</script>);
}
The referenced script file will only be added once to the page and all of the script blocks will be written out at the end of Html.RenderScripts() call.
Using the helpers, you can add script files and script blocks in Views, Partial Views and Editor/Display Templates. Note that the current version (1.1.0.0) will not render out scripts using the helpers when called via AJAX but this is something that I'm looking to add in the next version.
Well, you can do following:
Add #RenderSection("MaskedInput", false) to your master layout. That'l render
#section MaskedInput{}
on each page that has that section;
On a page you need to add maskedInput.js you put:
#section MaskedInput
{
#*Include scripts, styles or whatever you need here*#
}
You can create singleton class with Dictionary property whic will store scripts from your custom helpers/templates.
In your templates you can call method, that put script in singleton dictionary property with some string key. In that method you can prevent adding scripts with same keys.
Finally you should to write a render action for rendering scripts from dictionary and call this action from your master layout.
Here you can find solution similar to mine:
Managing Scripts for Razor Partial Views and Templates in ASP.NET MVC
I'm writing web-part for Sharepoint 2010 and I need use JQuery.
$(function(){
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
clockImage = new Image();
setInterval(drawScene, 1000);
});
But when I try to debug my web-part, there is error:
Runtime error Microsoft JScript: The value of the "$" or is NULL, or if it is not defined or not an object Function
I've added JQuery to Style Library and my ascx page:
<script type="text/javascript" src="~/StyleLibrary/scripts/jquery.js"></script>
What should I do to fix it?
Look for the another reference avalialble for the Jquery in your page or the master page ?
If yes then remove one of the references..
If there are more then one reference calls available for the jquery script it will break the functionality of jquery script.
Also check for any other call tho jquery script before the reference is called ?
Thanks
I have downloaded the TinyMCE.MVC.Jquery and TinyMCE.MVC.Jquery.Sample into a new MVC.NET 4 project, however I cannot seem to get it to show in the sample TinyMCESampleJQuery cshtml page.
I only changed the
content_css: "#Url.Content("~/Content/Site.css")",
to point to my stylesheet and added the jquery and tinymce references
<script src="#Url.Content("~/Scripts/tinymce/jquery.tinymce.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
Do I need to do anything else to get it to work?
Ok so I tried something and this worked!
I removed the jquery link from my tinymce cshtml, and moved the jquery scripts bundle in the layout page to the and that worked
Are you referencing there stylesheet and have you added the required images into your project?
I'm doing a site using MVC 4. It's a site that list musics and the user can create a playlist (like a cart shopping).
I have for every music this action link that should be executed in Ajax:
#Ajax.ActionLink("Adicionar à Playlist","AddPlaylist", new { id = item.MusicaID }, new AjaxOptions {UpdateTargetId="playlist", InsertionMode=InsertionMode.Replace})
The action method from the controller returns a PartialView (the cart of playlist) and only that should update but instead of getting the whole page with that part updated I get a partial view and nothing more on the page.
This is the part where I render the PartialView:
<section id="playlist">
#Html.Partial("_PlaylistPartial")
</section>
Shouldn't this work like I have?
Make sure you have included
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
in your view
It was a stupid thing.
First my include of jquery.unobtrusive-ajax.min.js didn't work like I have:
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
So I put like this:
#Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.min.js")
And still wasn't working, because I also need to include the JQuery files:
#Scripts.Render("~/Scripts/jquery-1.7.1.js")
#Scripts.Render("~/Scripts/jquery.1.7.2.min.js")
This way it works :)
A little late to the party but I just had a similar problem. The solution was to add this line to _Layout.cshtml:
#Scripts.Render("~/bundles/jqueryval")
First, install Microsoft.JQuery.Unobtrusive.Ajax from NuGet Manager and later include ~/Scripts/jquery.unobtrusive in BundleConfig after including jquery-{version}.js; which will look something similar to this:
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/jquery.unobtrusive*));
I am trying to put a c# code when a js function happens.
I found this article https://www-archive.mozilla.org/js/spidermonkey/tutorial.html
but I didn't fully understand how to do it in my case.
Here is what I tried.
rooms.aspx
<script type="text/javascript" language="Javascript">
function DetectBrowserExit()
{
// alert('Execute task which do you want before exit');
<%
if(Application["player1"]==Session["mynick"])
{
Application["player1"]="";
Application["status1"]=false;
}
%>
}
window.onbeforeunload = function () { DetectBrowserExit(); }
</script>
All that goes in the head of the aspx and DetectBrowserExit happens when a user closed the browser.
You know how to make the C# code accessible?
Thank you.
You can use page methods with a script manager to do this.
Using Page Methods in ASP.NET AJAX