asp.net-mvc: rsor '@' js फ़ाइल में प्रतीक


90

मेरे पास .csHtmljavascript फ़ंक्शन वाली araz-file है @Url.Contentजो ajax URL के लिए C # फ़ंक्शन का उपयोग करती है।
मैं उस फ़ंक्शन को .jsअपने दृश्य से संदर्भित फ़ाइल में स्थानांतरित करना चाहता हूं।

समस्या यह है कि जावास्क्रिप्ट @प्रतीक को "नहीं जानता" है और सी # कोड को पार्स नहीं करता है।
क्या .js"@" प्रतीक के साथ दृश्य से फ़ाइलों को संदर्भित करने का एक तरीका है ?


2
शायद यह मदद करता है (जवाब देखें) stackoverflow.com/questions/7892793/ajax-succes-function
एंड्री ख्रीस्त्यानोविच

जवाबों:


87

आप HTML5 data-*विशेषताओं का उपयोग कर सकते हैं । मान लीजिए कि आप कुछ एक्शन करना चाहते हैं जब कुछ 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
});

इस तरह आप अपने जावास्क्रिप्ट फ़ाइलों में किसी भी सर्वर साइड टैग की आवश्यकता के बिना मार्कअप और स्क्रिप्ट के बीच एक शुद्ध अलगाव हो सकता है।


धन्यवाद। मुझे लगता है कि कई मूल्यों के लिए सिरदर्द हो सकता है। सबसे पहले मैंने सोचा कि यह मेरी समस्या को हल कर सकता है, लेकिन यह कोशिश करने के बाद कि मुझे अपने कोड में बहुत सारे रेफरल मिले और कोई दूसरा तरीका खोजने का फैसला किया जाए।
QMaster

19

ठीक है, मैं सिर्फ एक नाव पर इंजन है कि यह करता है मिल गया है! मतलब @सिंटेक्स को हल करता है!
इसका नाम रेजरजस है

Nuget पैकेज


2016 अपडेट:
पैकेज 5 वर्षों के लिए अपडेट नहीं किया गया था, और प्रोजेक्ट साइट लिंक मृत है। मैं अब लोगों को इस पुस्तकालय का उपयोग करने की सलाह नहीं देता।


क्या आप इस पर गौर कर सकते हैं? stackoverflow.com/questions/27702322/…
iamCR

पहला लिंक टूटा है
मेमेट ऑलसेन

@MemetOlsen, वास्तव में, क्षमा करें, लेकिन मुझे इसकी एक प्रति नहीं मिल रही है, इसलिए मैंने इसे हटा दिया :(
gdoron मोनिका

@gdoron, कोई बात नहीं। मैं आपको मृत लिंक के बारे में बताना चाहता था। जैसा कि आपने कहा है, पैकेज 5 वर्षों के लिए अपडेट नहीं किया गया था, इसलिए संभवतः इसका उपयोग करना एक बुरा विचार है।
मेमेत ओल्सन

10

समस्या से निपटने का एक तरीका है:

जावास्क्रिप्ट कार्यों के साथ एक आंशिक दृश्य जोड़ना दृश्य में।
इस तरह आप @प्रतीक का उपयोग कर सकते हैं और आपके सभी javascriptकार्य दृश्य से अलग हो जाते हैं।


9

आपके पास दो विकल्प हैं:

  • फ़ंक्शन में पैरामीटर और दृश्य में वायर-अप के रूप में मान का उपयोग करें
  • एक नाम स्थान बनाएं (सार्वजनिक स्तर के चर के बजाय जिसे JS में बुरा व्यवहार माना जाता है) और इस मान को पृष्ठ के शीर्ष पर सेट करें और फिर इसे अपने js में उपयोग करें

उदाहरण के लिए:

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

और फिर आपके विचार में, इसे सेट करें:

MyCompany.MyProject.MyVariable = @....

अपडेट करें

आपको आश्चर्य हो सकता है कि युग्मन के कारण कोई भी अच्छा नहीं है, अच्छी तरह से यह सच है, आप युग्मन js और दृश्य हैं। यही कारण है कि स्क्रिप्ट को उस स्थान से अनजान होना चाहिए जो वे चला रहे हैं, इसलिए यह फ़ाइलों के गैर-इष्टतम संगठन का एक लक्षण है।

वैसे भी व्यू इंजन बनाने और रेजर के खिलाफ js फ़ाइलों को चलाने और परिणाम वापस भेजने के लिए एक तीसरा विकल्प है। यह साफ-सुथरा है, लेकिन इतना धीमा भी नहीं है।


1
+1 मैं पहली विधि करता हूं। आपके द्वारा आवश्यक सभी डेटा में पास होने के दृष्टिकोण से एक आरंभीकरण फ़ंक्शन को कॉल करें।
रिचर्ड डेल्टन 12

धन्यवाद, दूसरा दृष्टिकोण दृश्य और जेएस फ़ाइल के बीच एक खराब युग्मन नहीं है? क्या आपके पास एक बेहतर तरीका है?
गॉर्डोरॉन

दोनों कपल हैं। जब तक आप रेंडर करने से पहले js फ़ाइलों को प्रोसेस करने के लिए व्यू इंजन नहीं लिखते हैं, तब तक अनचेक करने का कोई तरीका नहीं है। मेरे अपडेट देखें।
अलीस्तद

इस तरह से कि मैंने क्या सुझाव दिया? stackoverflow.com/questions/7902213/…
gdoron

ठीक लगता है। मेरा +1। या तो आंशिक या पूर्ण दृश्य, कुछ भी नहीं बदलता है। यह js के साथ सभी युग्मन दृश्य है।
अलीओस्ताद

7

@चर को अपनी .js फ़ाइल में लाने के लिए आपको एक वैश्विक चर का उपयोग करना होगा और उस चर का मान उस .js फ़ाइल का उपयोग करने वाले दृश्य से सेट करना होगा।

जावास्क्रिप्ट फ़ाइल:

var myValue;

function myFunc() {
  alert(myValue);
}

MVC देखें फ़ाइल:

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

बस यह सुनिश्चित करें कि आपके फ़ंक्शन के किसी भी कॉल के बाद यह देखने के लिए मान निर्धारित किया गया है।


1
फ़ंक्शन के पैरामीटर के रूप में सीधे myValue पास करने के बारे में क्या? मैं ग्लोबल्स पर भरोसा करने की तुलना में परम के साथ स्पष्ट रूप से कॉलिंग करना पसंद करता हूं, हालांकि मैं जावास्क्रिप्ट के लिए उत्सुक नहीं हूं इसलिए मुझे वैश्विक होने के कुछ महत्वपूर्ण पहलू याद आ रहे हैं।
बिगमैके

@BigMike: निश्चित रूप से स्वीकार्य है। जिस विधि को मैं ऊपर रखता हूं वह बस चर को एक साथ कई कार्यों के लिए उपलब्ध कराती है, लेकिन मापदंडों का उपयोग करना उतना ही अच्छा है।
जोएल एथरटन

स्पष्टीकरण के लिए धन्यवाद। मॉडल के कुछ प्रकार के जेएस ऑब्जेक्ट संस्करण का स्वचालित रूप से होना बहुत अच्छा होगा (मॉडल वर्ग में विशेषताओं के माध्यम से बहुत अच्छा होगा), यह सिर्फ एक पैटर्न और एक पूरी तरह से नामस्थान जागरूक चर समाधान जोड़ देगा। मुझे लगता है कि बड़ी समस्या यह होगी कि ब्राउज़र को भेजे गए HTML में कोड को कैसे इंजेक्ट किया जाए (सीधे <script> टैग के माध्यम से)। मुझे लगता है कि मैं इस पर कुछ प्रयोग करूंगा जैसे ही मेरी वर्तमान परियोजना खत्म हो जाएगी।
BigMike

@BigMike: DataContractJsonSerializer वर्ग ( msdn.microsoft.com/en-us/library/… ) का उपयोग करके इसे पूरा करना काफी आसान होना चाहिए । यह आपकी कक्षा का एक JSON संस्करण तैयार करेगा जिसे दृश्य में पार्स किया जा सकता है।
जोएल एथरटन

4

संभवतः यह सही दृष्टिकोण नहीं है। चिंताओं के पृथक्करण को देखते हुए। आपके पास data injectorअपनी JavaScriptकक्षा में होना चाहिए और जो अधिकांश मामलों में डेटा है JSON

अपने scriptफ़ोल्डर में JS फाइल बनाएं और इस संदर्भ को अपने साथ जोड़ें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>

अच्छा! लेकिन मुझे लगता है कि यह बहुत जटिल है ... आप मेरे जवाब के बारे में क्या सोचते हैं? stackoverflow.com/questions/7902213/… । वैसे आप setContentB में कॉपी पेस्ट त्रुटि है आप contentAData लिखा था। धन्यवाद!
गदोरन

1
@gdoron मेरा विश्वास करो, JS क्लासेस को मैनेज करना और अलग होने पर विचार करना एक जीवन रक्षक है जब आपके पास एक बहुत बड़ा प्रोजेक्ट है
अब्दुल मुनीम

4

मैंने हाल ही में इस विषय के बारे में ब्लॉग किया है: आंशिक रेजर दृश्य का उपयोग करके बाहरी जावास्क्रिप्ट फ़ाइलें उत्पन्न करना

मेरा समाधान एक कस्टम विशेषता ( ExternalJavaScriptFileAttribute) का उपयोग करना है जो एक आंशिक रेजर दृश्य को प्रस्तुत करता है और फिर इसे आसपास के <script>टैग के बिना लौटाता है । यह एक वैध बाहरी जावास्क्रिप्ट फ़ाइल बनाता है।


2

मैं आमतौर पर कार्यों में, मॉडल गुणों के लिए जेएस की आवश्यकता को लपेटता हूं और फिर @ दृश्य में पास करता हूं। उदाहरण के लिए

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

देखने में, मैं (केवल एक उदाहरण के माध्यम से) समारोह आह्वान जोड़:

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

1

मुझे लगता है कि आप उस JS कोड को View में डालने के लिए अटक गए हैं। रेजर पार्सर, जहां तक ​​मुझे पता है, .js फ़ाइलों को नहीं देखेंगे, इस प्रकार आपके पास जो भी उपयोग करता है @वह काम नहीं करेगा। PLus, जैसा कि आपने देखा है, जावास्क्रिप्ट ही इस @चरित्र को बिना किसी कारण के चारों ओर लटका हुआ पसंद नहीं करता है , अन्य, कहते हैं, एक स्ट्रिंग में।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.