शुरुआती के लिए ASP.NET MVC 3: jQueryUI और NuGet का उपयोग करके तिथि इनपुट जोड़ना

नई तकनीकों को सीखने की प्रक्रिया में, नए लोगों को अक्सर विशिष्ट कार्यों का सामना करना पड़ता है जो हल करना आसान नहीं होता है। शुरुआती लोगों के लिए MVC3 लेखों की एक श्रृंखला में, ऐसी समस्याओं के समाधान प्रस्तुत किए जाएंगे।

एक सामान्य प्रश्न जो वेब डेवलपर्स का सामना करता है, वह ड्रॉप-डाउन कैलेंडर आइटम का उपयोग करके पृष्ठ पर एक सुविधाजनक तिथि प्रविष्टि जोड़ रहा है। यह लेख कुछ क्षणों में NVC पैकेज प्रबंधक और jQuery UI लाइब्रेरी का उपयोग करके MVC 3 में इस तरह के एक तत्व को जोड़ने का एक संक्षिप्त विवरण देता है।

नीचे स्रोत कोड के साथ एक पूर्ण समाधान है।

Nuget के माध्यम से घटकों को स्थापित करना

सबसे पहले, हमें jQuery UI DatePicker नियंत्रण के साथ प्रोजेक्ट में एक पैकेज जोड़ने की आवश्यकता है, जो हमें वेब पेज पर इनपुट क्षेत्र में एक सुविधाजनक तिथि प्रविष्टि को व्यवस्थित करने की अनुमति देता है।

NuGet पैनल खोलें और कमांड दर्ज करें:

इंस्टॉल-पैकेज jQuery.UI.idgets.atepicker

कुछ सेकंड के बाद, पैकेज को सभी निर्भरताओं (चित्र 1) के साथ डाउनलोड और स्थापित किया जाएगा।


चित्र 1। किसी प्रोजेक्ट में पैकेज जोड़ने के लिए NuGet कमांड चलाना

अंकन

नियंत्रण के संचालन को प्रदर्शित करने के लिए, होम कंट्रोलर के Index.cshtml पेज का निम्न लेआउट बनाएं:

<p>  : @Html.TextBox("exampleDateTime") </p> <p>   : @Html.TextBox("exampleDateTime2", null, new { @class = "datePicker" })   : @Html.TextBox("exampleDateTime3", null, new { @class = "datePicker" }) </p> 

मार्कअप में दिनांक दर्ज करने के लिए एक एकल फ़ील्ड और डेटा दर्ज करने के लिए दो फ़ील्ड होते हैं जिनमें समान CSS वर्ग होता है।

लिपियों और शैलियों

पृष्ठ पर काम करने के लिए घटक के लिए, हमें इसके व्यवहार और प्रदर्शन के लिए जिम्मेदार लिपियों को जोड़ने की आवश्यकता है। इसके अलावा, हमें नियंत्रण के लिए कम से कम सरल डिजाइन की आवश्यकता है।

ऐसा करने के लिए, हम पृष्ठ के शीर्ष पर स्क्रिप्ट फ़ाइलों और शैलियों को जोड़ने की आवश्यकता का संकेत देते हैं:

 <link href="@Url.Content("~/Content/themes/base/jquery.ui.core.css")" rel="stylesheet" type="text/css" /> <link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" rel="stylesheet" type="text/css" /> <link href="@Url.Content("~/Content/themes/base/jquery.ui.theme.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.ui.datepicker.min.js")" type="text/javascript"></script> 

तीन सीएसएस शैलियों में थीम और नियंत्रण प्रसंस्करण शामिल हैं। यदि वांछित है, तो उन्हें एक फ़ाइल में जोड़ा जा सकता है।

पहली स्क्रिप्ट jQuery यूआई लाइब्रेरी और दूसरी इसके डेटपिकर घटक को जोड़ती है।

अब आप पृष्ठ पर नियंत्रण शामिल करने के लिए तैयार हैं। हम इसे सक्रिय करते हैं और इसे निम्नलिखित जावास्क्रिप्ट कोड का उपयोग करके घोषित नियंत्रणों के साथ संलग्न करते हैं, जिसे पृष्ठ के अंत में रखा जाना चाहिए:

 <script type="text/javascript"> $(document).ready(function () { $('#exampleDateTime').datepicker({ firstDay: 1, dateFormat: 'dd.mm.yy' }); $('.datePicker').datepicker({ firstDay: 1, dateFormat: 'dd.mm.yy' }); }); </script> 

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

FirstDay पैरामीटर सप्ताह का पहला दिन निर्धारित करता है (1 - सोमवार, 0 - रविवार, डिफ़ॉल्ट रूप से)। दिनांक प्रारूप निर्दिष्ट करने के लिए, विशेष पैरामीटर dateFormat का उपयोग किया जाता है ।

परिणामस्वरूप, पृष्ठ को लॉन्च करने के बाद, आप सुविधाजनक नियंत्रण का उपयोग करके डेटा दर्ज करने में सक्षम होंगे जो jQuery यूआई प्रदान करता है (चित्र 2)।


अंजीर। 2. jQuery यूआई नियंत्रण के संचालन

स्थानीयकरण

सबसे पहले, आप मानक jQuery UI Datepicker तंत्र का उपयोग कर सकते हैं और स्थानीयकरण स्वयं सेट कर सकते हैं:

$ .datepicker.setDefaults ({dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']});

दूसरे, और यह सबसे अच्छा तरीका है कि आप डेवलपर्स से तैयार स्थानीयकरण स्क्रिप्ट का उपयोग कर सकते हैं, इसे http://jqueryui.com/download पर प्राप्त कर सकते हैं। पैकेज में, अन्य चीजों के अलावा, jquery.ui.datepicker-ru.js फ़ाइल होगी। यदि आप इसे पृष्ठ पर जोड़ते हैं तो आपको नियंत्रण का एक स्थानीयकृत संस्करण मिलेगा (चित्र 3)।


अंजीर। 3. कार्रवाई में स्थानीयकरण

स्रोत कोड

विज़ुअल स्टूडियो 2010 के लिए प्रोजेक्ट सोर्स कोड यहाँ डाउनलोड किए जा सकते हैं ।