wake-up-neo.net

Wie man Javascript-Variablen mit MVC4 mit Razor setzt

Kann jemand den folgenden Code so formatieren, dass ich mit C # -Code mithilfe von Rasierer srcript-Variablen festlegen kann?

Das Folgende funktioniert nicht, ich habe es so gemacht, dass jemand leicht helfen kann.

@{int proID = 123; int nonProID = 456;}

<script type="text/javascript">
    @{

     <text>  

    var nonID [email protected];
    var proID= @proID;
    window.nonID = @nonProID;
    [email protected];

    </text>
}
</script>

Ich bekomme einen Entwurfsfehler

enter image description here

Sie sollten einen Blick auf die Ausgabe werfen, die Ihre Rasiererseite ergibt. Eigentlich müssen Sie wissen, was von server-side und client-side ausgeführt wird. Versuche dies:

@{
    int proID = 123; 
    int nonProID = 456;
}

<script>

    var nonID = @nonProID;
    var proID = @proID;
    window.nonID = @nonProID;
    window.proID = @proID;

</script>

Die Ausgabe sollte folgendermaßen aussehen:

enter image description here

Je nachdem, welche Version von Visual Studio Sie verwenden, werden bei Ansichten mit Rasiermesser einige Highlights in der Entwurfszeit hervorgehoben.

38
Felipe Oriani

So habe ich das Problem gelöst:

@{int proID = 123; int nonProID = 456;}

<script type="text/javascript">
var nonID = Number(@nonProID);
var proID = Number(@proID);
</script>

Es ist selbstdokumentierend und beinhaltet keine Konvertierung in und aus Text.


Hinweis: Seien Sie vorsichtig, wenn Sie die Funktion Number() verwenden und keine new Number()-Objekte erstellen. Der Operator "genau gleich" kann sich auf nicht offensichtliche Weise verhalten:

var y = new Number(123); // Note incorrect usage of "new"
var x = new Number(123);
alert(y === 123); // displays false
alert(x == y); // displays false
18
Scott Gartner

Da Rasierersyntaxfehler problematisch werden können, während Sie an der Ansicht arbeiten, verstehe ich völlig, warum Sie sie vermeiden möchten. Hier sind ein paar andere Möglichkeiten.

<script type="text/javascript">
    // @Model.Count is an int
    var count = '@Model.Count';
    var countInt = parseInt('@Model.ActiveLocsCount');
</script>

Die Zitate fungieren als Trennzeichen, sodass der Rasierer-Parser glücklich ist. Natürlich wird Ihr C # int in der ersten Anweisung zu einem JS-String. Für Puristen könnte die zweite Option besser sein.

Wenn jemand eine bessere Möglichkeit hat, dies ohne Rasierersyntaxfehler zu tun, insbesondere den Typ des Var beizubehalten, würde ich das gerne sehen!

15
Sean

Ich habe mehrere Ansätze gesehen, um den Fehler zu umgehen, und ich habe ein paar Timingtests durchgeführt, um zu sehen, was für die Geschwindigkeit funktioniert ( http://jsfiddle.net/5dwwy/ ).

Ansätze:

  1. Direkte Zuweisung

    Bei diesem Ansatz wird die Rasierersyntax direkt der Variablen zugewiesen. Das ist, was den Fehler auslöst. Der JavaScript-Geschwindigkeitstest führt einfach eine direkte Zuordnung einer Zahl zu einer Variablen durch.

  2. Durchlaufen Sie den Number-Konstruktor

    Bei diesem Ansatz wickeln wir die Rasierersyntax in einen Aufruf an den `Number'-Konstruktor ein, wie in` Number (@ ViewBag.Value) `.

  3. ParseInt

    Bei diesem Ansatz wird die Rasierersyntax in Anführungszeichen gesetzt und an die Funktion "parseInt" übergeben.

  4. Wertrückgabe-Funktion

    Bei diesem Ansatz wird eine Funktion erstellt, die einfach die Rasierersyntax als Parameter verwendet und diese zurückgibt.

  5. Typprüffunktion

    Bei diesem Ansatz führt die Funktion einige grundlegende Typüberprüfungen durch (sucht im Wesentlichen nach Null) und gibt den Wert zurück, wenn er nicht Null ist.

Verfahren:

Bei jedem oben genannten Ansatz wiederholt ein for-loop jeden Funktionsaufruf 10M-mal, um die Gesamtzeit für die gesamte Schleife zu ermitteln. Dann wird diese for-Schleife 30 Mal wiederholt, um eine durchschnittliche Zeit pro 10M-Aktion zu erhalten. Diese Zeiten wurden dann miteinander verglichen, um festzustellen, welche Aktionen schneller waren als andere.

Da JavaScript ausgeführt wird, unterscheiden sich die tatsächlichen Zahlen, die andere Personen erhalten. Die Wichtigkeit liegt jedoch nicht in der tatsächlichen Zahl, sondern in dem Vergleich der Zahlen mit den anderen Zahlen.

Ergebnisse:

Bei Verwendung des direkten Zuweisungsansatzes betrug die durchschnittliche Zeit für die Verarbeitung von 10M-Zuweisungen 98,033 ms. Die Verwendung des Konstruktors Number ergab 1554,93 ms pro 10M. In ähnlicher Weise dauerte die parseInt-Methode 1404.27 ms. Die beiden Funktionsaufrufe benötigten 97,5 ms für die einfache Funktion und 101,4 ms für die komplexere Funktion.

Schlussfolgerungen:

Der sauberste Code, den Sie verstehen müssen, ist die direkte Zuweisung. Aufgrund des Fehlers in Visual Studio wird jedoch ein Fehler gemeldet, der möglicherweise Probleme mit Intellisense verursacht und ein unklares Gefühl vermittelt, falsch zu sein. 

Der schnellste Code war der einfache Funktionsaufruf, allerdings nur mit einem schmalen Rand. Da ich keine weitere Analyse durchgeführt habe, weiß ich nicht, ob dieser Unterschied eine statistische Bedeutung hat. Die Typprüfungsfunktion war ebenfalls sehr schnell, nur etwas langsamer als eine direkte Zuweisung, und es besteht die Möglichkeit, dass die Variable null ist. Dies ist jedoch nicht wirklich praktisch, da selbst die Basisfunktion undefined zurückgibt, wenn der Parameter undefined ist (in Rasierersyntax null).

Das Rasieren des Rasierers als Int und das Durchlaufen des Konstruktors waren extrem langsam, in der Größenordnung von 15x langsamer als bei einer direkten Zuweisung. Am wahrscheinlichsten ruft der Number-Konstruktor intern parseInt auf, was erklären würde, warum er länger braucht als eine einfache parseInt. Sie haben jedoch den Vorteil, dass sie aussagekräftiger sind, ohne dass eine extern definierte Funktion (dh irgendwo in der Datei oder Anwendung) ausgeführt werden muss, wobei der Konstruktor Number tatsächlich die sichtbare Umwandlung einer Ganzzahl in eine Zeichenfolge minimiert.

Unterm Strich wurden diese Zahlen durch 10M-Iterationen generiert. Bei einem einzelnen Artikel ist die Geschwindigkeit unermesslich gering. Für die meisten ist das Durchlaufen des Konstruktors Number der lesbarste Code, obwohl er der langsamste ist. 

9
saluce
@{
int proID = 123; 
int nonProID = 456;
}

<script>

var nonID = '@nonProID';
var proID = '@proID';
window.nonID = '@nonProID';
window.proID = '@proID';

</script>
5
Ahmed Ghazey

Es funktioniert, wenn Sie so etwas tun:

var proID = @proID + 0;

Was Code erzeugt, der ungefähr so ​​aussieht:

var proID = 4 + 0;

Ein bisschen seltsam, aber zumindest keine falschen Syntaxfehler. Leider werden die Fehler immer noch in VS2013 gemeldet, so dass dies (noch) nicht richtig angesprochen wurde.

2
mabian69

Nicht so sehr eine Antwort als eine vorsichtige Geschichte: Dies brachte mich ebenfalls in Schwierigkeiten - und ich dachte, ich hätte eine Lösung, indem ich eine Null anhängig machte und die @(...)-Syntax verwendete. Ihr Code wäre also:

var nonID = [email protected](nonProID);
var proID = [email protected](proID);

Ausgabe erhalten wie:

var nonId = 0123;

Was ich nicht wusste, war, dass JavaScript (Version 3) auf diese Weise Oktal-/Basis-8-Zahlen darstellt und tatsächlich den Wert ändert. Wenn Sie den Befehl "use strict"; verwenden, wird der Code außerdem vollständig beschädigt, da die Oktalzahlen entfernt wurden.

Ich suche immer noch nach einer geeigneten Lösung.

2
Rob Church

Ich habe eine sehr saubere Lösung gefunden, die eine separate Logik und GUI ermöglicht:

versuchen Sie Folgendes in Ihrer Rasierer-.cshtml-Seite:

<body id="myId" data-my-variable="myValue">

...your page code here

</body>

in Ihrer .js-Datei oder .ts (wenn Sie TypeScript verwenden), um gespeicherte Werte aus Ihrer Ansicht zu lesen, setzen Sie einige davon (Jquery-Bibliothek ist erforderlich):

$("#myId").data("my-variable")
2
Rafael Rivarola

Ich habe diesen Ansatz untersucht:

function getServerObject(serverObject) {
  if (typeof serverObject === "undefined") {
    return null;
  }
  return serverObject;
}

var itCameFromDotNet = getServerObject(@dotNetObject);

Für mich scheint dies auf der JS-Seite sicherer zu sein ... Im schlimmsten Fall erhalten Sie eine Null-Variable.

2
Ryan Young

Einer der einfachen Wege ist:

<input type="hidden" id="SaleDateValue" value="@ViewBag.SaleDate" />
<input type="hidden" id="VoidItem" value="@Model.SecurityControl["VoidItem"].ToString()" />

Und dann den Wert in Javascript erhalten:

var SaleDate = document.getElementById('SaleDateValue').value;
var Item = document.getElementById('VoidItem').value;
1
Arsman Ahmad

Ich verwende eine sehr einfache function, um Syntaxfehler im Hauptteil von JavaScript-Codes zu lösen, die sich mit Razor-Codes ;)

function n(num){return num;}

var nonID = n(@nonProID);
var proID= n(@proID);
0
RAM

Dies sollte alle Haupttypen abdecken:

public class ViewBagUtils
{
    public static string ToJavascriptValue(dynamic val)
    {
        if (val == null) return "null";
        if (val is string) return val;
        if (val is bool) return val.ToString().ToLower();
        if (val is DateTime) return val.ToString();
        if (double.TryParse(val.ToString(), out double dval)) return dval.ToString();

        throw new ArgumentException("Could not convert value.");
    }
}

Und in Ihrer .cshtml-Datei im <script>-Tag:

@using Namespace_Of_ViewBagUtils
const someValue = @ViewBagUtils.ToJavascriptValue(ViewBag.SomeValue);

Beachten Sie, dass Sie für Zeichenfolgenwerte den Ausdruck @ViewBagUtils in einfachen (oder doppelten) Anführungszeichen verwenden müssen.

const someValue = "@ViewBagUtils.ToJavascriptValue(ViewBag.SomeValue)";
0
wm1sr