Доступ до властивості моделі 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?

Я спробував це, але я отримав "невизначений"

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

Ви можете взяти всю модель на стороні сервера і перетворити її в об'єкт Javascript, виконавши наступні дії:

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

У вашому випадку, якщо ви просто хочете об'єкт FloorPlanSettings, просто передайте Encodeметод, який властиво:

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

Зміст відповіді

1) Як отримати доступ до даних моделі у блоці коду Javascript / Jquery у .cshtmlфайлі

2) Як отримати доступ до даних моделі у блоці коду Javascript / Jquery у .jsфайлі

Як отримати доступ до даних моделі у блоці коду Javascript / Jquery у .cshtmlфайлі

Існує два типи Modelприсвоєння змінної JavaScript # (c ).

1. Призначення нерухомості - Основні типи даних подобається int, string, DateTime(наприклад: Model.Name)
2. Призначення об'єкта - для користувача або вбудовані класи (наприклад: 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'; 

Результати справедливі, тому загортання призначення властивостей у лапки дає нам дійсний синтаксис. Але зауважте, що число 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>"

Висновок присвоєння майна

• Використовуйте лапки для нечислових данихType.
• Не використовуйте лапки для числового типу даних.
• Використовуйте Html.Rawдля інтерпретації ваших HTML-даних як є.
• Подбайте про свої HTML-дані, щоб уникнути значення цитат на стороні сервера, або використовуйте іншу цитату, ніж у даних під час присвоєння змінній javascript.

Призначення об'єкта

Дозволяє використовувати різні синтаксиси для призначення та спостерігати за результатами.

1) Без загортання призначення об'єктів у лапки.

  var userObj = @Model; 

Якщо ви призначите об'єкт ac # перемінному javascript .ToString(), то буде вказано значення цього oject. Звідси вищенаведений результат.

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 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в поєднанні, щоб призначити ваш об'єкт змінній 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файлі, і тому ми не можемо безпосередньо використовувати модель Model insisde .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>

Примітка: Ваш зовнішній файл повинен бути посилається на попередній сценарій. В іншому випадку userDataDependentфункція не визначена.

Також зауважте, що функція повинна бути і в глобальному масштабі. Таким чином, будь-яким рішенням ми маємо мати справу з глобальними гравцями, які охоплюють область.

спробуйте це: (ви пропустили єдині цитати)

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

Обертання властивості моделі навколо паронів працювало на мене. Ви все ще отримуєте те саме питання, що Visual Studio скаржиться на напівкрапку, але це працює.

var closedStatusId = @(Model.ClosedStatusId);

Якщо помилка "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 ;
    }
});

Сподіваюся, це допомагає ...

Я знаю, що це занадто пізно, але це рішення працює ідеально як для .net Framework, так і для .net core:

@ System.Web.HttpUtility.JavaScriptStringEncode ()