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

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

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

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

как получить доступ к данным модели в блоке кода Javascript / Jquery в .cshtml file

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

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 varialble ошибка 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 теперь a строка, так что если вы не хотите, что мы можем просто удалить кавычки, и он будет отображаться как тип числа.

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; 

при назначении объекта c# переменной javascript значение .ToString() из этого oject будет назначен. Отсюда и вышеприведенный результат.

2 Обертывание назначения объекта в кавычки

var userObj = '@Model'; 

3) используя Html.Raw без кавычек.

   var userObj = @Html.Raw(Model); 

4) используя Html.Raw вместе с цитатами

   var userObj = '@Html.Raw(Model)'; 

The 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.Кодировать()

преобразует объект данных в строку то есть в формате 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 object.
• использовать 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 Дата () объект

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

---

---

как получить доступ к данным модели в блоке кода Javascript/Jquery в .js file

синтаксис Razor не имеет смысла в .js file и, следовательно, мы не можем напрямую использовать нашу модель insisde a . Однако есть обходной путь.

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) используя .

external.js

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

.cshtml file

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

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

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

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

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

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

var closedStatusId = @(Model.ClosedStatusId);

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

$(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 ;
    }
});

надеюсь, что это помогает...