[JQUERY] 자바 스크립트에서 MVC의 모델 속성에 액세스

자바 스크립트에서 MVC의 모델 속성에 액세스

해결법

1. ---

   1.당신은 당신의 전체 서버 측 모델을하고 다음을 수행하여 자바 스크립트 객체로 돌려 수 :

   당신은 당신의 전체 서버 측 모델을하고 다음을 수행하여 자바 스크립트 객체로 돌려 수 :

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

   그냥 FloorPlanSettings 객체를 원하는 경우 귀하의 경우, 단순히 해당 속성을 인코딩 방법을 전달합니다

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

2. ---

   2.자바 스크립트 변수에 C #을 변수 (모델) 지정의 두 가지 유형이 있습니다.

   자바 스크립트 변수에 C #을 변수 (모델) 지정의 두 가지 유형이 있습니다.

   이 두 과제의 세부 사항을 조사 할 수 있도록합니다.

   대답의 나머지 예로 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;  
   

   당신이 오류의 부부가 볼 수 있듯이, 라지와 진정한는 자바 스크립트 변수로 간주하고 그 변수 정의되지 않은 오류가 존재 해달라고 이후됩니다. 날짜 시간 varialble에 관해서는 오류가 예기치 않은 수의 번호는 특수 문자를 가질 수 없습니다되는 경우, HTML 태그는 브라우저가 HTML 마크 업을 당신의 가치를 혼합하지 않도록 그 실체 이름으로 변환됩니다.

   지수 2) 포장의 속성이 할당되었습니다.

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

   결과는 유효합니다, 그래서 따옴표로 속성 할당을 포장하는 것은 우리에게 올바른 구문을 제공합니다. 그러나 번호 나이가 이제 문자열 참고, 그래서 당신은 우리가 따옴표를 제거 할 수 싶지 않는 그것은 숫자 형식으로 렌더링됩니다.

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

   결과는 그러나 우리에게 약간의 변화를 보이지 않았다 HTML 문자열에 @ Html.Raw ()를 사용하여 우리의 테스트 케이스 (1)과 유사하다. html로 그것의 엔티티 이름을 변경하지 않고 그대로 유지됩니다.

   ) (워드 프로세서 Html.Raw

   하지만 여전히 우리는 다른 라인에 오류가 있습니다.

   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>"
   

   속성이 할당 결론

   과제에 대해 서로 다른 구문을 사용하고 결과를 관찰 할 수 있습니다.

   1) 따옴표로 포장 객체 할당없이.

     var userObj = @Model; 
   

   당신은 자바 스크립트 변수에 C #을 객체에게 그 oject의로 .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"
                 };
   

   우리는 우리는 우리의 모델은 객체로 해석되고있다 참조, 약간의 변화를 볼 않습니다. 그러나 우리는 엔티티 이름으로 변경하는 특수 문자가 있습니다. 또한 따옴표로 위의 구문을 포장하는 것은 더 많이 사용합니다. 우리는 단순히 따옴표 내에서 동일한 결과를 얻을.

   Json.Encode의 워드 프로세서 ()

   당신은 이미 속성이 할당이 엔티티와 이름 문제가 발생하고 당신이 기억한다면 우리는 Html.Raw의 사용과 그것을 극복한다. 그래서 밖으로 시도 할 수 있습니다. Html.Raw 및 Json.Encode을 결합 할 수 있습니다

   6) 따옴표없이 Html.Raw 및 Json.Encode 사용.

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

   결과는 유효한 자바 스크립트 객체입니다

    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 데이터를 제공합니다

   개체 할당에 대한 결론

   참고 : DataTime 데이터 형식을 관찰 한 경우 옳지 않다. 이 때문에 이전 변환 자바 스크립트 객체 표기법 (JSON) 형식이며 JSON가 날짜 형식을 포함하지 않는 문자열 데이터 오브젝트 말했듯이. 다른 옵션이 javascipt 날짜를 사용하여 단독으로이 유형을 처리하는 코드의 또 다른 라인을 추가하는 것입니다 해결하기 위해 () 객체

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

   면도기 구문의 .js 파일에 의미가 없습니다 따라서 우리는 직접은 .js 파일 insisde 우리의 모델을 사용할 수 없습니다. 그러나 해결 방법이 있습니다.

   1) 용해 자바 스크립트 글로벌 변수를 사용한다.

   우리는 글로벌 범위 자바 스크립트 변수에 값을 할당 한 다음 .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) () 함수 또는 폐쇄 사용 함수의 모델 데이터에 의존하는 모든 코드를 바꿈. 그리고 다음 .cshtml 파일에서이 기능을 실행합니다.

   external.js

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

   .cshtml 파일

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

   참고 : 외부 파일이 위의 스크립트 이전에 참조해야합니다. 그렇지 않으면 userDataDependent 기능이 정의되어 있지 않습니다.

   또한 기능도 전역 범위에 있어야 있습니다. 두 솔루션 그래서 우리는 글로벌 범위의 플레이어들과 거래를해야합니다.

3. ---

   3.이 시도 : (당신이 따옴표를 놓친)

   이 시도 : (당신이 따옴표를 놓친)

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

4. ---

   4.나를 위해 일한 괄호 주위의 모델 속성을 포장. 당신은 여전히 ​​비주얼 스튜디오는 세미콜론 불평과 같은 문제를 얻을 수 있지만, 그것을 작동합니다.

   나를 위해 일한 괄호 주위의 모델 속성을 포장. 당신은 여전히 ​​비주얼 스튜디오는 세미콜론 불평과 같은 문제를 얻을 수 있지만, 그것을 작동합니다.

   var closedStatusId = @(Model.ClosedStatusId);
   

5. ---

   5.경우 오류가 발생합니다 "ReferenceError가 모델이 정의되지 않은", 당신은 다음과 같은 방법을 사용하여 시도 할 수 있습니다 :

   경우 오류가 발생합니다 "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 ;
       }
   });
   

   도움이 되었기를 바랍니다...

6. ---

   6.나는 너무 늦기 알고 있지만이 솔루션은 .NET Framework 및 .NET 코어 모두를위한 완벽한을하고있다 :

   나는 너무 늦기 알고 있지만이 솔루션은 .NET Framework 및 .NET 코어 모두를위한 완벽한을하고있다 :

   @ System.Web.HttpUtility.JavaScriptStringEncode ()

from https://stackoverflow.com/questions/16361364/accessing-mvcs-model-property-from-javascript by cc-by-sa and MIT license