एएसपी.नेट एमवीसी ट्री व्यू के लिए टेलीरिक (केंडो) यूआई

Question

मैं एमवीसी 5 और एएसपी.नेट एमवीसी के लिए टेलीरिक (पूर्व में केंडो) यूआई का नवीनतम संस्करण उपयोग कर रहा हूं। मैं पदानुक्रमित डेटा के साथ काम कर रहा हूँ। मैं _Layout दृश्य में TreeView बनाने का प्रयास कर रहा हूं और इसे यूआरएल या एक्शन लिंक के साथ पॉप्युलेट कर रहा हूं।

मेरे वर्तमान कोड:

_Layout देखें में:

@Html.Partial("_ProductTree") 

"_ProductTree" आंशिक दृश्य:

@(Html.Kendo().TreeView().Name("ProductTree") 
    .DataSource(d => d 
     .Model(m => m 
      .Id("ProductId") 
      .HasChildren("Categories")) 
    .Read(r => r.Action("_ProductTree", "Home"))) 
    .DataTextField("ProductName")) 

कार्रवाई विधि:

[ActionName("_ProductTree")] 
public JsonResult GetProductTree() 
{ 
    var products = _productBusinessService.GetProducts(); 

    var result = products.Select(p => new 
    { 
     p.ProductID, 
     p.ProductName, 
     Categories= c.Categories.Any() 
    }).OrderBy(t => t.ProductName); 

    return Json(result, JsonRequestBehavior.AllowGet); 
} 

मैं कर रहा हूँ जारी करने की संख्या es:

1. जब मैं एक माता पिता के नोड बच्चे हैं कि, TreeView कार्रवाई विधि मार जाता है और बच्चे को पूरे पेड़ जोड़कर, के बजाय सिर्फ बच्चों को प्रदर्शित करने का विस्तार करें।
2. मुझे TreeView दो-गहरे घोंसले करने में सक्षम होना चाहिए, उदाहरण के लिए उत्पाद> श्रेणी> प्रकार।
3. मैं यह समझने की कोशिश कर रहा हूं कि LINQ का उपयोग करके डेटा को कुल मिलाकर या प्रोजेक्ट कैसे करें दो-गहरे उच्चतरता को करने के लिए।
4. मैंने लोडऑनडेमैंड को बंद करने का प्रयास किया लेकिन इसने ट्री व्यू को उत्पाद सूची में प्रत्येक रिकॉर्ड के लिए एक बार क्रिया विधि को कॉल किया।

मैंने ट्री व्यू रेजर कोड सीधे _Layout व्यू (आंशिक दृश्य का उपयोग नहीं) में डालने का प्रयास किया है। मुझे एहसास है कि मुझे एक्शन विधि को बेस कंट्रोलर क्लास में ले जाने की आवश्यकता हो सकती है और इसे प्रत्येक नियंत्रक में अभिभावक नोड में सूची जोड़ने से रोकने के लिए इसे प्राप्त करने की आवश्यकता हो सकती है। अगर मैं जल्द ही यह काम नहीं कर पा रहा हूं, तो मुझे या तो केंडो यूआई प्रोफेशनल या ओपन सोर्स विकल्प का उपयोग करना पड़ सकता है।

आप में से कुछ यह कहने के लिए प्रेरित हो सकते हैं कि इस प्रश्न का उत्तर कहीं और दिया गया है। टेलीरिक ट्री व्यू का उपयोग करके नेस्टेड (एक से अधिक गहरे) पदानुक्रमित डेटा को पॉप्युलेट करने और प्रदर्शित करने के मुद्दों में से कोई भी पोस्ट नहीं मिला है।

इस पोस्ट है

Nested DataSources and TreeView with kendo ui

लेकिन यह TreeView (नहीं MVC के लिए यूआई) संस्करण के JavaScript संस्करण के लिए है और यह जवाब नहीं किया गया है।

आपकी मदद के लिए अग्रिम धन्यवाद!

Answer 1

कोड में समाधान:

_Layout दृश्य:

@Html.Partial("_ProductTree") 

या

@RenderSection("productTree", false) 

तो सामग्री को ध्यान में रखते

@section productTree 
{ 
    @Html.Partial("_ProductTree") 
} 

_ProductTree आंशिक दृश्य

@(Html.Kendo().TreeView().Name("ProductTree") 
    .DataSource(d => d 
     .Model(m => m 
      .Id("Id") 
      .HasChildren("HasChildren") 
      .Children("Children")) 
    .Read(r => r.Action("_ProductTree", "Home"))) 
    .DataTextField("Name")) 

मैंने एक्शन विधि को बेसकंट्रोलर अमूर्त वर्ग में स्थानांतरित कर दिया है जिसे किसी भी नियंत्रक द्वारा विरासत में प्राप्त किया जा सकता है जिसे ProductTree TreeView प्रदर्शित करने की आवश्यकता है। डेटा एक ProductService और एक CategoryService से खींच लिया और गुमनाम वस्तुओं में LINQ प्रक्षेपण का उपयोग कर एकत्रित किया गया था:

[ActionName("_ProductTree")] 
    public JsonResult GetProductData() 
    { 
     var products = _productBusinessService.GetProducts(); 

     foreach (var product in product) 
     { 
      foreach (var category in product.Categories) 
      { 
       category.ProductTypes = 
        _productService.GetProductTypes(category.CategoryId);           
      } 
     } 

     var productTreeData = products.Select(p => new 
     { 
      Id = p.ProductId, 
      Name = p.ProductName, 
      HasChildren = p.Categories.Any(), 
      Children = p.Categories.Select(c => new 
      { 
       Id = c.CategoryId, 
       Name = c.CategoryName, 
       HasChildren = c.ProductTypes.Any(), 
       Children = c.ProductTypes.Select(t => new 
       { 
        Id = t.ProductTypeId, 
        Name = t.ProductTypeName, 
        HasChildren = false 
       }).OrderBy(t => t.Name).ToList() 
      }).OrderBy(c => c.Name).ToList() 
     }).OrderBy(p => p.Name).ToList(); 

     return Json(productTreeData, JsonRequestBehavior.AllowGet); 
    } 

परिणाम ASP.NET Treeview के लिए एक 3-गहरी, पूरी तरह से भर, हल कर Telerik यूआई नाम और आईडी युक्त उत्पाद >> श्रेणी >> उत्पाद प्रकार। LoadOnDemand चालू या बंद करना इस मामले में कोई फर्क नहीं पड़ता। ट्री व्यू में बाइंड का उपयोग करते समय इसे एक फर्क पड़ना चाहिए।

मुझे आशा है कि इससे मदद मिलती है!