Javascript에서 MVC의 모델 속성에 액세스

뷰 모델에 래핑 된 다음 모델이 있습니다.

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) .cshtml파일 에서 Javascript / Jquery 코드 블록으로 모델 데이터에 액세스하는 방법

2) .js파일 에서 Javascript / Jquery 코드 블록으로 모델 데이터에 액세스하는 방법

.cshtml파일 에서 Javascript / Jquery 코드 블록으로 모델 데이터에 액세스하는 방법

ModelJavaScript 변수에 대한 두 가지 유형의 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그들이 그 존재 해달라고하기 때문에 자바 스크립트 변수로 간주되어 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는 이제 문자열이므로 참고를 원하지 않으면 따옴표를 제거하면 숫자 유형으로 렌더링됩니다.

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 마크 업을 HTML 마크 업으로 해석하도록 HTML 태그를 HtmlString 인스턴스에 래핑합니다.

그러나 여전히 다른 줄에 오류가 있습니다.

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

재산 할당의 결론

• 숫자가 아닌 dataType에는 따옴표를 사용하십시오.
• 숫자 dataType에 따옴표를 사용하지 마십시오.
• Html.RawHTML 데이터를 그대로 해석하는 데 사용하십시오 .
• 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 () 의 문서에서

데이터 오브젝트를 JSON (JavaScript Object Notation) 형식의 문자열로 변환합니다.

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을 사용 합니다 .
• JSON 을 얻기 위해 그것을 사용 Html.Raw하고 Json.Encode감싸십시오.quotes

참고 : DataTime 데이터 형식이 올바르지 않은 경우. 앞서 말했듯이 Converts a data object to a string that is in the JavaScript Object Notation (JSON) formatJSON에는 date유형이 포함되어 있지 않기 때문 입니다. 이 문제를 해결하는 다른 옵션은 javascipt Date () 객체를 사용하여이 유형 만 처리하도록 다른 코드 줄을 추가하는 것입니다.

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

.js파일 에서 Javascript / Jquery 코드 블록으로 모델 데이터에 액세스하는 방법

면도기 구문은 .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) function () 또는 함수를 사용 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))';

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

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

너무 늦었지만이 솔루션은 .net 프레임 워크와 .net 코어 모두에 완벽하게 작동합니다.

@ System.Web.HttpUtility.JavaScriptStringEncode ()