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

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

다음을 수행하여 전체 서버 측 모델을 자바스크립트 객체로 변환할 수 있습니다.

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

이 경우 FloorPlanSettings 개체만 원하는 경우 다음을 통과하면 됩니다.Encode속성하는 메서드:

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

답변 내용

Javascript/Jquery 코드 블록의 Model 데이터에 액세스하는 방법.cshtml파일

Javascript/Jquery 코드 블록의 Model 데이터에 액세스하는 방법.js파일

Javascript/Jquery 코드 블록의 Model 데이터에 액세스하는 방법.cshtml파일

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

속성 할당

할당에 다른 구문을 사용하여 결과를 관찰합니다.

속성 할당을 따옴표로 묶지 않습니다.

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

보시다시피 몇 가지 오류가 있습니다.Raj그리고.TrueJavascript 변수로 간주되며 존재하지 않기 때문에variable undefinederror. dateTime 변수의 경우 error는unexpected number숫자에는 특수 문자를 사용할 수 없습니다. HTML 태그가 엔티티 이름으로 변환되어 브라우저가 사용자의 값과 HTML 마크업을 혼동하지 않습니다.

따옴표로 속성 할당을 래핑합니다.

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

결과가 유효하므로 속성 할당을 따옴표로 묶으면 구문이 유효합니다.하지만 그 숫자는Age이제 문자열입니다. 따라서 원하지 않으면 따옴표를 제거하면 숫자 유형으로 렌더링됩니다.

사용@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 String 인스턴스로 래핑합니다.

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

사용@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 부분을 감쌀 수 있습니다.내부 데이터에는 따옴표가 하나만 있기 때문입니다.(이중 따옴표로 포장한 후에는 다음 항목이 없어야 합니다."데이터 내에서도)

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

서버 사이드 코드의 문자 의미를 이스케이프합니다.

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

재산양도의 종결

• 숫자가 아닌 dataType에는 따옴표를 사용합니다.
• 숫자 dataType에 따옴표를 사용하지 않습니다.
• 사용하다Html.RawHTML 데이터를 있는 그대로 해석합니다.
• HTML 데이터를 관리하여 서버 측에서 의미하는 따옴표를 이스케이프하거나 javascript 변수에 할당하는 동안 데이터와 다른 따옴표를 사용합니다.

---

객체 할당

할당에 다른 구문을 사용하여 결과를 관찰합니다.

개체 할당을 따옴표로 묶지 않습니다.

  var userObj = @Model; 

때 c# javascript 을 합니다..ToString()해당 개체가 할당됩니다.따라서 위의 결과.

2 개체 할당을 따옴표로 묶기

var userObj = '@Model'; 

사용Html.Raw인용문 없이

   var userObj = @Html.Raw(Model); 

사용Html.Raw와

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

그Html.Raw변수에 개체를 할당하는 동안에는 아무런 소용이 없었습니다.

사용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의 문서에서.인코딩()

데이터 개체를 JSON(JavaScript Object Notification) 형식의 문자열로 변환합니다.

이미 발생한 문제입니다.entity Name재산 배정에 대한 문제와 당신이 기억한다면 우리는 그것을 사용하여 극복했습니다.Html.Raw그럼 한번 해보죠.치자합을 조합해 .Html.Raw그리고.Json.Encode

사용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"
 };

사용Html.Raw그리고.Json.Encode인용구 내에서

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

보시다시피 인용문으로 포장하면 JSON 데이터가 제공됩니다.

개체 할당에 대한 제한

• 사용하다Html.Raw그리고.Json.Encode자바스크립트 객체로 당신의 객체를 자바스크립트 변수에 할당하기 위한 조합.
• 사용하다Html.Raw그리고.Json.Encode또한 그것을 안에 감습니다.quotesJSON을 받다

참고: 관찰한 DataTime 데이터 형식이 올바르지 않습니다.왜냐하면 앞서 말한 것처럼Converts a data object to a string that is in the JavaScript Object Notation (JSON) format에는 은고리다음포않습다니지함하그을▁a가 되어 있지 않습니다.datetype. 이 문제를 해결하기 위한 다른 옵션은 javascriptDate() 객체를 사용하여 이 유형을 단독으로 처리할 다른 코드 줄을 추가하는 것입니다.

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

---

---

Javascript/Jquery 코드 블록의 Model 데이터에 액세스하는 방법.js

은 레저구문의없습다니미가에서 ..js할 수 ..js파일. 그러나 해결 방법이 있습니다.

솔루션에서 Javascript Global 변수를 사용하고 있습니다.

이을 글로벌 이 를 당신의 값을글범다할이변의 ..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.

함수() 사용 또는closure모델 데이터에 종속된 모든 코드를 함수로 래핑합니다.에서 이 합니다..cshtmlvmdk 파일

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

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

@시스템.Web.Http 유틸리티.JavaScriptStringEncode()

MVC 4의 경우

@model Inventory.Models.PurchaseVModel
@{
    ViewData["Title"] = "Add";
    Layout = "~/Views/Shared/_Layout.cshtml";
    var jsonItems = new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(Model.Items);
}

@section scripts{
    <script>
        $(document).ready(function () {
            var allItem =  @Html.Raw(jsonItems);
        console.log(allItem);
    });
    </script>
}

.Net Core 3.1

@model Inventory.Models.PurchaseVModel
@{
    ViewData["Title"] = "Add";
    Layout = "~/Views/Shared/_Layout.cshtml";
    var jsonItems = Newtonsoft.Json.JsonConvert.SerializeObject(Model.Items);
}

@section scripts{
    <script>
        $(document).ready(function () {
            var allItem =  @Html.Raw(jsonItems);
        console.log(allItem);
    });
    </script>
}

저는 다음을 사용하여 Razor 뷰의 컨트롤러에서 전달된 Model 객체를 JavaScript의 JSON Object로 변환했습니다.이것은 ASP에서 저에게 완벽하게 효과가 있었습니다.Net Core.

<script>
    let jsonData = @Html.Raw(Json.Serialize(Model))
    console.log(jsonData)
</script>

@Rajshekar의 철저한 답변 외에도, 저는 a를 반환하는 도우미 방법을 선호합니다.IHtmlStringvalue는 로 인식한 값입니다. 레저로이인미코 HTML식인값다입니그면러는이가하,Html.Raw()래퍼가 필요하지 않으므로 가독성이 향상됩니다.

public static class JSHelper
{
    /// <summary>
    /// Encode a value as a JSON value or object for use in JavaScript code.
    /// </summary>
    /// <param name="value">Value to encode.</param>
    /// <returns>HTML string containing the JavaScript value or object.</returns>
    public static IHtmlString JsonEncode(object value)
    {
        return MvcHtmlString.Create(Json.Encode(value));
    }
}

ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠobj = @JSHelper.JsonEncode(myObject);내 자바스크립트 섹션에서.

포함using뷰에 있는 절 또는 view/web.config를 업데이트하여 뷰 내의 네임스페이스를 확인합니다.

.net 코어 면도기 페이지에서 수행하는 방법은 다음과 같습니다.

@section scripts
{
    <script>
        $(document).ready(function () {
            leaveStatusDictionary = @Html.Raw(Json.Serialize(Model.LeaveStatusDictionary));
        });

        function GetStatusName(status) {
            return window.leaveStatusDictionary[status];
        }
    </script>
}

다음 사항에 유의하십시오.

1. StatusDictionary를 떠나기 전에 var 키워드를 사용하지 않았습니다.이제 이것은 창 객체의 속성입니다.그래서 저는 다른 js 함수인 GetStatusName에서 액세스할 수 있었습니다.

2. LeaveStatusDictionary는 Dictionary<int, string> 유형의 모델 클래스에 있는 속성입니다.

"ReferenceError: Model is not defined" 오류가 발생하면 다음 방법을 사용할 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/16361364/accessing-mvcs-model-property-from-javascript