มีดโกนผสมและรหัส Javascript


171

ฉันค่อนข้างสับสนกับวิธีการผสมมีดโกนและเจเอส นี่คือฟังก์ชั่นปัจจุบันที่ฉันติดอยู่:

<script type="text/javascript">

        var data = [];

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

ถ้าฉันสามารถประกาศ c # code ด้วย<c#></c#>และทุกอย่างอื่นเป็นรหัส JS - นี่จะเป็นสิ่งที่ฉันหลังจาก:

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

อะไรคือวิธีที่ดีที่สุดในการบรรลุเป้าหมายนี้?


2
เห็นได้ชัดว่าการเน้นไวยากรณ์ดีและสับสนกับ<c#>แท็กของฉันเช่นกัน :-P
Kyle Brandt

1
คุณตรวจสอบเอาต์พุต HTML ของมุมมองนี้หรือไม่ มันมีลักษณะอย่างไรและคุณต้องการให้มันแตกต่างกันอย่างไร
sukru

มีข้อผิดพลาดเกิดขึ้นConditional Compilation ดังนั้นฉันจึงไม่เห็น HTML - ดังนั้นฉันเชื่อว่าส่วนนี้คือรหัส C #
Kyle Brandt

1
ดูเหมือนว่าข้อผิดพลาด JavaScript: webdeveloper.com/forum/showthread.php?t=99780 อะไรคือข้อผิดพลาดที่แน่นอนและคุณจะได้รับมันที่ไหน
sukru

2
ฉันคิดว่าเป็นกรณีที่พยายามผสม JS และ C # อย่างใกล้ชิดจะเป็นความเจ็บปวดในการอ่าน / บำรุงรักษา ฉันดีใจที่ผู้รวบรวมไม่อนุญาตให้คุณใช้รหัสนี้ :)
Jim Bolla

คำตอบ:


332

การใช้<text>:

<script type="text/javascript">

   var data = [];

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

27
มีดโกนทำงานได้ดีในบล็อก Javascript เมื่อดำเนินการ แต่ฉันเกลียดที่การเน้นไวยากรณ์ได้รับความสับสนทุกประเภท มันเน้นรหัสมีดโกนทั้งหมดเป็นไวยากรณ์ที่ไม่ถูกต้องเพราะมันติดอยู่ในโหมด Javascript ที่ฉันเชื่อ
Chev

2
ถ้ารหัสนี้อยู่ในชุด? ฉันสามารถเขียนรหัสภายในไฟล์จาวาสคริปต์ได้หรือไม่?
ncubica

2
ทำงานได้อย่างสมบูรณ์แบบจนกว่าคุณจะต้องการตรวจสอบว่าตัวแปรตัวใดตัวหนึ่งมีค่าน้อยกว่าตัวแปรอื่นและมีดโกนจะออกมาเป็นโรคจิต!
cbp

1
@ncubica ถ้าคุณต้องการมีดโกนในห่อมากกว่าสิ่งผิดในแนวคิดของคุณ มีดโกนสำหรับมุมมองไม่ใช่จาวาสคริปต์
100r

1
@ncubica โพสต์นี้เก่า แต่วิธีแก้ปัญหาสำหรับคำถามของคุณคือ: เขียนฟังก์ชั่นในไฟล์ JS แสดงผลด้วยScripts.Renderแล้วเรียกใช้ฟังก์ชันใน<script>แท็ก ไม่ได้สง่างามอย่างแน่นอน แต่ใช้ได้กับกรณีใช้งานส่วนใหญ่ (อ่าน: ง่าย)
สินใจ

81

ภายในการป้องกันรหัส (เช่น@foreach), คุณต้องทำเครื่องหมายมาร์กอัป (หรือในกรณีนี้, Javascript) ด้วย@:หรือ<text>แท็ก

ภายในบริบทของมาร์กอัปคุณต้องล้อมรอบโค้ดด้วยบล็อคโค้ด ( @{ ... }หรือ@if, ... )


ทำไมคุณถึงพูดว่า "mark the markup" นี่จะไม่เป็นปัญหาหากเนื้อหาเป็นจริงมาร์กอัป
Max Toro สูงสุด

1
@ Max: ถึงแม้ว่ามันจะไม่ดูเหมือนมาร์กอัป แต่มันก็เป็นมาร์กอัป (ตรงข้ามกับรหัสฝั่งเซิร์ฟเวอร์)
SLaks

@:เป็นสิ่งที่ฉันกำลังมองหาที่ดี!
Muflix

53

คุณยังสามารถใช้

<script type="text/javascript">

   var data = [];

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

โน้ต@:


12

ไม่เคยผสมภาษามากขึ้น

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

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

ในกรณีที่มีปัญหาคุณสามารถลอง

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

นี่เป็นสิ่งที่ดี แต่ก็มีอินสแตนซ์ที่ถูกต้องที่เราต้องผสม แต่นี่เป็นวิธีการแก้ปัญหาที่ฉันใช้เพราะมันลงตัวพอดี
frostymarvelous

3
โปรดทราบว่านี่คือการผสมภาษา คุณมีคำสั่งที่เป็นครึ่ง JavaScript ("var data =") และ half-Razor / C # ("@ Json.Encode (Model)") มันเป็นเพียงการผสมที่รุกรานน้อยลง แต่มันก็ไม่ได้ปะปนกันน้อยไปกว่าการมีมีดโกน / C # "foreach" ที่ร่างกายปล่อย JavaScript ออกมา :-)
Jonathan Gilbert

3
มันกลับมาUncaught SyntaxError: Unexpected token &เพราะตัวแบบกลายเป็นแบบนี้[{&quot;Id&quot;:1,&quot;Name&quot;:&quot;Name}]
Weihui Guo

1

วิธีการที่ไม่ใช่วิธีดั้งเดิมในการแยกจาวาสคริปต์ออกจากมุมมอง แต่ยังคงใช้มีดโกนในการทำScripts.cshtmlไฟล์และวางจาวาสคริปต์ / มีดโกนแบบผสมของคุณที่นั่น

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

ตัดรหัสมีดโกนของคุณใน @ {} เมื่ออยู่ในสคริปต์ JS และระวังการใช้เพียง @ บางครั้งมันไม่ทำงาน:

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

สิ่งนี้จะผลิต

function hideSurveyReminder() {
       False = true;
    }

ในเบราว์เซอร์ = (

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.