ASP.NET MVC & JQuery UI - Accordion

Je souhaite réaliser un "accordéon" en JQuery UI avec un template d'application ASP.NET MVC. Tout ce que je vois sur internet ne fonctionne pas. En tous cas pas avec le template de Visual Studio. Les applications ASP.NET MVC utilisées dans ces exemples, sont trop simples. Elles n'utilisent pas le template de Visual Studio.

Pourquoi JQuery UI ne fonctionne pas avec ASP.NET MVC ?

Ne pas oublier d'installer le NuGet JQuery UI :


L'instruction :
@Scripts.Render( "~/bundles/jquery" )

en bas de la page :
\\WebMvcApplication1\Views\Shared\_Layout.cshtml

Remponne avec l'instruction de la \\Views\Home\Page1.cshtml

@{
    ViewBag.Title = "Page1";
}

<script src="~/Scripts/jquery-1.6.4.js"></script>
<script src="~/Scripts/jquery-ui-1.11.4.js"></script>
<link href="~/Content/themes/base/all.css" rel="stylesheet" />
<link href="~/Content/themes/base/accordion.css" rel="stylesheet" />

<script type="text/javascript">
    $(function () {
        $("#accordion").accordion();
    });
</script>

<h2>Page1</h2>

<div id="accordion">
    <h3>This is the Title1</h3>
    <div>
        <p>
            Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
            ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
            amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
            odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
        </p>
    </div>
    <h3>This is the Title2</h3>
    <div>
        <p>
            Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
            purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
            velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
            suscipit faucibus urna.
        </p>
    </div>
</div>

Solution pour utiliser JQuery UI dans les page ASP.NET MVC

Déplacer l'instruction :
@Scripts.Render( "~/bundles/jquery" )

de la page : \\WebMvcApplication1\Views\Shared\_Layout.cshtml
dans les balises <head> au début de la page. Comme ceci :

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Mon application ASP.NET</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render( "~/bundles/jquery" )
</head>

Supprimer l'instruction :
<script src="~/Scripts/jquery-1.6.4.js"></script>
de la page \\Views\Home\Page1.cshtml

Et ça y est, ça fonctionne :

J'ai ajouté une page dans laquelle j'utilise l'accordion JQuery UI

L'accordion JQuery UI s'affiche dans ma page ASP.NET MVC
Incroyable non ? N'est ce pas de la magie !

Have Fun !
 

Aucun commentaire:

Publier un commentaire

Pour plus d'interactivité, n'hésitez pas à laisser votre commentaire.