JavaScript에서 면도기 사용

JavaScript에서 면도기 사용

뷰에서 JavaScript 내에서 Razor 구문을 사용할 수 있는지, 아니면 회피책이 있는지(cshtml)?

Google 지도에 마커를 추가하려고 합니다.예를 들어, 이 기능을 사용해 봤는데 컴파일 오류가 많이 발생합니다.

<script type="text/javascript">

    // Some JavaScript code here to display map, etc.

    // Now add markers
    @foreach (var item in Model) {

        var markerlatLng = new google.maps.LatLng(@(Model.Latitude), @(Model.Longitude));
        var title = '@(Model.Title)';
        var description = '@(Model.Description)';
        var contentString = '<h3>' + title + '</h3>' + '<p>' + description + '</p>'

        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });

        var marker = new google.maps.Marker({
            position: latLng,
            title: title,
            map: map,
            draggable: false
        });

        google.maps.event.addListener(marker, 'click', function () {
            infowindow.open(map, marker);
        });
    }
</script>

를 사용합니다.<text>유사 요소를 사용하여 레이저 컴파일러를 강제로 콘텐츠 모드로 되돌립니다.

<script type="text/javascript">

    // Some JavaScript code here to display map, etc.


    // Now add markers
    @foreach (var item in Model) {
        <text>
            var markerlatLng = new google.maps.LatLng(@(Model.Latitude), @(Model.Longitude));
            var title = '@(Model.Title)';
            var description = '@(Model.Description)';
            var contentString = '<h3>' + title + '</h3>' + '<p>' + description + '</p>'

            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });

            var marker = new google.maps.Marker({
                position: latLng,
                title: title,
                map: map,
                draggable: false
            });

            google.maps.event.addListener(marker, 'click', function () {
                infowindow.open(map, marker);
            });
        </text>
    }
</script>

업데이트:

Scott Guthrie는 최근 에 대해 글을 올렸습니다.@:Razor의 구문, 이것은 Razor보다 약간 덜 투박합니다.<text>추가할 JavaScript 코드의 한 줄 또는 두 줄만 있으면 태그를 지정합니다.생성된 HTML의 크기를 줄이기 위해 다음과 같은 방법이 바람직할 수 있습니다(addMarker 함수를 정적인 캐시된 JavaScript 파일로 이동하여 크기를 더 줄일 수도 있습니다).

<script type="text/javascript">

    // Some JavaScript code here to display map, etc.
    ...
    // Declare addMarker function
    function addMarker(latitude, longitude, title, description, map)
    {
        var latLng = new google.maps.LatLng(latitude, longitude);
        var contentString = '<h3>' + title + '</h3>' + '<p>' + description + '</p>';

        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });

        var marker = new google.maps.Marker({
            position: latLng,
            title: title,
            map: map,
            draggable: false
        });

        google.maps.event.addListener(marker, 'click', function () {
            infowindow.open(map, marker);
        });
    }

    // Now add markers
    @foreach (var item in Model) {
        @:addMarker(@item.Latitude, @item.Longitude, '@item.Title', '@item.Description', map);
    }
</script>

상기 코드를 갱신하여 콜을 발신했다.addMarker더 정확합니다.

명확히 하자면@:레이저를 강제로 텍스트 모드로 되돌립니다.addMarkerCall은 C# 코드와 매우 유사합니다.그리고 나서 면도기는@item.Property이러한 속성의 내용을 직접 출력해야 한다는 구문입니다.

업데이트 2

View code는 JavaScript 코드를 넣기에 좋은 장소가 아닙니다.JavaScript 코드는 스태틱에 배치해야 합니다..jsAjax 콜 또는 스캔을 통해 필요한 데이터를 얻을 수 있습니다.data-이는 JavaScript 코드를 캐시할 수 있을 뿐만 아니라, Razor는 HTML용으로 설계되어 있지만 JavaScript용으로 설계되어 있지 않기 때문에 인코딩에 관한 문제도 피할 수 있습니다.

코드 표시

@foreach(var item in Model)
{
    <div data-marker="@Json.Encode(item)"></div>
}

자바스크립트 코드

$('[data-marker]').each(function() {
    var markerData = $(this).data('marker');
    addMarker(markerData.Latitude, markerData.Longitude,
              markerData.Description, markerData.Title);
});

이 도우미 기능을 방금 썼어요.넣어봐.App_Code/JS.cshtml:

@using System.Web.Script.Serialization
@helper Encode(object obj)
{
    @(new HtmlString(new JavaScriptSerializer().Serialize(obj)));
}

이 예에서는 다음과 같은 작업을 수행할 수 있습니다.

var title = @JS.Encode(Model.Title);

제가 어떻게 인용구를 붙이지 않는지 보세요.제목에 이미 따옴표가 포함되어 있으면 폭발하지 않습니다.사전이나 익명의 오브젝트도 잘 다루는 것 같아!

당신은 동그란 구멍에 네모난 못을 박으려 하고 있어요.

Razor는 HTML 생성 템플릿 언어로 사용되었습니다.JavaScript 코드를 생성하도록 하는 것은 당연하지만 이를 위해 설계된 것은 아닙니다.

예:면 어쩌지Model.Title아포스트로피가 들어있나요?그러면 JavaScript 코드가 깨지고 기본적으로는 Razor가 올바르게 빠져나가지 않습니다.

도우미 기능에서는 String 생성기를 사용하는 것이 더 적절할 수 있습니다.그 접근방식의 의도하지 않은 결과는 줄어들 것이다.

구체적으로 어떤 오류가 발생하고 있습니까?

다음과 같은 방법이 더 효과적일 수 있습니다.

<script type="text/javascript">

//now add markers
 @foreach (var item in Model) {
    <text>
      var markerlatLng = new google.maps.LatLng(@Model.Latitude, @Model.Longitude);
      var title = '@(Model.Title)';
      var description = '@(Model.Description)';
      var contentString = '<h3>' + title + '</h3>' + '<p>' + description + '</p>'
    </text>
}
</script>

넌 마법이 필요해<text>를 달다foreach면도칼

외부 JavaScript 파일이 아닌 CSHTML 페이지에 있으면 문제 없습니다.

레이저 템플릿 엔진은 출력 내용에 관계없이<script>또는 기타 태그.

단, XSS 공격을 방지하려면 문자열을 인코딩해야 합니다.

나는 "텍스트"처럼 "<!--" "-->"를 선호한다.

<script type="text/javascript">
//some javascript here     

@foreach (var item in itens)
{                 
<!--  
   var title = @(item.name)
    ...
-->

</script>

덧붙이자면, Razor 구문 분석기(및 컴파일러)는 오프닝 브래킷의 위치를 다르게 해석하는 것을 발견했습니다.

<script type="text/javascript">
    var somevar = new Array();

    @foreach (var item in items)
    {  // <----  placed on a separate line, NOT WORKING, HILIGHTS SYNTAX ERRORS
        <text>
        </text>
    }

    @foreach (var item in items) {  // <----  placed on the same line, WORKING !!!
        <text>
        </text>
    }
</script>

단순하고 알기 쉬운 예:

<script>
    // This gets the username from the Razor engine and puts it
    // in JavaScript to create a variable I can access from the
    // client side.
    //
    // It's an odd workaraound, but it works.
    @{
        var outScript = "var razorUserName = " + "\"" + @User.Identity.Name + "\"";
    }
    @MvcHtmlString.Create(outScript);
</script>

이렇게 하면 다음과 같은 코드를 배치한 위치에 페이지에 스크립트가 생성됩니다.

<script>
    // This gets the username from the Razor engine and puts it
    // in JavaScript to create a variable I can access from
    // client side.
    //
    // It's an odd workaraound, but it works.

    var razorUserName = "daylight";
</script>

인 "A"가 되었습니다.razorUserName클라이언트에 액세스하여 사용할 수 있습니다.레이저 엔진은 분명히 다음에서 값을 추출했습니다.@User.Identity.Name(서버측 변수)를 지정하여 스크립트태그에 쓰는 코드에 넣습니다.

다음 솔루션이 자바스크립트와 레이저를 결합하는 것보다 더 정확한 것 같습니다.https://github.com/brooklynDev/NGon 를 참조해 주세요.

ViewBag에는 거의 모든 복잡한 데이터를 추가할 수 있습니다.Ngon 및 JavaScript에서 액세스

컨트롤러 내:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var person = new Person { FirstName = "John", LastName = "Doe", Age = 30 };
        ViewBag.NGon.Person = person;
        return View();
    }
}

JavaScript의 경우:

<script type="text/javascript">
    $(function () {
        $("#button").click(function () {
            var person = ngon.Person;
            var div = $("#output");
            div.html('');
            div.append("FirstName: " + person.FirstName);
            div.append(", LastName: " + person.LastName);
            div.append(", Age: " + person.Age);
        });
    });
</script>

디폴트를 사용하여 시리얼화할 수 있는 모든 플레인오브젝트(POCO)를 허용합니다.JavascriptSerializer.

@:나 @:나 @:나 @나 @나 @나 @나 @나 @나 @나 @나 @나 @나 @나 @나 @나 @나 @나 @1<text></text>.

「」를 사용합니다.<script>자신을 차단합니다.

레이저 코드에 따라 대량의 JavaScript를 수행해야 할 경우 다음과 같이 수행할 수 있습니다.

@if(Utils.FeatureEnabled("Feature")) {
    <script>
        // If this feature is enabled
    </script>
}

<script>
    // Other JavaScript code
</script>

JavaScript와 Razor를 많이 섞으면 가독성 문제가 생기기 때문에 잘 섞이지 않는 것이 장점입니다.또한 큰 텍스트 블록도 잘 읽을 수 없습니다.

이전 솔루션이 제대로 작동하지 않습니다.모든 방법을 시도해봤지만 기대했던 결과를 얻지 못했다...드디어 코드에 오류가 있다는 것을 알게 되었습니다.그리고 전체 코드는 다음과 같습니다.

<script type="text/javascript">

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(23.00, 90.00),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    @foreach (var item in Model)
    {
        <text>
            var markerlatLng = new google.maps.LatLng(@(item.LATITUDE), @(item.LONGITUDE));
            var title = '@(item.EMP_ID)';
            var description = '@(item.TIME)';
            var contentString = '<h3>' + "Employee " +title+ " was here at "+description+ '</h3>' + '<p>'+" "+ '</p>'

            var infowindow = new google.maps.InfoWindow({
                // content: contentString
            });

            var marker = new google.maps.Marker({
                position: markerlatLng,
                title: title,
                map: map,
                draggable: false,
                content: contentString
            });

            google.maps.event.addListener(marker, 'click', (function (marker) {
                return function () {
                    infowindow.setContent(marker.content);
                    infowindow.open(map, marker);
                }
            })(marker));
        </text>
    }
</script>

드디어 솔루션(*.vbhtml):

function razorsyntax() {
    /* Double */
    @(MvcHtmlString.Create("var szam =" & mydoublevariable & ";"))
    alert(szam);

    /* String */
    var str = '@stringvariable';
    alert(str);
}

없는 없는 사람들,Json.Encode사용할 수 있습니다.

<script type="text/javascript">
    var model = @Html.Raw(Json.Serialize(Model))
</script>

언급URL : https://stackoverflow.com/questions/4599169/using-razor-within-javascript