Archives de Catégorie: Développement

En tant qu’étudiant en Informatique, quelques tips et astuce de développement :-)

Liste des erreurs MVC Razor

Voici une liste des erreurs que j’ai pu rencontrer lors d’une mission en MVC Razor.


DataBinding : ‘MVC3_Razor.Models.User’ ne comporte pas de propriété appelée ‘Libelle’.

Erreur :

Users = new SelectList(db.User, "UserID", "Libelle");

Correction :

Users = new SelectList(db.User, "UserID", "Name");

LINQ to Entities ne reconnaît pas la méthode « System.String ToString() »

Erreur :

Projets = db.Projet.Select(x => new SelectListItem
                {
                    Value = x.ProjetID.ToString(),
                    Text = x.Libelle
                }),

Correction :

Projets = new SelectList(db.Projet, "ProjetID", "Libelle");

Il n’y a aucun élément ViewData de type ‘IEnumerable’ avec la clé ‘TacheID’.

Correction :
Mettre un ViewBag.TacheID dans le controller.


L’élément ViewData avec la clé ‘ProjetID’ est de type ‘System.Int32’ mais doit être de type ‘IEnumerable’.

Source correction StackOverflow

Une fois créer dans le Controleur, le ViewBag (ou le modèle) se décharge dans la DropDownList, puisqu’il ont le même nom.
Il faut donc recharger les données avant de rappeler la page (dans le controleur)

Publicités

Gérer les virgules et les points avec les validateur Razor

Etant français, je voulais que mon projet en MVC3 Razor accepte aussi bien les virgules que les points pour les nombres décimaux que je pouvais saisir. J’ai chercher durant un petit moment différentes techniques afin de parvenir à mes fins.
Ce n’est qu’après quelques heures, que je suis tombé sur ce site ce site. Très bien expliquer, il m’a permis de pas mal avancé sur le problème.

Il a suffit de ré-écrire la méthode de vérifcation avec les quelques arrangement qui vont mieux.

/* ----- methods_fr.js ----- */
/*
* Localized default methods for the jQuery validation plugin.
* Locale: FR
*/
$.extend($.validator.methods, {
    min: function (value, element, param) {
        return this.optional(element) || replaceComma(value) >= replaceComma(param);
    },
    max: function (value, element, param) {
        return this.optional(element) || replaceComma(value) = replaceComma(param[0]) && value <= replaceComma(param[1]));
    },
    date: function (value, element) {
        return this.optional(element) || /^\d\d?\.\d\d?\.\d\d\d?\d?$/.test(value);
    },
    number: function (value, element) {
        return this.optional(element) || /^-?(?:\d+|\d{1,3}(?:\.\d{3})+)(?:,\d+)?$/.test(value) || /^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d+)?$/.test(value);
    }
});

function replaceComma(value) {
    // Quick & Dirty replace ',' by '.' as decimal separators
    return value.replace(',', '.');
}

Ceci permet lors de la vérification « en direct » de ne pas indiqué en rouge, un nombre qui possède une virgule ou un point.

Ensuite, il faut lors de la validation finale transformer les ‘.’ en ‘,’ , puisque nous somme en France, c’est la virgule qui est le séparateur des nombres décimaux. Dans mon cas, je ne vérifie qu’un seul champ monNombre. A vous d’être inventif si vous en avez plusieurs.

function validate() {
    var valueBefore = $("#monNombre").val();
    var valueAfter = valueBefore.replace('.', ',');
    $("#monNombre").val(valueAfter);
}

Il ne reste plus qu’a relier cette fonction à notre submit et d’importer nos scripts (validate et unobtrusive sont les scripts par défaut de Razor). Et attention à l’ordre qui reste très important.

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/methods_fr.js")" type="text/javascript" ></script>

Enfin on vérifie dans le web.config, si la culture fr-FR est bien indiqué.

<system.web>
  <globalization culture="fr-FR" uiCulture="fr-FR" enableClientBasedCulture="false" />
  ...

Transaction Entity Framework

Gestion des transactions en C# avec Entity Framework

using System.Transactions;

using (TransactionScope scope = new TransactionScope())
{
    try{
        //TODO

        //Validation de la transaction
        scope.Complete();
    }
    catch(Exception){
        //Annulation de la transaction
        scope.Dispose();
    }
}

Datepicker – Mois et année uniquement

La suite de ce billet sur les Calendrier en jQueryvia DatePicker.

Voici comment avoir avec jQuery-ui un calendrier qui n’affiche que les mois et les années.

$(".date").datepicker({
    dateFormat: 'mm/yy',
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    showOn: "button",
    buttonImage: "/Content/images/calendar.png",
    buttonImageOnly: true,
    onClose: function (dateText, inst) {
        var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
        var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
        $(this).datepicker('setDate', new Date(year, month, 1));
    },
    beforeShow: function (input, inst) {
        if ((datestr = $(this).val()).length > 0) {
            actDate = datestr.split('/');
            year = actDate[1];
            month = actDate[0] - 1;
            $(this).datepicker('option', 'defaultDate', new Date(year, month));
            $(this).datepicker('setDate', new Date(year, month));
        }
    }
});
$(".date").focus(function () {
    $(".ui-datepicker-calendar").hide();
    $("#ui-datepicker-div").position({
        my: "center top",
        at: "center bottom",
        of: $(this)
    });
});

Et voici le résultat :

Vérifier l’existence d’un objet en jQuery

Pour vérifier l’existence d’un objet en jQuery, il suffit de demandé la propriété length de cet objet. Si la condition passe, alors l’objet existe et on pourra travailler dessus.

 
$(document).ready(function () {
//Vérifier que le tbody existe dans la table myTable
    if ($("#myTable").children("tbody").length) {
        // ...
    }
}); 

Source

Infobulle en CSS

Petite astuce pour créer des infobulles en CSS sans se prendre trop la tête.
Dans cet exemple, je l’utilise dans un <tr>

La partie HTML :

<td class="infobulle">
    Mon texte ...
    <span>Mon texte qui apparaîtra dans l'infobulle !!!!! </span>
</td>

La partie CSS :

.infobulle
{
    position: relative;
    z-index: 24;
    text-decoration: none;
}

.infobulle:hover
{
    z-index: 25;
}

.infobulle span
{
    display: none;
}

.infobulle:hover span
{
    display: block;
    position: absolute;
    top: 2em;
    left: 2em;
    color: #000;
    background-color: #eeeeee;
    word-wrap : break-word;
    width : 300px;    
}

Source

Raccourcir un texte en Razor

La méthode est simple, mais qu’est-ce qu’elle peut-être utile lors de la génération de tableau. Si votre texte est trop long, voici une petite astuce :

@(item.Description != null ? item.Description.Substring(0, item.Description.Length > 40 ? 40 : item.Description.Length) + "..." : "")

Et avec la gestion des infobulles en css, ça rend plutôt pas mal.

<td class="infobulle">
    @(item.Description != null ? item.Description.Substring(0, item.Description.Length > 40 ? 40 : item.Description.Length) + "..." : "")
    <span>@item.Description</span>
</td>

Afficher un byte en hexadécimal

Alors que je travaillais sur les couleurs en Razor afin d’afficher des nuances dans des tableaux est arrivé un problème épineux. Comment afficher un byte en hexadécimal puisque par défaut, il retranscrit le byte sous forme de nombre de 0 à 255…

byte foo = 1;
byte bar = 0xFF;

foo.ToString();
bar.ToString();
bar.ToString("X2");

//return 1
//return 255
//return FF

Aide MSDN

Création de clé primaire composé en MVC3

Vous avez une table jointe, voiçi comment déclarer les clé primaires composé en MVC3.

Il suffit de les définir dans le Context comme ceçi :

protected override void OnModelCreating(DbModelBuilder modelBuilder)
{
    modelBuilder.Entity<RencontreClass>().HasKey(t => new { t.UserId, t.ClientId });
}

Source

Calendrier en jQuery – DatePicker

Tous d’abord récupérer (si ce n’est pas déjà fait) le jquery-ui et le css qui vous fait envie sur le site officiel.

Vous n’avez plus qu’à les importer.

<script src="../Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>
<link href="../Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />

Pendant qu’on y est, on récupère également la traduction française du calendrier ici. Et on l’importe

<script src="../Scripts/jquery.ui.datepicker-fr.js" type="text/javascript"></script>

Ensuite on aura besoin d’une textbox pour saisir la date et l’afficher.

<input type="text" class="date"/>

Et enfin de script pour relier la textbox avec le calendrier.

<script>
$(function () {
    $('.date').datepicker({ dateFormat: "dd/mm/yy" });
});
</script>

Voilà c’est aussi simple, et comme bonus, voici la même chose en intégrale et en plus classe. Lire la suite