Les meilleures méthodes pour passer des données de asp.net-mvc à javascript

Question

J'ai travaillé avec ASP.NET et MVC Javascript/jQuery beaucoup ces derniers temps et j'ai l'impression d'être à la tête dans une direction où je suis toujours à la recherche d'une valeur dynamique "à" mon javascript. Lorsque le script est à droite de la page, j'ai fait quelque chose comme ceci:

var isEditable = <%=ViewData["editable"]%>

J'aime la façon dont c'est rapide et facile et tout comme je l'avais injecter une valeur en HTML. Mais cette odeur. Vraiment, vraiment mauvais. Et il se casse intellisense de Visual Studio et de mise en forme du code, en faisant mes scripts dur à lire et à comprendre.

Il a eu pour moi une autre solution serait de passer à un champ caché, et avoir la référence Javascript qui...

<input type="hidden" id="editable" value="<%=ViewData["editable"]%>" />
var isEditable = $("#editable").attr("value");

C'est probablement beaucoup mieux comme ça maintient le script intacte et me permettrait de le déplacer vers un externe .fichier js. Mais quelque chose au sujet de cette solution ne semble pas idéal. Ou est-ce juste moi?

Quelqu'un peut-il recommander des solutions et meilleures pratiques pour le passage des données dans vos scripts? Suis-je dirigé dans la mauvaise voie si mes scripts en fin de fortement dépendante de la viewdata de mon contrôleurs en premier lieu?

Answer 1

Parfois, je me transmettre des données à mes pages en écrivant un objet de configuration à la page via un sérialiseur JSON:

var pageConfig = <%= ServerConfig.ToJson() %>;

Où vous devez écrire la méthode ToJson vous-même. Cela permet de maintenir l'état de la page joliment contenue, de sorte qu'il n'y a qu'un seul endroit où vous injecter les valeurs du serveur. Tout ici est pur javascript. Dans votre exemple, vous pourriez alors faire:

var isEditable = pageConfig.isEditable;

même dans un fichier js externe, si pageConfig est mondiale. Dans ce cas, cependant, vous devez correctement l'espace de noms il: MY_APP.pageConfig peut-être.

Answer 2

Vous allez injecter ces informations d'une manière ou d'une autre. Et IMO, votre premier exemple n'est pas vraiment différent du second.

Une autre solution consiste à avoir une classe JS (ou un prototype?) Qui acceptera un objet options. Certes, ce n’est pas vraiment différent des exemples que vous avez donnés. Mais encore, peut-être que vous voudriez aller de cette façon.

 $(function () {
    myClass.init({ isEditable: <%=ViewData["editable"]%>, 
        another: '<%=ViewData["another"]%>' });
});
 

Answer 3

Je pense que @ çağdaş est un bon point, mais n'oubliez pas de vérifier également le côté serveur. Si vous définissez un champ sur "lecture seule", rien n'empêche l'utilisateur de modifier cet indicateur, de modifier un champ en lecture seule et de le soumettre.

Answer 4

Le métier d’Ajax consiste à charger des informations de manière asynchrone. Si vous faites le travail d'Ajax (charger les informations et les conserver dans une variable), vous perdez le pouvoir. Pourquoi n'essayez-vous pas JQuery et utilisez-vous Ajax, ou des fonctions Get pour charger le contenu de manière dynamique. Cela aiderait votre page à charger plus rapidement.