एएसपी.Net वेब एपी + नॉकआउटजेएस + एमवीसी 4 - इसे एक साथ जोड़ना

Question

मैं एक नई परियोजना शुरू कर रहा हूं, और नॉकआउटजेएस + वेब एपीआई का उपयोग करने के लिए उत्सुक हूं जो मेरे लिए नया है, मुझे वेब एपी की अच्छी समझ है, लेकिन इस समय मेरे सिर को नॉकआउट करना मुश्किल है।

यह कैसे मैं अपने ऐप काम करना चाहता हूँ की मेरी प्रारंभिक विचार है:

• मैं एक मानक MVC नियंत्रक जैसे LeadsController
• LeadsController है एक ActionListLeads कहा जाता है, यह वास्तव में किसी भी वापस नहीं करता है हालांकि डेटा, लेकिन नॉकआउट से डेटा प्रदर्शित करने के लिए सिर्फ एक टेम्पलेट के साथ एक दृश्य देता है।
• ListLeads दृश्य
• सुराग डेटा फिर एक KnockoutJs ViewModel करने के लिए मैप किया गया है प्रदर्शित करने के लिए सुराग की एक सूची प्राप्त करने के लिए (मैं जावास्क्रिप्ट में सर्वर साइड से मेरे विचार मॉडल को दोहराने के लिए नहीं करना चाहती ajax के माध्यम से मेरी एपीआई नियंत्रक LeadsApiController कॉल मॉडल देखें)
• मैं जावास्क्रिप्ट से भरे मेरे एचटीएमएल पेज को ब्लूट करने के बजाय जितनी ज्यादा संभव हो सके बाहरी जावास्क्रिप्ट फ़ाइलों का उपयोग करना चाहता हूं।

मैंने कई उदाहरण देखे हैं, लेकिन उनमें से अधिकतर एजेक्स कॉल के बजाए पहले पृष्ठ लोड पर कुछ प्रारंभिक डेटा लौटाते हैं।

तो मेरा सवाल यह है कि, AJAX से पुनर्प्राप्त होने पर नॉकआउट के लिए मेरा जावास्क्रिप्ट व्यू मॉडेल कैसे बनाया जाएगा, जहां Url.Content() का उपयोग करके AJAX url बनाया गया है।

इसके अलावा, अगर मुझे इस व्यूमोडेल पर अतिरिक्त गणना मूल्यों की आवश्यकता है, तो मैं सर्वर पक्ष से मैप किए गए दृश्य मॉडल को कैसे बढ़ाऊंगा।

यदि मैंने स्वयं को अच्छी तरह से समझाया नहीं है, तो कृपया मुझे बताएं कि आप क्या सुनिश्चित नहीं करते हैं और मैं अपने प्रश्न को और अधिक स्पष्ट होने का प्रयास करूंगा और अपडेट करूंगा।

Answer 1

मुझे लगता है कि आपका डिज़ाइन एक अच्छा विचार है। वास्तव में, मैं अभी इस डिजाइन का उपयोग कर एक आवेदन विकसित कर रहा हूं!

आपको अपने पृष्ठ में प्रारंभिक डेटा एम्बेड करने की आवश्यकता नहीं है।

$(function() { 
    var viewModel = { 
     leads: ko.observableArray([]) // empty array for now 
    }; 

    ko.applyBindings(viewModel); 

    $.getJSON("/api/Leads", function (data) { 
     var newLeads = ko.mapping.fromJS(data)(); // convert to view model objects 
     viewModel.leads(newLeads); // replace the empty array with a populated one 
    }); 
}); 

आप कहीं एक "लोड करने" संदेश डाल करने के लिए चाहता हूँ: इसके बजाय, जब अपने पृष्ठ लोड हो तो एक खाली दृश्य मॉडल बनाने, फोन ko.applyBindings, तो एक AJAX कॉल जो दिखाई देने वाले मॉडल से स्थापित हो जाएगा इसके पूर्ण होने पर शुरू जब तक AJAX कॉल पूरा नहीं हो जाता तब तक आपके पृष्ठ पर।

उत्पन्न करने के लिए "/ API/बिक्रीसूत्र" यूआरएल, Url.RouteUrl का उपयोग करें: (। यही कारण है कि अपने एपीआई मार्ग Global.asax या App_Start \ RouteConfig.cs में विन्यस्त "DefaultApi" नाम दिया गया है यह सोचते है)

<script> 
    var apiUrl = '@Url.RouteUrl("DefaultApi", new { httproute = "", controller = "Leads" })'; 
</script> 

AJAX JSON परिणाम को नॉकआउट दृश्य मॉडल में परिवर्तित करने के लिए नॉकआउट मैपिंग प्लगइन का उपयोग ऊपर किया गया है। डिफ़ॉल्ट रूप से, जेनरेट किए गए दृश्य मॉडल में JSON में प्रत्येक प्रॉपर्टी के लिए एक अवलोकन योग्य संपत्ति होगी। इसे कस्टमाइज़ करने के लिए, जैसे अतिरिक्त गणना गुण जोड़ने के लिए, नॉकआउट मैपिंग प्लगइन का "create" callback का उपयोग करें।

यह मेरे आवेदन में अब तक पहुंचने के बाद, मैंने पाया कि मैं क्लाइंट-साइड कोड पर उपलब्ध सर्वर-साइड व्यू मॉडल से अधिक मेटा-डेटा चाहता था, जैसे कि गुणों की आवश्यकता है, और प्रत्येक संपत्ति पर कौन सी मान्यताओं हैं। नॉकआउट मैपिंग "कॉल" कॉलबैक में, मैं दृश्य जानकारी में स्वचालित गुणों और गणना किए गए अवलोकनों को स्वचालित रूप से उत्पन्न करने के लिए यह जानकारी चाहता था। इसलिए, सर्वर की तरफ, मैंने कुछ मॉडलों का निरीक्षण करने के लिए कुछ एमवीसी फ्रेमवर्क कक्षाओं और प्रतिबिंब का उपयोग किया और कुछ मेटा-डेटा जेनरेट के रूप में उत्पन्न किया जो प्रासंगिक विचारों में एम्बेड हो जाता है। क्लाइंट साइड पर, मेरे पास बाहरी जावास्क्रिप्ट फाइलें हैं जो नॉकआउट मैपिंग कॉलबैक को हुक करती हैं और पृष्ठ में दिए गए मेटा-डेटा के अनुसार दृश्य मॉडल उत्पन्न करती हैं। मेरी सलाह है कि नॉकआउट व्यू मॉडल कस्टमाइज़ेशन और अन्य जावास्क्रिप्ट को प्रत्येक दृश्य में हाथ से लिखकर शुरू करना है, फिर जब आप रिफैक्टर करते हैं, तो जेनेरिक जावास्क्रिप्ट फ़ंक्शंस को बाहरी फ़ाइलों में ले जाएं। प्रत्येक दृश्य को उस दृश्य के लिए विशिष्ट न्यूनतम जावास्क्रिप्ट के साथ समाप्त होना चाहिए, जिस बिंदु पर आप उस सर्वर को अपने सर्वर-साइड व्यू मॉडल एनोटेशन से उत्पन्न करने के लिए कुछ सी # लिखने पर विचार कर सकते हैं।

Answer 2

यूआरएल मुद्दे के लिए एक ही स्थान पर अपने _Layout.cshtml में इस ऐड जहां यह फ़ाइलों को प्रयोग करने से पहले है:

<script> 
    window._appRootUrl = '@Url.Content("~/")'; 
</script> 

तो फिर तुम window._appRootUrl उपयोग कर सकते हैं स्ट्रिंग संयोजन के साथ या के साथ यूआरएल की रचना करने के URI.js. जैसे जावास्क्रिप्ट लाइब्रेरी की मदद

अतिरिक्त गणना मूल्यों के लिए, आप एक नॉकआउट गणना किए गए अवलोकन योग्य का उपयोग करना चाह सकते हैं। यदि यह संभव नहीं है या आप इसे करना पसंद करते हैं। नेट आपको केवल गेटटर के साथ एक संपत्ति बनाने में सक्षम होना चाहिए, लेकिन जब आप क्लाइंट पर अन्य गुणों को अपडेट करते हैं तो यह अपडेट नहीं होगा यदि यह उन पर निर्भर करता है।