Jilet'i JavaScript içinde kullanma

Jilet sözdizimini JavaScript içinde bir görünümde ( cshtml) kullanmak mümkün mü veya geçici bir çözüm var mı?

Bir Google haritasına işaretçiler eklemeye çalışıyorum ... Örneğin, bunu denedim, ancak bir ton derleme hatası alıyorum:

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

Razor derleyicisini tekrar içerik moduna zorlamak için <text>sözde elemanı, burada açıklandığı gibi kullanın :

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

Güncelleme:

Scott Guthrie kısa süre önce Razor'da@: sözdizimi hakkında bir şeyler yayınladı<text> . Aşağıdaki yaklaşım muhtemelen tercih edilir, çünkü üretilen HTML'nin boyutunu azaltır. (Boyutu daha da azaltmak için addMarker işlevini statik, önbelleğe alınmış bir JavaScript dosyasına bile taşıyabilirsiniz):

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

Aramayı addMarkerdaha doğru yapmak için yukarıdaki kod güncellendi .

Açıklığa kavuşturmak için, @:Razor, addMarkerçağrı C # koduna çok benzese bile metin moduna geri dönüyor . Daha sonra Razor @item.Propertysözdizimini alır ve bu özelliklerin içeriğini doğrudan vermesi gerektiğini söyler.

Güncelleme 2

View code'un JavaScript kodu koymak için gerçekten iyi bir yer olmadığını belirtmek gerekir. JavaScript kodu statik bir .jsdosyaya yerleştirilmeli ve ardından bir Ajax çağrısından veya data-HTML'den nitelikleri tarayarak ihtiyacı olan verileri almalıdır . JavaScript kodunuzu önbelleğe almayı mümkün kılmanın yanı sıra, Razor HTML için kodlamak için tasarlanmış ancak JavaScript için tasarlanmadığından kodlama ile ilgili sorunları da önler.

Kodu Görüntüle

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

JavaScript kodu

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

Ben sadece bu yardımcı işlevi yazdım. Koy App_Code/JS.cshtml:

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

Sonra örneğinizde, böyle bir şey yapabilirsiniz:

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

Etrafına nasıl alıntı koymadığımı fark et. Başlık zaten tırnak işareti içeriyorsa, patlamaz. Sözlükleri ve anonim nesneleri de güzel ele alıyor gibi görünüyor!

Yuvarlak bir deliğe kare bir dübel sıkmaya çalışıyorsunuz.

Razor, HTML üreten bir şablon dili olarak düşünülmüştü. JavaScript kodu oluşturmak için çok iyi olabilirsiniz, ancak bunun için tasarlanmamıştır.

Örneğin: Model.TitleKesme işareti varsa ne olur ? Bu JavaScript kodunuzu kırar ve Razor varsayılan olarak doğru şekilde kaçmaz.

Bir yardımcı işlevde bir String üreteci kullanmak muhtemelen daha uygun olacaktır. Bu yaklaşımın muhtemelen daha az istenmeyen sonuçları olacaktır.

Hangi spesifik hataları görüyorsunuz?

Böyle bir şey daha iyi çalışabilir:

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

Tıraş makinesinin işaretleme moduna geçmesi gerektiğini belirtmek için simgesinden <text>sonra sihirli etikete ihtiyacınız olduğunu unutmayın foreach.

Harici bir JavaScript dosyasında değil CSHTML sayfasında olduğu sürece bu iyi çalışır.

Razor şablon motoru, çıktısını umursamıyor ve <script>diğer etiketler arasında ayrım yapmıyor .

Ancak, XSS saldırılarını önlemek için dizelerinizi kodlamanız gerekir .

"<! -" "->" "metin>" gibi

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

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

</script>

Eklenecek bir şey - Razor sözdizimi hilighter (ve muhtemelen derleyici) açılış braketinin konumunu farklı yorumladığını buldum:

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

Basit ve iyi, basit bir örnek:

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

Bu, sayfanızda yukarıdaki kodu yerleştirdiğiniz konumda aşağıdaki gibi bir komut dosyası oluşturur:

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

Artık razorUserName, istemcide erişebileceğiniz ve kullanabileceğiniz adlı genel bir JavaScript değişkeniniz var . Razor motoru açıkça @User.Identity.Name(sunucu tarafı değişkeni) değerini çıkardı ve kod etiketinize yazdığı koda koydu.

Aşağıdaki çözüm benim için JavaScript'i Razor ile birleştirmekten daha doğru görünüyor. Şuna bir göz at: https://github.com/brooklynDev/NGon

ViewBag.Ngon'a neredeyse tüm karmaşık verileri ekleyebilir ve JavaScript'e erişebilirsiniz

Denetleyicide:

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

JavaScript'te:

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

Varsayılan kullanılarak serileştirilebilen düz eski CLR nesnelerine (POCO) izin verir JavascriptSerializer.

@: Ve öğelerinden başka bir seçenek daha vardır <text></text>.

<script>Bloğun kendisini kullanma .

Razor koduna bağlı olarak büyük miktarda JavaScript yapmanız gerektiğinde, bunu şu şekilde yapabilirsiniz:

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

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

Bu yolun avantajları, JavaScript ve Razor'u çok fazla karıştırmamasıdır, çünkü onları çok karıştırmak sonunda okunabilirlik sorunlarına neden olacaktır. Ayrıca büyük metin blokları da okunamıyor.

Önceki çözümlerin hiçbiri doğru çalışmıyor ... Tüm yolları denedim, ancak beklenen sonucu vermedi ... Sonunda kodda bazı hatalar olduğunu buldum ... Ve tam kod verildi altında.

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

Sonunda çözümü buldum (* .vbhtml):

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

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