Jilet ve Javascript kodunu karıştırın


172

Jilet ve js nasıl karıştırılacağı konusunda oldukça kafam karıştı. Bu şu an sıkışmış olduğum fonksiyon:

<script type="text/javascript">

        var data = [];

        @foreach (var r in Model.rows)
        {
                data.push([ @r.UnixTime * 1000, @r.Value ]);
        }

Ben ile c # kodu ilan edebilir <c#></c#>ve her şey JS kodu - bu ben sonradan ne olurdu:

<script type="text/javascript">

        var data = [];

        <c#>@foreach (var r in Model.rows) {</c#>
                data.push([ <c#>@r.UnixTime</c#> * 1000, <c#>@r.Value</c#> ]);
        <c#>}</c#>

Bunu başarmanın en iyi yöntemi nedir?


2
Görünüşe göre sözdizimi vurgulama güzel ve benim <c#>etiketleri ile de karışık :-P
Kyle Brandt

1
Bu görünümün HTML çıktısını kontrol ettiniz mi? Nasıl görünüyor ve nasıl farklı olmasını istiyorsunuz?
sukru

Conditional Compilation HTML göremiyorum hakkında bir hata atar - bu yüzden bunun bir parçası olduğunu düşünüyor C # kodu.
Kyle Brandt

1
Bir JavaScript hatası gibi görünüyor: webdeveloper.com/forum/showthread.php?t=99780 . Tam hata mesajı nedir ve nereden edinebilirsiniz?
sukru

2
Bence bu JS ve C # 'ı çok yakından karıştırmaya çalışmak, okumak / korumak için bir acı olacaktır. Derleyici bu koddan izin vermediğine sevindim. :)
Jim Bolla

Yanıtlar:


333

Kullanım <text>:

<script type="text/javascript">

   var data = [];

   @foreach (var r in Model.rows)
   {
      <text>
            data.push([ @r.UnixTime * 1000, @r.Value ]);
      </text>
   }
</script>

27
Razor yürütüldüğünde Javascript bloklarında iyi çalışıyor ancak sözdizimi vurgulamanın her türlü şaşkın hale gelmesinden nefret ediyorum. İnanıyorum Javascript modunda sıkışmış çünkü tüm Razor kodunu geçersiz Sözdizimi olarak vurgular.
Chev

2
Bu kod bir paket içinde olup olmadığını? bir javascript dosyasının içine kod yazabilir miyim ??
ncubica

2
Bir değişkenin diğerinden daha az olup olmadığını ve jiletin psiko olup olmadığını kontrol etmek istediğinize kadar mükemmel çalışır!
cbp

1
@ncubica jilet demeti istiyorsanız, konseptinizde yanlış olanlardan daha fazla. Jilet, javascript için değil görünüm içindir.
100r

1
@ncubica Bu yazı eskidir, ancak sorunuzun çözümü şöyledir: Bir JS dosyasına bir işlev yazın, ile oluşturun Scripts.Render, ardından bir <script>etikette işlevi çağırın . Tam olarak zarif değil, ancak çoğu (okuma: basit) kullanım durumu için çalışır.
Sinjai

81

Bir kod bloğu İçinde (örneğin @foreach), işaretlemeyi (veya, bu durumda, JavaScript) işaretlemek gerekir ile @:veya <text>etiketi .

İşaretleme bağlamlarının içinde, kodu kod bloklarıyla ( @{ ... }veya @if, ...) çevrelemeniz gerekir


Neden "işaretlemeyi işaretle" diyorsunuz, içerik aslında işaretleme olsaydı bu bir sorun olmazdı.
Max Toro

1
@Max: İşaretleme gibi görünmese de biçimlendirme. (Zamanda sunucu tarafı koduna karşı)
SLaks

@:aradığım şey, harika!
Muflix

54

ayrıca kullanabilirsiniz

<script type="text/javascript">

   var data = [];

   @foreach (var r in Model.rows)
   {
       @:data.push([ @r.UnixTime * 1000, @r.Value ]);
   }
</script>

not @:


12

Asla daha fazla dil karıştırmayın.

<script type="text/javascript">
    var data = @Json.Encode(Model); // !!!! export data !!!!

    for(var prop in data){
      console.log( prop + " "+ data[prop]);
    }

Sorun olması durumunda,

@Html.Raw(Json.Encode(Model));

Bu harika, ama aynı zamanda karıştırmamız gereken meşru örnekler de var. Ama bu mükemmel şekilde uyduğu için kullandığım çözüm.
ayaz

3
Bu unutmayın edilir dilleri karıştırma. Yarım JavaScript ("var data =") ve yarım Razor / C # ("@ Json.Encode (Model)") olan bir ifadeniz var. Sadece daha az invaziv bir karışımdır, ancak vücudu JavaScript'i yayan bir Razor / C # "foreach" e sahip olmaktan daha az karıştırma değildir. :-)
Jonathan Gilbert

3
Uncaught SyntaxError: Unexpected token &Model böyle bir şey haline geldiğinden geri dönüyor[{&quot;Id&quot;:1,&quot;Name&quot;:&quot;Name}]
Weihui Guo

1

Javascript'i görünümden ayırmak için geleneksel olmayan bir yöntem, ancak yine de içinde jilet kullanmak bir Scripts.cshtmldosya yapmak ve karışık javascript / jiletinizi oraya yerleştirmektir.

Index.cshtml

<div id="Result">
</div>

<button id="btnLoad">Click me</button>

@section scripts
{
    @Html.Partial("Scripts")
}

Scripts.cshtml

<script type="text/javascript">
    var url = "@Url.Action("Index", "Home")";

    $(document).ready(function() {
        $("#btnLoad").click(function() {
            $.ajax({
                type: "POST",
                url: url ,
                data: {someParameter: "some value"},
                contentType: "application/json; charset=utf-8",
                dataType: "json",

                success: function(msg) {
                    $("#Result").text(msg.d);
                }
            });
        });
    });
</script>


-1

Jilet kodunuzu JS betiğinin içindeyken @ {} içine sarın ve sadece @ kullandığınızı unutmayın. Bazen işe yaramaz:

function hideSurveyReminder() {
       @Session["_isSurveyPassed"] = true;
    }

Bu üretecek

function hideSurveyReminder() {
       False = true;
    }

tarayıcıda = (

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.