ASP.NET MVC में डीप नेस्टेड व्यू मॉडल के लिए फॉर्म बनाना

ASP.NET MVC में डीप नेस्टेड व्यू मॉडल्स के लिए फॉर्म बनाने पर जिमी बोगर्ड की एक और दिलचस्प पोस्ट। इस तथ्य के बावजूद कि यह लगातार ASP.NET MVC 2 को संदर्भित करता है, जानकारी 3 संस्करण के लिए भी प्रासंगिक है। एक मुक्त अनुवाद में habrakat मूल पोस्ट के तहत।


ASP.NET MVC 2 ने दृढ़ता से टाइप किए गए विचारों में फ़ॉर्म तत्व बनाने के लिए कई दृढ़ता से टाइप किए गए हेल्पर्स की शुरुआत की। ये दृढ़ता से टाइप किए गए सहायक तत्व पूरी तरह से तैयार इनपुट तत्व बनाने के लिए लैम्बडा एक्सप्रेशन का उपयोग करते हैं, जिसमें तत्व के लिए सही नाम और मूल्य भी शामिल है।

लैम्ब्डा अभिव्यक्ति काफी अभिव्यंजक हैं। वे आपको संपादन के लिए काफी जटिल मॉडल बनाने की अनुमति देते हैं और सब कुछ एक साथ रखने के लिए एक मॉडल बाइंडिंग है। एक जटिल दृश्य मॉडल प्रकार का एक उदाहरण:

public class ProductEditModel
{
public string Name { get ; set ; }
public PriceEditModel Price { get ; set ; }

public class PriceEditModel
{
public decimal Value { get ; set ; }
public string Currency { get ; set ; }
}
}

* This source code was highlighted with Source Code Highlighter .

उसके लिए एक दृश्य बनाना काफी आसान है:

@using (Html.BeginForm()) {
< p >
@Html.LabelFor(m = > m.Name)
@Html.TextBoxFor(m = > m.Name)
</ p >
< p >
@Html.LabelFor(m = > m.Price.Currency)
@Html.TextBoxFor(m = > m.Price.Currency)
</ p >
< p >
@Html.LabelFor(m = > m.Price.Value)
@Html.TextBoxFor(m = > m.Price.Value)
</ p >
}

* This source code was highlighted with Source Code Highlighter .

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

@using (Html.BeginForm()) {
< p >
@Html.LabelFor(m = > m.Name)
@Html.TextBoxFor(m = > m.Name)
</ p >
@Html.Partial("_PriceEditModel", Model.Price);
}
* This source code was highlighted with Source Code Highlighter .

हमारा आंशिक दृश्य केवल कट-आउट व्यू कोड है, सिवाय इसके कि यह अब PriceEditModel प्रकार पर आधारित है:

@model ProductEditModel.PriceEditModel

< p >
@Html.LabelFor(m = > m.Currency)
@Html.TextBoxFor(m = > m.Currency)
</ p >
< p >
@Html.LabelFor(m = > m.Value)
@Html.TextBoxFor(m = > m.Value)
</ p >
* This source code was highlighted with Source Code Highlighter .

हालाँकि, परिणामी HTML अब मॉडल सदस्यों से सही रूप से मेल नहीं खाता है। इस तथ्य के बावजूद कि स्क्रीन पर सब कुछ क्रम में है:


लेकिन जैसे ही हम HTML में देखते हैं, हमें एक त्रुटि दिखाई देगी:


हमारे सदस्य के नाम के बजाय उसके नाम में सही मूल सदस्य होने पर, जैसे "Price.Currency", हम केवल "मुद्रा" देखते हैं। दरअसल, जब हम POST कार्रवाई में शामिल होते हैं, तो मूल्य सदस्य शून्य होता है, क्योंकि मॉडल बाइंडिंग को मैच नहीं मिला:


ठीक वैसा नहीं जैसा हम पाना चाहते हैं!

तो हमारे विकल्प क्या हैं? यह सुनिश्चित करने के लिए कि मॉडल बाइंडिंग आंशिक दृश्य वाले मॉडल के लिए काम करता है, हम इन मॉडलों को अपने आंशिक विचारों में मूल प्रकार में डाल सकते हैं। यानी "PriceEditModel" से "ProductEditModel" आंशिक विचारों के लिए हमारे मॉडल प्रकार बदलें।

बहुत आकर्षक विकल्प नहीं!

हमारे पास एक बेहतर विकल्प है - MVC से टेम्पलेट हेल्पर्स 2. टेम्पलेट हेल्पर्स गहराई से नेस्टेड व्यू मॉडल्स की समस्या को हल करते हैं।

टेम्प्लेट हेल्पर्स के साथ काम करें

जब हम Html.EditorXyz () HtmlHelper से विधियों का उपयोग करते हैं, तो टेम्पलेट-आधारित हेल्पर्स आंशिक विचारों से भिन्न होते हैं, विशेष संदर्भ जानकारी माता-पिता से बच्चे तक जाती है। टेम्प्लेट-आधारित सहायकों का उपयोग करने के लिए हमारे विचारों को फिर से बनाने के लिए, आइए हमारे पास प्रत्येक दृश्य मॉडल के लिए एक संपादक टेम्पलेट बनाएं:


ये टेम्पलेट रेजर से साधारण आंशिक विचार हैं, सिवाय इसके कि उन्हें एक विशेष EditorTemplates फ़ोल्डर में रखा गया है। ProductEditModel के साथ हमारे आंशिक दृश्य के लिए, हम बस वह सब कुछ स्थानांतरित करते हैं जो हमारे विचार में था:

@model ProductEditModel

< p >
@Html.LabelFor(m = > m.Name)
@Html.TextBoxFor(m = > m.Name)
</ p >
@Html.EditorFor(m = > m.Price)

* This source code was highlighted with Source Code Highlighter .

हालांकि, एक मामूली विस्तार है। मूल्य के एक आंशिक दृश्य को प्रस्तुत करने के बजाय, हम मूल्य सदस्य के लिए संपादक का प्रतिपादन कर रहे हैं। PriceEditModel टेम्प्लेट वह है जो हमारे मूल आंशिक दृश्य में बिना किसी परिवर्तन के था:

@model ProductEditModel.PriceEditModel

< p >
@Html.LabelFor(m = > m.Currency)
@Html.TextBoxFor(m = > m.Currency)
</ p >
< p >
@Html.LabelFor(m = > m.Value)
@Html.TextBoxFor(m = > m.Value)
</ p >

* This source code was highlighted with Source Code Highlighter .

फिलहाल, अंतर यह है कि हमारे टेम्पलेटेड हेल्पर को पता है कि पैरेंट मॉडल ने आंशिक मूल्य बनाने के लिए "मूल्य" सदस्य का उपयोग किया था। हमारे मूल विचार में, संपादन अभी भी सरल है:

@using (Html.BeginForm()) {
@Html.EditorForModel()
< input type ="submit" />
}

* This source code was highlighted with Source Code Highlighter .

ASP.NET MVC यह सुनिश्चित करने के लिए मॉडल प्रकार की जाँच करेगा कि जब हम EditorForModel विधि को कहते हैं, तो इस मॉडल प्रकार के लिए एक संपादक टेम्पलेट मौजूद है। क्योंकि हम प्रत्येक व्यक्तिगत प्रकार के मॉडल के लिए संपादक टेम्पलेट बनाते हैं, इससे कोई फर्क नहीं पड़ता कि ये नेस्टेड प्रकार पदानुक्रम में कहाँ स्थित हैं। ASP.NET MVC माता-पिता के संदर्भ को व्यक्त करेगा, इसलिए गहरी नेस्टेड व्यू मॉडल में इसके बारे में सही जानकारी होगी।

परिणामी HTML को देखने के बाद, हम यह सुनिश्चित कर सकते हैं कि सब कुछ क्रम में है:


मूल्य के रूप में इनपुट तत्व का नाम अब एक वैध मूल संपत्ति का नाम है। और POST एक्शन को डीबग करना पुष्टि करता है कि मॉडल बाइंडिंग अब सही ढंग से काम करता है:


ASP.NET MVC 2 से टेम्पलेट सहायकों के साथ, हम अपने विचारों में नेस्टेड मॉडल बना सकते हैं और एक ही समय में, आंशिक विचारों के सभी लाभ प्राप्त कर सकते हैं। केवल चेतावनी यह सुनिश्चित करने के लिए है कि आप टेम्पलेट हेल्पर्स और Html.EditorXyz विधियों का उपयोग करके दृश्य बनाते हैं। अन्यथा, आपके विचारों पर प्रभाव न्यूनतम होगा।

और सिर्फ शिकायत करने के लिए - यह विधि MVC 1.0 में बहुत कष्टप्रद है। मैंने MVC के पुराने संस्करणों पर स्विच करने के बाद कोड का एक गुच्छा फेंक दिया!