Доступ к свойствам модели MVC из Javascript

У меня есть следующая модель, которая завернута в мою модель просмотра

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; }
}

Как мне получить доступ к одному из вышеуказанных свойств из Javascript?

Я пробовал это, но получил "undefined" 

var floorplanSettings = "@Model.FloorPlanSettings";
alert(floorplanSettings.IconsDirectory);

Ответы

Ответ 1

Вы можете взять всю свою серверную модель и превратить ее в объект Javascript, выполнив следующие действия:

var model = @Html.Raw(Json.Encode(Model));

В вашем случае, если вы просто хотите объект FloorPlanSettings, просто передайте метод Encode, что свойство:

var floorplanSettings = @Html.Raw(Json.Encode(Model.FloorPlanSettings));

Ответ 2

Содержание ответа

1) Как получить доступ к данным модели в блоке кода Javascript/JQuery в файле .cshtml

2) Как получить доступ к данным модели в блоке кода Javascript/JQuery в файле .js

Как получить доступ к данным модели в блоке Javascript/JQuery в файле .cshtml

Существует два типа назначений переменной С# (Model) для переменной JavaScript.

  • Свойство свойств. Основные типы данных, такие как int, string, DateTime (ex: 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 varialble ошибка unexpected number числа не могут иметь специальные символы, тэги HTML преобразуются в имена сущностей, чтобы браузер не смешивал ваши значения и разметку HTML.

2) Задание свойств в Quotes.

var Name = '@Model.Name';
var Age = '@Model.Age';
var LoginTime = '@Model.LoginDateTime';
var IsAuthenticated = '@Model.IsAuthenticated';
var IconHtml = '@Model.UserIconHTML';

введите описание изображения здесь

Результаты действительны, поэтому перенос присвоения свойств в кавычки дает нам действительный синтаксис. Но обратите внимание, что число 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 теперь сломаны, и это сломает скрипты. Проблема заключается в том, что мы используем одинарные кавычки ' для обертывания данных, и даже данные имеют одинарные кавычки.

Мы можем преодолеть эту проблему с помощью двух подходов.

1) используйте двойные кавычки " ", чтобы обернуть часть HTML. Поскольку внутренние данные имеют только одинарные кавычки. (Убедитесь, что после обертывания двойными кавычками в данных также нет ")

  var IconHtml = "@Html.Raw(Model.UserIconHTML)";

2) Устраните значение символа в коде на стороне сервера. Как

  UserIconHTML = "<i class=\"fa fa-users\"></i>"

Заключение присвоения свойств

  • Использовать кавычки для не numeric dataType.
  • Не использовать кавычки для числового типа данных.
  • Используйте Html.Raw для интерпретации ваших данных HTML как есть.
  • Позаботьтесь о своих данных HTML, чтобы либо избежать значения котировок на стороне сервера, либо использовать другую цитату, чем в данных при присваивании переменной javascript.

Назначение объектов

Используется другой синтаксис для назначения и наблюдения за результатами.

1) Без переноса назначения объектов в кавычках.

  var userObj = @Model;

введите описание изображения здесь

Когда вы назначаете объект С# переменной 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 = {&quot;Name&quot;:&quot;Raj&quot;,
               &quot;IsAuthenticated&quot;:true,
               &quot;LoginDateTime&quot;:&quot;\/Date(1482572875150)\/&quot;,
               &quot;Age&quot;:26,
               &quot;UserIconHTML&quot;:&quot;\u003ci class=\&quot;fa fa-users\&quot;\u003e\u003c/i\u003e&quot;
              };

Мы видим некоторые изменения. Мы видим, что наша Модель интерпретируется как объект. Но у нас есть специальные символы, измененные на entity names. Кроме того, обертка вышеуказанного синтаксиса в кавычках не имеет большого значения. Мы просто получаем тот же результат в кавычках.

Из документов Json.Encode()

Преобразует объект данных в строку, которая находится в формате JavaScript Object Notation (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 в combintaion, чтобы назначить ваш объект переменной javascript как объект JavaScript.
  • Используйте Html.Raw и Json.Encode также оберните его в quotes, чтобы получить JSON

Примечание. Если вы заметили, что формат данных DataTime неверен. Это связано с тем, что, как было сказано ранее, Converts a data object to a string that is in the JavaScript Object Notation (JSON) format и JSON не содержит типа date. Другие варианты исправить это - добавить еще одну строку кода для обработки этого типа самостоятельно, используя javascipt Date() object

var userObj.LoginDateTime = new Date('@Html.Raw(Model.LoginDateTime)'); 
//without Json.Encode

Как получить доступ к данным модели в блоке кода Javascript/JQuery в файле .js

Синтаксис Razor не имеет значения в файле .js, поэтому мы не можем напрямую использовать наш файл Model insisde a .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 Оберните весь код, который зависит от данных модели в функции. Затем выполните эту функцию из файла .cshtml.

external.js

 function userDataDependent(userObj){
  //.... related code
 }

.cshtml файл

 <script type="text/javascript">
  userDataDependent(@Html.Raw(Json.Encode(Model))); //execute the function     
</script>

Примечание. Перед предыдущим script должен быть указан ваш внешний файл. Иначе функция userDataDependent undefined.

Также обратите внимание, что функция также должна быть в глобальной области. Таким образом, решение, которое мы имеем дело с глобальными игроками с охватом.

Ответ 3

попробуйте следующее: (вы пропустили одиночные кавычки)

var floorplanSettings = '@Html.Raw(Json.Encode(Model.FloorPlanSettings))';

Ответ 4

Для меня работала обмотка свойства модели вокруг parens. Вы по-прежнему сталкиваетесь с той же проблемой, что и Visual Studio, которая жалуется на полуточку, но она работает.

var closedStatusId = @(Model.ClosedStatusId);

Ответ 5

Если ошибка "ReferenceError: Model не определена", вы можете попытаться использовать следующий метод:

$(document).ready(function () {

    @{  var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
         var json = serializer.Serialize(Model);
    }

    var model = @Html.Raw(json);
    if(model != null && @Html.Raw(json) != "undefined")
    {
        var id= model.Id;
        var mainFloorPlanId = model.MainFloorPlanId ;
        var imageDirectory = model.ImageDirectory ;
        var iconsDirectory = model.IconsDirectory ;
    }
});

Надеюсь, что это поможет...