ฉันมี.csHtmlไฟล์ -razor ที่มีฟังก์ชันจาวาสคริปต์ที่ใช้@Url.Contentฟังก์ชัน C # ภายในสำหรับ URL ของ ajax
ฉันต้องการย้ายฟังก์ชันนั้นไปยัง.jsไฟล์ที่อ้างอิงจากมุมมองของฉัน

ปัญหาคือจาวาสคริปต์ไม่ "รู้" @สัญลักษณ์และไม่แยกวิเคราะห์รหัส C #
มีวิธีอ้างอิง.jsไฟล์จากมุมมองที่มีสัญลักษณ์ "@" หรือไม่?

คุณสามารถใช้data-*แอตทริบิวต์HTML5 สมมติว่าคุณต้องการดำเนินการบางอย่างเมื่อมีการคลิกองค์ประกอบ DOM บางส่วนเช่น div ดังนั้น:

<div id="foo" data-url="@Url.Content("~/foobar")">Click me</div>

จากนั้นในไฟล์จาวาสคริปต์แยกต่างหากของคุณคุณสามารถทำงานกับ DOM ได้อย่างสงบเสงี่ยม:

$('#foo').click(function() {
    var url = $(this).data('url');
    // do something with this url
});

ด้วยวิธีนี้คุณสามารถแยกกันอย่างชัดเจนระหว่างมาร์กอัปและสคริปต์โดยที่คุณไม่ต้องใช้แท็กฝั่งเซิร์ฟเวอร์ในไฟล์จาวาสคริปต์ของคุณ

ฉันเพิ่งพบเครื่องมือมีดโกนใน nuget ที่ทำได้! ความหมายแก้@ไวยากรณ์!
มันชื่อRazorJS RazorJS

Nugetแพคเกจ

การอัปเดตปี 2559:
แพ็กเกจไม่ได้รับการอัปเดตเป็นเวลา 5 ปีและลิงก์ไซต์โครงการไม่สามารถใช้งานได้ ฉันไม่แนะนำให้คนอื่นใช้ห้องสมุดนี้อีกต่อไป

วิธีหนึ่งในการแก้ไขปัญหาคือ:

การเพิ่มมุมมองบางส่วนด้วยฟังก์ชันจาวาสคริปต์ในมุมมอง
ด้วยวิธีนี้คุณสามารถใช้@สัญลักษณ์และjavascriptฟังก์ชันทั้งหมดของคุณจะแยกออกจากมุมมอง

คุณมีสองทางเลือก:

• ใช้ค่าเป็นพารามิเตอร์ในฟังก์ชันและวางสายในมุมมอง
• สร้างเนมสเปซ (แทนตัวแปรระดับสาธารณะซึ่งถือว่าเป็นการปฏิบัติที่ไม่ดีใน JS) และตั้งค่านี้ที่ด้านบนสุดของเพจจากนั้นใช้ใน js ของคุณ

ตัวอย่างเช่น:

 var MyCompany = 
 {
   MyProject: {
                  MyVariable:""
               }
  };

จากนั้นในมุมมองของคุณให้ตั้งค่า:

MyCompany.MyProject.MyVariable = @....

อัปเดต

คุณอาจสงสัยว่าไม่มีอะไรดีเพราะการมีเพศสัมพันธ์มันเป็นเรื่องจริงคุณกำลัง coupling js และ view นั่นคือเหตุผลที่สคริปต์ต้องถูกลบเลือนไปยังตำแหน่งที่รันอยู่ดังนั้นจึงเป็นอาการของการจัดระเบียบไฟล์ที่ไม่เหมาะสม

อย่างไรก็ตามมีตัวเลือกที่สามในการสร้างเอนจิ้นมุมมองและเรียกใช้ไฟล์ js กับมีดโกนและส่งผลลัพธ์กลับ วิธีนี้สะอาดกว่า แต่ช้ากว่ามากจึงไม่แนะนำเช่นกัน

เพื่อให้ได้ไฟล์ @ตัวแปรลงในไฟล์. js ของคุณคุณจะต้องใช้ตัวแปรส่วนกลางและตั้งค่าของตัวแปรนั้นจากมุมมอง mvc ที่ใช้ประโยชน์จากไฟล์. js นั้น

ไฟล์ JavaScript:

var myValue;

function myFunc() {
  alert(myValue);
}

MVC ดูไฟล์:

<script language="text/javascript">
    myValue = @myValueFromModel;
</script>

ตรวจสอบให้แน่ใจว่าการเรียกใช้ฟังก์ชันของคุณเกิดขึ้นหลังจากมุมมองกำหนดค่าแล้ว

อาจไม่ใช่แนวทางที่ถูกต้อง พิจารณาแยกความกังวล คุณควรมีdata injectorในJavaScriptชั้นเรียนของคุณและในกรณีส่วนใหญ่ข้อมูลคือJSONชั้นและที่เป็นในกรณีส่วนใหญ่ข้อมูล

สร้างไฟล์ JS ในscriptโฟลเดอร์ของคุณและเพิ่มการอ้างอิงนี้ในไฟล์View

<script src="@Url.Content("~/Scripts/yourJsFile.js")" type="text/javascript"></script>

ตอนนี้ให้พิจารณาไฟล์ JavaScriptคลาสตามตัวอักษรในyourJsFile.js:

var contentSetter = {
    allData: {},
    loadData: function (data) {
        contentSetter.allData = eval('(' + data + ')');
    },
    setContentA: function () {
        $("#contentA").html(allData.contentAData);
    },
    setContentB: function () {
        $("#contentB").html(allData.contentAData);
    }
};

ประกาศคลาสด้วย

public class ContentData
{
    public string ContentDataA { get; set }
    public string ContentDataB { get; set }
}

ตอนนี้จากไฟล์ Actionทำสิ่งนี้:

public ActionResult Index() {
    var contentData = new ContentData();
    contentData.ContentDataA = "Hello";
    contentData.ContentDataB = "World";
    ViewData.Add("contentData", contentData);
}

และจากมุมมองของคุณ:

<div id="contentA"></div>
<div id="contentB"></div>

<script type="text/javascript">
    contentSetter.loadData('@Json.Encode((ContentData) ViewData["contentData"])');
    contentSetter.setContentA();
    contentSetter.setContentB();
</script>

ฉันเพิ่งเขียนบล็อกเกี่ยวกับหัวข้อนี้: การสร้างไฟล์ JavaScript ภายนอกโดยใช้มุมมองมีดโกนบางส่วนใช้บางส่วนมีดโกนชม

วิธีแก้ปัญหาของฉันคือใช้แอตทริบิวต์ที่กำหนดเอง ( ExternalJavaScriptFileAttribute) ซึ่งแสดงผลมุมมอง Razor บางส่วนตามที่เป็นอยู่แล้วส่งคืนโดยไม่มี<script>แท็กรอบข้าง นั่นทำให้เป็นไฟล์ JavaScript ภายนอกที่ถูกต้อง

ฉันมักจะตัด JS ที่ต้องการเข้าถึงคุณสมบัติของโมเดลในฟังก์ชันจากนั้นส่ง @something ในมุมมอง ตัวอย่างเช่น

<script type="text/javascript">
function MyFunction(somethingPresentInTheView) {
  alert(somethingPresentInTheView);
}
</script>

ในมุมมองฉันเพิ่มการเรียกใช้ฟังก์ชันผ่าน (เพียงตัวอย่าง):

<input type='button' onclick="MyFunction('@Model.PropertyNeeded')" />

ฉันคิดว่าคุณติดอยู่กับการต้องใส่โค้ด JS นั้นใน View เท่าที่ฉันรู้ Razor parser จะไม่ดูไฟล์. js ดังนั้นสิ่งที่คุณมี@จะใช้ไม่ได้ PLus ตามที่คุณได้เห็น Javascript เองไม่ชอบ@อักขระนี้ที่ห้อยอยู่รอบ ๆ โดยไม่มีเหตุผลอื่น ๆ พูดเป็นสตริง