Ich habe das folgende Modell, das in mein Ansichtsmodell eingeschlossen ist
public class FloorPlanSettingsModel
{
public int Id { get; set; }
public int? MainFloorPlanId { get; set; }
public string ImageDirectory { get; set; }
public string ThumbnailDirectory { get; set; }
public string IconsDirectory { get; set; }
}
Wie greife ich über Javascript auf eine der oben genannten Eigenschaften zu?
Ich habe es versucht, aber ich wurde "undefiniert"
var floorplanSettings = "@Model.FloorPlanSettings";
alert(floorplanSettings.IconsDirectory);
c#
javascript
jquery
asp.net-mvc
model
Nullreferenz
quelle
quelle
Antworten:
Sie können Ihr gesamtes serverseitiges Modell wie folgt in ein Javascript-Objekt umwandeln:
Wenn Sie in Ihrem Fall nur das FloorPlanSettings-Objekt möchten, übergeben Sie einfach die
Encode
Methode that property:quelle
Zugriff auf Modelldaten im Javascript / Jquery-Codeblock in der
.cshtml
DateiEs gibt zwei Arten von
Model
Zuweisungen von c # -Variablen ( ) zu JavaScript-Variablen.int
,string
,DateTime
(zB:Model.Name
)Model
,Model.UserSettingsObj
)Schauen wir uns die Details dieser beiden Aufgaben an.
Für den Rest der Antwort betrachten wir das folgende
AppUser
Modell als Beispiel.Und die Werte, die wir diesem Modell zuweisen, sind
Eigentumszuweisung
Verwenden wir eine andere Syntax für die Zuweisung und beobachten Sie die Ergebnisse.
1) Ohne die Zuweisung von Eigenschaften in Anführungszeichen zu setzen.
Wie Sie es gibt einige Fehler sehen können,
Raj
undTrue
wird als JavaScript - Variablen sein und da sie ihren einen nicht existierenvariable undefined
Fehler. Wenn bei der Datumsangabe varialble der Fehler darin besteht, dassunexpected number
Zahlen keine Sonderzeichen enthalten dürfen, werden die HTML-Tags in ihre Entitätsnamen konvertiert, damit der Browser Ihre Werte und das HTML-Markup nicht verwechselt.2) Umschließen der Zuweisung von Eigenschaften in Anführungszeichen.
Die Ergebnisse sind gültig. Wenn Sie also die Eigenschaftszuweisung in Anführungszeichen setzen, erhalten Sie eine gültige Syntax. Beachten Sie jedoch, dass die Zahl
Age
jetzt eine Zeichenfolge ist. Wenn Sie also nicht möchten, dass wir die Anführungszeichen entfernen können, wird sie als Zahlentyp gerendert.3) Verwenden,
@Html.Raw
aber ohne es in Anführungszeichen zu setzenDie Ergebnisse ähneln unserem Testfall 1. Die Verwendung
@Html.Raw()
derHTML
Zeichenfolge hat jedoch einige Änderungen gezeigt. Der HTML-Code wird beibehalten, ohne dass die Entitätsnamen geändert werden.Aus den Dokumenten Html.Raw ()
Trotzdem haben wir Fehler in anderen Zeilen.
4) Verwenden
@Html.Raw
und auch in Anführungszeichen setzenDie Ergebnisse sind bei allen Typen gut. Aber unsere
HTML
Daten sind jetzt kaputt und dies wird die Skripte kaputt machen. Das Problem ist, dass wir einfache Anführungszeichen verwenden'
, um die Daten zu verpacken, und sogar die Daten einfache Anführungszeichen haben.Wir können dieses Problem mit zwei Ansätzen lösen.
1) Verwenden Sie doppelte Anführungszeichen
" "
, um den HTML-Teil zu verpacken. Da die inneren Daten nur einfache Anführungszeichen haben. (Stellen Sie sicher, dass nach dem Umschließen mit doppelten Anführungszeichen auch keine"
Daten enthalten sind.)2) Entfliehen Sie der Zeichenbedeutung in Ihrem serverseitigen Code. Mögen
Abschluss der Immobilienvergabe
Html.Raw
Sie diese Option, um Ihre HTML-Daten so zu interpretieren, wie sie sind.Objektzuordnung
Verwenden wir eine andere Syntax für die Zuweisung und beobachten Sie die Ergebnisse.
1) Ohne die Objektzuweisung in Anführungszeichen zu setzen.
Wenn Sie der Javascript-Variablen ein ac # -Objekt zuweisen, wird der Wert des
.ToString()
Objekts zugewiesen. Daher das obige Ergebnis.2 Umschließen der Objektzuweisung in Anführungszeichen
3) Verwenden
Html.Raw
ohne Anführungszeichen.4) Verwenden Sie
Html.Raw
zusammen mit AnführungszeichenDas hat
Html.Raw
uns beim Zuweisen eines Objekts zur Variablen wenig geholfen.5) Verwenden
Json.Encode()
ohne AnführungszeichenWir sehen einige Veränderungen. Wir sehen, dass unser Modell als Objekt interpretiert wird. Aber wir haben diese Sonderzeichen geändert
entity names
. Auch das Umschließen der obigen Syntax in Anführungszeichen nützt wenig. Wir erhalten einfach das gleiche Ergebnis in Anführungszeichen.Aus den Dokumenten von Json.Encode ()
Da Sie dieses
entity Name
Problem bereits bei der Zuweisung von Eigenschaften festgestellt haben und wenn Sie sich erinnern, haben wir es mit der Verwendung von überwundenHtml.Raw
. Probieren wir das aus. Lasst uns kombinierenHtml.Raw
undJson.Encode
6) Verwenden
Html.Raw
undJson.Encode
ohne Anführungszeichen.Ergebnis ist ein gültiges Javascript-Objekt
7) Verwenden
Html.Raw
undJson.Encode
innerhalb von Anführungszeichen.Wie Sie sehen, erhalten Sie beim Umschließen mit Anführungszeichen JSON-Daten
Schlussfolgerung zur Objektzuordnung
Html.Raw
undJson.Encode
in Kombination, um Ihr Objekt der Javascript-Variablen als JavaScript-Objekt zuzuweisen .Html.Raw
undJson.Encode
wickeln Sie es auch einquotes
, um einen JSON zu erhaltenHinweis: Wenn Sie festgestellt haben, dass das DataTime-Datenformat nicht richtig ist. Dies liegt daran, dass
Converts a data object to a string that is in the JavaScript Object Notation (JSON) format
JSON wie bereits erwähnt keinendate
Typ enthält. Weitere Optionen, um dies zu beheben, sind das Hinzufügen einer weiteren Codezeile, um diesen Typ allein mit dem Objekt javascipt Date () zu behandelnZugriff auf Modelldaten im Javascript / Jquery-Codeblock in der
.js
DateiDie Rasierersyntax hat in der
.js
Datei keine Bedeutung und daher können wir unser Modell nicht direkt in einer.js
Datei verwenden. Es gibt jedoch eine Problemumgehung.1) Die Lösung verwendet globale Javascript-Variablen .
Wir müssen den Wert einer Javascipt-Variablen mit globalem Gültigkeitsbereich zuweisen und diese Variable dann in allen Codeblöcken Ihrer
.cshtml
und Ihrer.js
Dateien verwenden. Die Syntax wäre alsoIn diesem Ort können wir die Variablen verwenden ,
userObj
unduserJsonObj
wie und wann erforderlich.Hinweis: Ich persönlich empfehle nicht, globale Variablen zu verwenden, da die Wartung sehr schwierig wird. Wenn Sie jedoch keine andere Option haben, können Sie sie mit einer geeigneten Namenskonvention verwenden
userAppDetails_global
.2) Verwenden Sie function () oder
closure
Wrap den gesamten Code, der von den Modelldaten in einer Funktion abhängig ist. Führen Sie diese Funktion dann aus der.cshtml
Datei aus.external.js
.cshtml
DateiHinweis: Auf Ihre externe Datei muss vor dem obigen Skript verwiesen werden. Sonst ist die
userDataDependent
Funktion undefiniert.Beachten Sie auch, dass die Funktion auch im globalen Bereich sein muss. Bei beiden Lösungen müssen wir uns also mit globalen Akteuren befassen.
quelle
var model = @Html.Raw(Json.Encode(Model));
dass dadurch ein Javascript-Objekt erstellt wird,model
das keine Verbindung mit dem C # -Modell hat, das Sie an die Ansicht übergeben.Model
Nach dem Rendern der Ansicht wird keine angezeigt . Das Formular in der Benutzeroberfläche hat also keine Ahnung von den Änderungen der Javascript-Objektdaten. Sie müssen jetzt das gesamte modifizierte Modell über AJAX an den Controller übergeben. Oder Sie müssen den Wert Ihrer Eingabesteuerelemente im Formular mithilfe von Javascript aktualisieren.Although I did the same thing using hidden Html control and bound it to EventCommand and updated it's value in javascript. But wondering if could do same directly to model?
Für diese Anweisung gibt esEventCommand
in MVC keine , für Webforms, bei denen eine Verbindung zwischen der Benutzeroberfläche und den Serveraktionen besteht. In MVC ist alles getrennt. Sie können nur über AJAX oder Form Submit oder New Page Request (auch neu laden) mit dem Controller interagierenVersuchen Sie Folgendes: (Sie haben die einfachen Anführungszeichen verpasst)
quelle
JSON
wihtout Anführungszeichen gibt Ihnen einejavascript Object
. Überprüfen Sie meine Antwort im selben Thread für weitere Details. stackoverflow.com/a/41312348/2592042Das Umwickeln der Modelleigenschaft um Parens hat bei mir funktioniert. Sie haben immer noch das gleiche Problem, wenn Visual Studio sich über das Semikolon beschwert, aber es funktioniert.
quelle
Wenn der Fehler "ReferenceError: Modell ist nicht definiert" ausgelöst wird, können Sie versuchen, die folgende Methode zu verwenden:
Hoffe das hilft...
quelle
Ich weiß, dass es zu spät ist, aber diese Lösung funktioniert perfekt sowohl für das .net-Framework als auch für den .net-Kern:
@ System.Web.HttpUtility.JavaScriptStringEncode ()
quelle