mvvm ट्यूटोरियल
शुरुआत mvvm से हो रही है

टिप्पणियों

C # MVVM सारांश और पूरा उदाहरण

सारांश:

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

मॉडल वह परत है जो व्यापार तर्क को संचालित करती है। यह ViewModel द्वारा खपत के लिए किसी भी डेटा स्रोत से जानकारी को पुनर्प्राप्त और संग्रहीत करता है।

ViewModel वह परत है जो View और Model के बीच एक सेतु का काम करती है। यह मॉडल से कच्चे डेटा को व्यू के लिए प्रस्तुत करने योग्य रूप में परिवर्तित कर सकता है या नहीं भी कर सकता है। एक उदाहरण परिवर्तन होगा: मॉडल के लिए 'सच' या 'गलत' के लिए स्ट्रिंग से बूलियन ध्वज।

दृश्य वह परत है जो सॉफ़्टवेयर के इंटरफ़ेस (यानी GUI) का प्रतिनिधित्व करती है। इसकी भूमिका उपयोगकर्ता के लिए ViewModel से जानकारी प्रदर्शित करने के लिए, और ViewModel को जानकारी वापस की परिवर्तन संवाद करने के लिए है।

ये तीन घटक निम्नलिखित फैशन में एक दूसरे को संदर्भित करके एक साथ काम करते हैं:

• दृश्य ViewModel का संदर्भ देता है।
• ViewModel मॉडल का संदर्भ देता है।

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

दो-तरफ़ा संचार (डेटा-बाइंडिंग) के लिए एक प्रमुख घटक INotifyPropertyChanged इंटरफ़ेस है।

इस तंत्र का उपयोग करके, देखें उपयोगकर्ता इनपुट के माध्यम से ViewModel में डेटा को संशोधित कर सकता है, और ViewModel डेटा के साथ दृश्य को अपडेट कर सकता है जो मॉडल में प्रक्रियाओं के माध्यम से या रिपॉजिटरी से अपडेट किए गए डेटा के साथ अपडेट किया गया हो सकता है।

एमवीवीएम वास्तुकला इनमें से प्रत्येक परत के लिए पृथक्करण की चिंताओं पर भारी जोर देता है। परतों को अलग करने से हमें लाभ होता है:

• प्रतिरूपकता: प्रत्येक परत के आंतरिक कार्यान्वयन को दूसरों को प्रभावित किए बिना बदला या स्वैप किया जा सकता है।
• बढ़ी हुई जांचनीयता: प्रत्येक परत को नकली डेटा के साथ यूनिट टेस्ट किया जा सकता है, जो कि ViewModel के कोड- व्यू के कोड-बिहाइंड में लिखे जाने पर संभव नहीं है।

बिल्ड:

एक नया WPF एप्लिकेशन प्रोजेक्ट बनाएं

अपने समाधान में तीन नए फ़ोल्डर बनाएं: मॉडल , व्यूमॉडल और व्यू , और मूल MainWindow.xaml हटा दें, बस एक नई शुरुआत करें।

तीन नए आइटम बनाएं, प्रत्येक एक अलग परत के लिए:

• मॉडल फ़ोल्डर पर राइट क्लिक करें, और HelloWorldModel.cs नामक एक क्लास आइटम जोड़ें।
• ViewModel फ़ोल्डर पर राइट क्लिक करें, और HelloWorldViewModel.cs नामक एक क्लास आइटम जोड़ें।
• दृश्य फ़ोल्डर पर राइट क्लिक करें, और HelloWorldView.xaml नामक एक विंडो (WPF) आइटम जोड़ें।

नए दृश्य को इंगित करने के लिए Alter App.xaml

<Application x:Class="MyMVVMProject.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:MyMVVMProject"
             StartupUri="/View/HelloWorldView.xaml">
    <Application.Resources>
         
    </Application.Resources>
</Application>

ViewModel:

पहले ViewModel के निर्माण के साथ शुरू करें। वर्ग को INotifyPropertyChanged इंटरफ़ेस को लागू करना होगा, एक PropertyChangedEventHandler इवेंट घोषित करना होगा, और घटना को बढ़ाने के लिए एक विधि बनाना होगा (स्रोत: MSDN: संपत्ति परिवर्तन अधिसूचना कैसे लागू करें )। इसके बाद, एक क्षेत्र और एक संबंधित संपत्ति घोषित करें, जिससे संपत्ति के set OnPropertyChanged() में OnPropertyChanged() विधि को कॉल करना सुनिश्चित हो सके। नीचे दिए गए उदाहरण में कंस्ट्रक्टर का उपयोग यह दिखाने के लिए किया जा रहा है कि मॉडल ViewModel को डेटा प्रदान करता है।

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading.Tasks;
using MyMVVMProject.Model;

namespace MyMVVMProject.ViewModel
{
    // Implements INotifyPropertyChanged interface to support bindings
    public class HelloWorldViewModel : INotifyPropertyChanged
    {
        private string helloString;

        public event PropertyChangedEventHandler PropertyChanged;

        public string HelloString
        {
            get
            {
                return helloString;
            }
            set
            {
                helloString = value;
                OnPropertyChanged();
            }
        }

        /// <summary>
        /// Raises OnPropertychangedEvent when property changes
        /// </summary>
        /// <param name="name">String representing the property name</param>
        protected void OnPropertyChanged([CallerMemberName] string name = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
        }

        public HelloWorldViewModel()
        {
            HelloWorldModel helloWorldModel = new HelloWorldModel();
            helloString = helloWorldModel.ImportantInfo;
        }
    }
}

नमूना:

इसके बाद, मॉडल का निर्माण करें। जैसा कि पहले कहा गया था, मॉडल एक रिपॉजिटरी से (साथ ही इसे बचाने के लिए रिपॉजिटरी में वापस धकेल देता है) खींचकर ViewModel के लिए डेटा प्रदान करता है। यह GetData() विधि के साथ नीचे प्रदर्शित किया गया है, जो एक सरल List<string> वापस करेगा। इस लेयर में बिजनेस लॉजिक भी लगाया जाता है, और ConcatenateData() विधि में देखा जा सकता है। इस विधि से वाक्य बनता है "हैलो, दुनिया!" List<string> जो पहले हमारे "रिपॉजिटरी" से लौटा था।

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace MyMVVMProject.Model
{
    public class HelloWorldModel
    {
        private List<string> repositoryData;
        public string ImportantInfo
        {
            get
            {
                return ConcatenateData(repositoryData);
            }
        }

        public HelloWorldModel()
        {
            repositoryData = GetData();
        }

        /// <summary>
        /// Simulates data retrieval from a repository
        /// </summary>
        /// <returns>List of strings</returns>
        private List<string> GetData()
        {
            repositoryData = new List<string>()
            {
                "Hello",
                "world"
            };
            return repositoryData;
        }

        /// <summary>
        /// Concatenate the information from the list into a fully formed sentence.
        /// </summary>
        /// <returns>A string</returns>
        private string ConcatenateData(List<string> dataList)
        {
            string importantInfo = dataList.ElementAt(0) + ", " + dataList.ElementAt(1) + "!";
            return importantInfo;
        }
    }
}

राय:

अंत में, व्यू बनाया जा सकता है। इस उदाहरण के लिए कोड के पीछे कुछ भी शामिल करने की आवश्यकता नहीं है, हालांकि यह आवेदन की जरूरतों के आधार पर भिन्न हो सकता है। हालाँकि, XAML में कुछ पंक्तियाँ जोड़ी गई हैं। Window को ViewModel नामस्थान का संदर्भ ViewModel । यह XAML नामस्थान xmlns:vm="clr-namespace:MyMVVMProject.ViewModel" लिए मैप किया गया है xmlns:vm="clr-namespace:MyMVVMProject.ViewModel" । अगला, विंडो को एक DataContext आवश्यकता है। यह <vm:HelloWorldViewModel/> सेट है। अब लेबल (या आपके चयन का नियंत्रण) को विंडो में जोड़ा जा सकता है। इस स्तर पर मुख्य बिंदु यह सुनिश्चित करना है कि आप बाइंडिंग को ViewModel की संपत्ति पर सेट करें जिसे आप लेबल सामग्री के रूप में प्रदर्शित करना चाहते हैं। इस मामले में, यह {Binding HelloString} ।

संपत्ति को बांधना महत्वपूर्ण है, न कि फ़ील्ड, जैसा कि बाद के मामले में दृश्य को वह सूचना प्राप्त नहीं होगी, जो मूल्य परिवर्तित हुई है, क्योंकि OnPropertyChanged() विधि केवल PropertyChangedEvent पर PropertyChangedEvent बढ़ाएगी, और नहीं खेत।

<Window x:Class="MyMVVMProject.View.HelloWorldView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:MyMVVMProject.View"
        xmlns:vm="clr-namespace:MyMVVMProject.ViewModel"
        mc:Ignorable="d"
        Title="HelloWorldView" Height="300" Width="300">
    <Window.DataContext>
        <vm:HelloWorldViewModel/>
    </Window.DataContext>
    <Grid>
        <Label x:Name="label" FontSize="30" Content="{Binding HelloString}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Grid>
</Window>