Содержание ответа
1) Как получить доступ к данным модели в блоке кода Javascript / Jquery в .cshtmlфайле
2) Как получить доступ к данным модели в блоке кода Javascript / Jquery в .jsфайле
Как получить доступ к данным модели в блоке кода Javascript / Jquery в .cshtmlфайле
Существует два типа Modelприсвоения переменной c # ( ) переменной JavaScript.
- Назначение недвижимости - Основные типы данных нравится
int, string, DateTime(например: Model.Name)
- Назначение объекта - Пользовательские или встроенные классы (например
Model, Model.UserSettingsObj)
Давайте посмотрим на детали этих двух заданий.
Для остальной части ответа рассмотрим приведенную ниже AppUserмодель в качестве примера.
public class AppUser
{
public string Name { get; set; }
public bool IsAuthenticated { get; set; }
public DateTime LoginDateTime { get; set; }
public int Age { get; set; }
public string UserIconHTML { get; set; }
}
И значения, которые мы присваиваем этой модели:
AppUser appUser = new AppUser
{
Name = "Raj",
IsAuthenticated = true,
LoginDateTime = DateTime.Now,
Age = 26,
UserIconHTML = "<i class='fa fa-users'></i>"
};
Передача имущества
Давайте использовать другой синтаксис для присваивания и наблюдать за результатами.
1) Без переноса свойства в кавычки.
var Name = @Model.Name;
var Age = @Model.Age;
var LoginTime = @Model.LoginDateTime;
var IsAuthenticated = @Model.IsAuthenticated;
var IconHtml = @Model.UserIconHTML;
Как вы можете видеть, есть несколько ошибок, Rajи они Trueсчитаются переменными javascript, и, поскольку они не существуют, это variable undefinedошибка. Если для переменной dateTime ошибка состоит в том, что unexpected numberчисла не могут иметь специальных символов, теги HTML преобразуются в имена объектов, чтобы браузер не смешивал ваши значения и разметку HTML.
2) Завершение присваивания свойств в кавычках.
var Name = '@Model.Name';
var Age = '@Model.Age';
var LoginTime = '@Model.LoginDateTime';
var IsAuthenticated = '@Model.IsAuthenticated';
var IconHtml = '@Model.UserIconHTML';
Результаты действительны, поэтому перенос свойства в кавычки дает нам правильный синтаксис. Но обратите внимание, что Number Ageтеперь является строкой, поэтому, если вы не хотите, мы можем просто удалить кавычки, и он будет отображаться как числовой тип.
3) Использование @Html.Rawбез кавычек в кавычках
var Name = @Html.Raw(Model.Name);
var Age = @Html.Raw(Model.Age);
var LoginTime = @Html.Raw(Model.LoginDateTime);
var IsAuthenticated = @Html.Raw(Model.IsAuthenticated);
var IconHtml = @Html.Raw(Model.UserIconHTML);
Результаты аналогичны наш тест 1. Однако при использовании @Html.Raw()на HTMLстроке были показать нам некоторые изменения. HTML-код сохраняется без изменения имен его сущностей.
Из документов Html.Raw ()
Оборачивает разметку HTML в экземпляр HtmlString, чтобы она интерпретировалась как разметка HTML.
Но все же у нас есть ошибки в других строках.
4) Использование, @Html.Rawа также упаковка в кавычки
var Name ='@Html.Raw(Model.Name)';
var Age = '@Html.Raw(Model.Age)';
var LoginTime = '@Html.Raw(Model.LoginDateTime)';
var IsAuthenticated = '@Html.Raw(Model.IsAuthenticated)';
var IconHtml = '@Html.Raw(Model.UserIconHTML)';
Результаты хороши для всех типов. Но наши HTMLданные теперь сломаны, и это сломает сценарии. Проблема заключается в том, что мы используем одинарные кавычки, 'чтобы обернуть данные, и даже данные имеют одинарные кавычки.
Мы можем преодолеть эту проблему с 2 подходами.
1) использовать двойные кавычки " "для переноса части HTML. Поскольку внутренние данные имеют только одинарные кавычки. (Убедитесь, что после переноса в двойные кавычки "внутри данных тоже нет)
var IconHtml = "@Html.Raw(Model.UserIconHTML)";
2) Избегайте значения символов в вашем коде на стороне сервера. подобно
UserIconHTML = "<i class=\"fa fa-users\"></i>"
Заключение о передаче имущества
- Используйте кавычки для нечислового типа данных.
- Не используйте кавычки для числового типа данных.
- Используйте
Html.Rawдля интерпретации ваших HTML-данных как есть.
- Позаботьтесь о ваших данных HTML, чтобы избежать кавычек, означающих на стороне сервера, или использовать другую кавычку, чем в данных, во время присваивания переменной javascript.
Назначение объекта
Давайте использовать другой синтаксис для присваивания и наблюдать за результатами.
1) Без переноса объекта в кавычки.
var userObj = @Model;
Когда вы присваиваете объект ac # переменной javascript .ToString(), будет назначено значение этого объекта. Отсюда и вышеприведенный результат.
2 Заключение объекта в кавычки
var userObj = '@Model';
3) Использование Html.Rawбез кавычек.
var userObj = @Html.Raw(Model);
4) Использование Html.Rawвместе с цитатами
var userObj = '@Html.Raw(Model)';
Html.RawБыл не много пользы для нас в то время как назначение объекта к переменной.
5) Использование Json.Encode()без кавычек
var userObj = @Json.Encode(Model);
//result is like
var userObj = {"Name":"Raj",
"IsAuthenticated":true,
"LoginDateTime":"\/Date(1482572875150)\/",
"Age":26,
"UserIconHTML":"\u003ci class=\"fa fa-users\"\u003e\u003c/i\u003e"
};
Мы видим некоторые изменения, мы видим, что наша Модель интерпретируется как объект. Но мы изменили эти специальные символы entity names. Кроме того, упаковка приведенного выше синтаксиса в кавычки бесполезна. Мы просто получаем тот же результат в кавычках.
Из документов Json.Encode ()
Преобразует объект данных в строку в формате нотации объектов JavaScript (JSON).
Поскольку вы уже сталкивались с этой entity Nameпроблемой при назначении свойств, и, если вы помните, мы преодолели ее с помощью Html.Raw. Итак, давайте попробуем это. Позволяет объединить Html.RawиJson.Encode
6) Использование Html.Rawи Json.Encodeбез кавычек.
var userObj = @Html.Raw(Json.Encode(Model));
Результат является допустимым объектом Javascript
var userObj = {"Name":"Raj",
"IsAuthenticated":true,
"LoginDateTime":"\/Date(1482573224421)\/",
"Age":26,
"UserIconHTML":"\u003ci class=\"fa fa-users\"\u003e\u003c/i\u003e"
};
7) Использование Html.Rawи Json.Encodeв кавычках.
var userObj = '@Html.Raw(Json.Encode(Model))';
Как вы видите, упаковка с кавычками дает нам данные JSON
Заключение о назначении объекта
- Используйте
Html.Rawи Json.Encodeв сочетании, чтобы назначить свой объект переменной javascript как объект JavaScript .
- Используйте,
Html.Rawа Json.Encodeтакже оберните его внутри, quotesчтобы получить JSON
Примечание. Если вы заметили, что формат данных DataTime неверен. Это потому, что, как было сказано ранее, Converts a data object to a string that is in the JavaScript Object Notation (JSON) formatJSON не содержит dateтип. Другие варианты , чтобы исправить это , чтобы добавить еще одну строку кода для обработки этого типа в одиночку , используя Javascipt Дата) ( объект
var userObj.LoginDateTime = new Date('@Html.Raw(Model.LoginDateTime)');
//without Json.Encode
Как получить доступ к данным модели в блоке кода Javascript / Jquery в .jsфайле
Синтаксис Razor не имеет значения в .jsфайле, и, следовательно, мы не можем напрямую использовать нашу модель в .jsфайле. Однако есть обходной путь.
1) Решение использует глобальные переменные javascript .
Мы должны присвоить значение глобальной переменной javascipt в области видимости, а затем использовать эту переменную во всем блоке кода вашего .cshtmlи .jsфайлов. Таким образом, синтаксис будет
<script type="text/javascript">
var userObj = @Html.Raw(Json.Encode(Model)); //For javascript object
var userJsonObj = '@Html.Raw(Json.Encode(Model))'; //For json data
</script>
Имея это в виду, мы можем использовать переменные userObjи по userJsonObjмере необходимости.
Примечание: я лично не предлагаю использовать глобальные переменные, так как это очень сложно для поддержки. Однако, если у вас нет другого выбора, вы можете использовать его с соответствующим соглашением об именах ... что-то вроде userAppDetails_global.
2) Используя функцию () или closure
Wrap весь код, который зависит от данных модели в функции. И затем выполните эту функцию из .cshtmlфайла.
external.js
function userDataDependent(userObj){
//.... related code
}
.cshtml файл
<script type="text/javascript">
userDataDependent(@Html.Raw(Json.Encode(Model))); //execute the function
</script>
Примечание: Ваш внешний файл должен быть указан до сценария выше. В противном случае userDataDependentфункция не определена.
Также обратите внимание, что функция также должна находиться в глобальной области видимости. Таким образом, любое решение нам приходится иметь дело с глобальными игроками.