Overblog
Suivre ce blog
Administration Créer mon blog

Présentation

  • : Romagny13 - Du .NET,du pur .NET
  • Romagny13 - Du .NET,du pur .NET
  • : Cycle de progression Faire (quelque chose qui marche) -> comprendre ce que l’on fait/comment cela marche -> pousser plus loin les notions
  • Contact

Recherche

Articles Récents

7 août 2014 4 07 /08 /août /2014 21:01
Published by Romagny13 - dans Divers
commenter cet article
15 juillet 2014 2 15 /07 /juillet /2014 14:35

Bonjour,

J’étudie en profondeur Knockout, Durandal et Angular... dans ce cadre j'ai réalisé une petite source reprenant beaucoup de fonctionnalités de Knockout, je l'ai postée sur CodeS-SourceS trouvant qu'elle correspondait bien au style de sources qu'il peut être intéressant de trouver sur le site  

 

 

Si le tour d'horizon que je fais de ces 3 Frameworks JavaScript est suffisamment consistant , j'en ferai un PDF que vous pourrez trouver sur mon nouveau blog .Peut être que je le posterai également ici

 

kodemo

25 mai 2014 7 25 /05 /mai /2014 00:33
22 mai 2014 4 22 /05 /mai /2014 19:19

Le but est de bien structurer les fichiers (séparation des responsabilités), c’est-à-dire ne pas mélanger tout dans un seul fichier JavaScript.

J’utilise :

  •  jQuery

  • Knockoutjs pour le « binding »

  • Web Api

 

Model (person.js)

/// <reference path="knockout-3.1.0.js" />

 

var Person = function (id, name) {

 

    this.Id = ko.observable(id);

    this.Name = ko.observable(name);

}

 

Service (personservice.js)

/// <reference path="jquery-2.1.1.js" />

/// <reference path="knockout-3.1.0.js" />

/// <reference path="../models/person.js" />

 

var getAll = function (persons) {

 

    var options = {

        url: "/api/persons",

        type: "GET",

    };

 

    function querySucceeded(data) {

        data.forEach(function (item) {

            var p = new Person(item.Id, item.Name);

                        persons.push(p);

        });

    }

    return $.ajax(options).then(querySucceeded);

 

    // Autre possibilité

    //$.getJSON("/api/persons", function (data) {

    //    data.forEach(function (item) {

    //        var p = new Person(item.Id, item.Name);

    //        persons.push(p);

    //    });

    //})

};

 

ViewModel (persons.js)

/// <reference path="jquery-2.1.1.js" />

/// <reference path="knockout-3.1.0.js" />

/// <reference path="../models/person.js" />

/// <reference path="../services/personservice.js" />

 

$(function () {

 

    var Persons = ko.observableArray();

 

    var vm = {

        Persons: Persons

    }

 

    var refresh = function () {

        return getAll(Persons);

    };

 

    refresh();

 

    ko.applyBindings(vm);

});

 

Et la page (Default.html)

<body>

 

    <form>

        <ul data-bind="foreach: Persons">

            <li>

                <span data-bind="text: Name"></span>

            </li>

        </ul>

    </form>

 

    <script src="Scripts/jquery-2.1.1.js"></script>

    <script src="Scripts/knockout-3.1.0.js"></script>

    <script src="Scripts/services/personservice.js"></script>

    <script src="Scripts/models/person.js"></script>

    <script src="Scripts/viewmodels/persons.js"></script>

</body>

 

 

Le contrôleur et le Model utilisés par celui-ci sont ultra simples

 

public class PersonsController : ApiController

    {

        public IEnumerable<Person> Get()

        {

            return new List<Person>(){new Person(1,"Bellin, Marie"),

                                      new Person(2,"Adams, Angie")};

        }

    }

 

    public class Person

    {

        public int Id { get; set; }

        public string Name { get; set; }

 

        public Person(int id, string name)

        {

            this.Id = id;

            this.Name = name;

        }

    }

 

On peut pousser plus loin en utilisant Durandal, ce qui fera l'objet sans doute d'un article .

20 mai 2014 2 20 /05 /mai /2014 02:13
Published by Romagny13 - dans Prism
commenter cet article
19 mai 2014 1 19 /05 /mai /2014 22:43

 

III jQuery et Web Api

Si on commence avec un projet vide et que l’on désire ensuite utiliser Web API, ajouter :

wb6.png

(toujours pareil)

 

       <script> 

         $(function () {

        // code ici

         });

        </script>

 

Note on peut réduire l’url « http://localhost:12681/api/persons » à  « /api/persons" si on accède au contrôleur depuis la même application

1-Get

Avec $.ajax

 

              // Méthode permettant d'afficher une liste de personnes dans la div "container"              

               function displayPersons(persons) {                 

                        var html = "<hr />";

                        $.each(persons, function (index, person) {

                            html += "<strong>" + person.PersonID + "</strong>" + person.PersonFullName + "<br/>";

                        })

                        $("#container").html(html);

                }

 

               

                $("#btGet").click(function (evt) {

                    var options = {

                        url: "http://localhost:12681/api/persons",

                        type: "GET",

                        success: function (persons) { displayPersons(persons); },

                        error: function (jqXHR, status, err) { alert(status + ", " + err); }

                    };

                    //

                    $.ajax(options);

                });

 

Avec $.getJSON

 

                $("#btGet").click(function (evt) {

                    var url = url = "http://localhost:12681/api/persons";

                    $.getJSON(url, function (persons) { displayPersons(persons) });

                });

 

2-GetOne(GET)

Avec $.ajax

 

$("#btGetOne").click(function (evt) {

 

                    var options = {

                        url: "http://localhost:12681/api/persons/" + $("#tbID").val(),

                        type: "GET",

                        success: function (person) { $("#container").html("<strong>" + person.PersonFullName + "</strong>"); },

                        error: function (jqXHR, status, err) { alert(status + ", " + err); }

                    };

                    $.ajax(options);

                   

                })

 

Avec $.getJSON

 

$("#btGetOne").click(function (evt) {

                    $.getJSON("http://localhost:12681/api/persons/" + $("#tbID").val(),function (person) {

                      $("#container").html("<strong>" + person.PersonFullName + "</strong>");

                    })

                     .fail(

                        function (xhr, textStatus, err) {

                            $("#container").html(status);

                        });

                   

                })

 

3-Add (POST)

 

$("#btAdd").click(function (evt) {

 

                var person ={

                    personID:$("#tbID").val(),

                    personFullName:$("#tbName").val()

                };

 

                var options = {

                    url: "http://localhost:12681/api/persons/",

                    type: "POST",

                    contentType: 'application/json; charset=utf-8',

                    data: JSON.stringify(person),

                    success: function () { displayPersons(); },

                    error: function (jqXHR, status, err) { $("#container").html(status); }

                };

 

                $.ajax(options);

            })

 

 

4-Update(PUT)

 

  $("#btUpdate").click(function (evt) {

 

                var person ={

                    personID:$("#tbID").val(),

                    personFullName:$("#tbName").val()

                };

 

                var options = {

                    url: "http://localhost:12681/api/persons/",

                    type: "PUT",

                    contentType: 'application/json; charset=utf-8',

                    data: JSON.stringify(person),

                    success: function () { displayPersons(); },

                    error: function (jqXHR, status, err) { $("#container").html(status); }

                };

 

                $.ajax(options);

            })

 

 

5-Delete (DELETE)

 

$("#btDelete").click(function (evt) {

                var options = {

                    url: "http://localhost:12681/api/persons/" + $("#tbID").val(),

                    type: "DELETE",

                    success: function () { displayPersons(); },

                    error: function (jqXHR, status, err) { $("#container").html(status); }

                };

 

                $.ajax(options);

            }) 

 

 

Le contrôleur « classique »

 wb7.png

Published by Romagny13 - dans ASP.NET MVC
commenter cet article
15 mai 2014 4 15 /05 /mai /2014 22:56



 

 

Le contrôleur.

N’ayant pas de constructeur par défaut, si on ne définit pas les dépendances on a une erreur

Sinon le reste est classique, on vérifie que le modèle est valide (Data Annotations).S’il est valide on ajoute l’élément puis on redirige vers la page « Index », sinon on permet l’édition (affichage des erreurs grâce à jQuery validate)

 

Published by Romagny13 - dans ASP.NET MVC
commenter cet article
15 mai 2014 4 15 /05 /mai /2014 16:44

Très utile pour taper rapidement du code HTML/CSS (Inclus avec Web Essentials)

Exemples

(Il suffit d’appuyer sur Tab)

Ce qui donne …

http://vswebessentials.com/

http://code.google.com/p/zen-coding/

http://www.johnpapa.net/zen-coding-in-visual-studio-2012/

Published by Romagny13 - dans HTML5-CSS3
commenter cet article
14 mai 2014 3 14 /05 /mai /2014 00:50

Fiddler http://www.telerik.com/download/fiddler

Fiddler peut être bien pratique pour débugger ses sites .On peut filtrer « Show Only Intranet Hosts » on peut également utiliser composer  

fiddler.png

 

Ressources

http://www.devcurry.com/2013/03/debugging-your-aspnet-web-apis-with.html


Published by Romagny13 - dans ASP.NET MVC
commenter cet article
13 mai 2014 2 13 /05 /mai /2014 17:31

1 Permettre à l’application d’utiliser la fonction de recherche

 

Appxmanifest  , Onglet « Délclarations » Ajouter « Rechercher »

searchwinrt0

L’application apparait désormais dans la liste des applications pour lesquelles on peut effectuer une recherche

 

 

2- Afficher les résultats d'une recherche dans une page

 

SearchResultPage

On ajoute 1 page au projet pour afficher les résultats (SearchResultPage) .Dans le code behind on définit les éléments à afficher(ici je définis la source de la CollectionViewSource de la page)

 

        protected override void OnNavigatedTo(NavigationEventArgs e)

        {

            string queryText = e.Parameter.ToString();

            // On pourrait mettre à jour le titre de la page

           // pageTitle.Text = String.Format("Results for \"{0}\"", queryText);

            cvs.Source = new PersonService().GetAll(queryText);

        }

 

App.xaml.cs

On demande à naviguer vers la page permettant d’afficher les résultats que l’on a créé en passant les paramètres (texte saisi dans le champ de recherche)

 

        protected override void OnSearchActivated(SearchActivatedEventArgs args)

        {

            Frame rootFrame = Window.Current.Content as Frame;

            rootFrame.Navigate(typeof(SearchResultPage), args.QueryText);

        }

 

  • Utiliser SearchResultsPage de Visual Studio  

searchwinrt2.png

 

Il faudra affecter la source à resultsViewSource .exemple

resultsViewSource.Source = new PersonService().GetAll(queryText);

Et adapter les champs de la page et propriétés

 

3- Ajouter une liste de suggestions lors de la saisie

 

searchwinrt1

App.xaml.cs

Ajouter à la fin de la méthode OnLaunched

SearchPane.GetForCurrentView().SuggestionsRequested += App_SuggestionsRequested;

Et

On récupère la liste des noms de personnes correspondante à la saisie que l’on ajoute à la collection de suggestions.

 

private void App_SuggestionsRequested(SearchPane sender, SearchPaneSuggestionsRequestedEventArgs args)

        {

            PersonService personService = new PersonService();

            args.Request.SearchSuggestionCollection.AppendQuerySuggestions(personService.GetSuggestions(args.QueryText));

            args.Request.GetDeferral().Complete();

        }

Published by Romagny13 - dans WinRT
commenter cet article