ASP .NET MVC 5 Écrire du code javascript dans la Vue.cshtml fichier

Je suis nouveau à l'ASP .NET et j'ai du mal avec javascript MVC.
J'ai un IndexView.cshtml fichier dans la Vue dossier et que vous voulez écrire une courte section javascript à l'intérieur de déplacer le site retour haut de page avec un bouton.
Il fonctionne parfaitement en html il y a donc une.
Normalement, un bouton s'affiche à chaque fois que j'ai faites défiler vers le bas à partir du haut d'un site et disparaît quand je vais revenir à du très haut. Ici, il ne s'affiche pas du tout.
Que pouvais-je faire pour le faire fonctionner?
Merci à l'avance!

C'est donc à la fin de mon corps dans IndexView.cshtml juste avant </body> tag.

<script type="text/javascript">
        $(document).ready(function() {
            $().UItoTop({ easingType: 'easeOutQuart' });

        });
    </script>
    <a href="#" id="toTop"><span id="toTopHover"> </span></a>

Et ceci de la part de move-top.js à l'intérieur de dossier Scripts /Scripts/move-top.js

(function ($) {
$.fn.UItoTop = function (options) {
var defaults = {
text: 'To Top', min: 200, inDelay: 600, outDelay: 400, containerID: 'toTop', containerHoverID: 'toTopHover',
scrollSpeed: 1200, easingType: 'linear'
}, settings = $.extend(defaults, options), containerIDhash = '#' + settings.containerID, containerHoverIDHash = '#' + settings.containerHoverID;
$('body').append('<a href="#" id="' + settings.containerID + '">' + settings.text + '</a>');
$(containerIDhash).hide().on('click.UItoTop', function ()
{
$('html, body').animate({ scrollTop: 0 }, settings.scrollSpeed, settings.easingType);
$('#' + settings.containerHoverID, this).stop().animate({ 'opacity': 0 }, settings.inDelay, settings.easingType); return false;
}).prepend('<span id="' + settings.containerHoverID + '"></span>').hover(function ()
{ $(containerHoverIDHash, this).stop().animate({ 'opacity': 1 }, 600, 'linear'); }, function ()
{ $(containerHoverIDHash, this).stop().animate({ 'opacity': 0 }, 700, 'linear'); });
$(window).scroll(function () {
var sd = $(window).scrollTop();
if (typeof document.body.style.maxHeight === "undefined")
{
$(containerIDhash).css({
'position': 'absolute', 'top': sd + $(window).height() - 50
});
}
if(sd>settings.min)
$(containerIDhash).fadeIn(settings.inDelay);else
$(containerIDhash).fadeOut(settings.Outdelay);});};})(jQuery);
  • Je ne vois pas ici une question. Juste un objectif et un peu de code. Quel est votre problème?
  • Ce n'est pas de travail? ASP.NET MVC points de vue sont basés sur le code HTML comme n'importe quel autre site web. Ce qui est de vous empêcher de mettre du JavaScript dans eux comme vous le feriez dans votre fichier HTML?
  • OH désolé, Il n'est tout simplement pas de travail ;). Normalement sur ma page, le bouton s'affiche à chaque fois que j'ai faites défiler vers le bas à partir du haut, mais ici, il n'a pas. On dirait qu'il est même pas reconnaissant mon code.
  • Vous devriez essayer de faire les bases, et de décrire ce que vous avez vérifié dans vos messages. Par exemple, faire en sorte de scripts chargés correctement, vérifier pour les erreurs JavaScript dans la console développeur, pas à pas dans le code, etc.
  • Pour l'instant j'ai inclus mes autres scripts qui fonctionnent entièrement à l'extérieur de mon cshtml fichier en tant que tel, par exemple, et ils fonctionnent tous parfaitement: <script type="text/javascript" src="@Url.Contenu("/Scripts/jquery-1.7.2.min.js")"></script>
  • Merci d'éditer votre question à l'état ce que vous avez essayé, nous n'avons pas besoin de le voir dans un commentaire. Au minimum, essayez de ce que j'ai énuméré dans mon dernier commentaire.

InformationsquelleAutor TheGalax | 2015-12-29
  1. 8

    Ressemble votre code js est dépendante de la bibliothèque jQuery. Cela signifie que vous avez besoin de charger jQuery avant execcuting ce code.

    Dans le fichier de Layout, @RenderSection("scripts", required: false) est appelé au bas de l'écran après le chargement de la bibliothèque de jQuery. 

    <div id="pageContent">
@RenderBody()
</div>
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)

    Et à votre avis, vous devriez être notamment un script qui est dépendante de jQuery à l'intérieur de la Scripts section de sorte que lorsque la page est complètement rendu, il sera ajouté à la partie inférieure ( Après d'autres bibliothèques comme jQuery est chargé);

    <h2>This is my View</h2>
@section Scripts
{
<script>
$(function(){
alert("All good");
});
</script>
}
    • Merci, j'ai ajouté @section Scripts{} pour mon script et il semble que ça fonctionne maintenant 🙂 seule chose qui manque maintenant, c'est que le bouton est transparent, ressemble à de la .img ne se charge pas correctement.
    InformationsquelleAutor Shyju
  2. 1

    @TheGalax avez-vous souvenez-vous de la référence de votre fichier javascript?

    -- Ajout de jQuery --

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="/Scripts/move-top.js"></script>
    • Oui, je l'ai fait de cette façon: <script type="text/javascript" src="@Url.Contenu("/Scripts/move-top.js")"></script>
    • C'est toujours une bonne idée d'afficher votre plein cshtml, pour donner une meilleure contexte de votre question. @Shyju a la prochaine meilleure supposition : -) voir modifier ci-dessus
    InformationsquelleAutor Harleyz