एएसपी.नेट एमवीसी 3 ट्रीव्यू

Question

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

मैंने उपयोग में देखा है टेलरिक, डीजेएमई और एमवीसी कंट्रोल टूलकिट जैसे तीसरे पक्ष के विक्रेता। सभी अच्छे पैकेजों के दौरान, मैं लाइसेंस के बारे में असहज हूं, और चूंकि मैं एमवीसी (और सामान्य रूप से प्रोग्रामिंग) के लिए नया हूं, इसलिए मुझे सही दस्तावेज काम करने के लिए उनके दस्तावेज की कमी है।

TreeViewHelper और Recursive Partial View

अन्य कम संदर्भित लेख (शीर्ष 3 भी बहुत जानकारीपूर्ण कर रहे हैं) के अलावा:

मैं भी TreeViews पर भारी संदर्भित ब्लॉग देखा है

1. http://tpeczek.com/2010/01/asynchronous-treeview-in-aspnet-mvc.html
2. http://mikehadlow.blogspot.com/2008/10/rendering-tree-view-using-mvc-framework.html
3. http://www.tek-tips.com/viewthread.cfm?qid=1637392&page=4
4. http://weblogs.asp.net/jigardesai/archive/2008/02/04/display-hierarchical-data-in-asp-net-mvc-framework.aspx
5. http://www.jigar.net/articles/viewhtmlcontent311.aspx
6. http://help.syncfusion.com/ug_82/ASP.NETMVCUI_Tools/CreatingATreeViewControl.html

मैं या तो TreeViewHelper या रिकर्सिव आंशिक देखें विधि का उपयोग करना चाहते हैं।
हालांकि, TreeViewHelper में, मैं इसे दूसरी तालिका से डेटा खींच नहीं सकता (यानी मैं इसे केवल फाइलों को सूचीबद्ध कर सकता हूं, लेकिन मुझे यकीन नहीं है कि यह प्रत्येक फ़ाइल के लिए दस्तावेज़ों को कैसे सूचीबद्ध करे।)
रिकर्सिव आंशिक दृश्य के लिए, मैं अभी भी इसे एमवीसी 3 में परिवर्तित करने और सामान्य कार्यान्वयन में हानि में हूं। मुझे एक पोस्ट मिली (forums.asp.net/t/1652809.aspx/1?treeview+with+mvc+3) जो कि इसे थोड़ा सा एमवीसी 3 में परिवर्तित करने का स्पष्टीकरण देता है, लेकिन मैं अभी भी अस्पष्ट नहीं हूं उसके साथ क्या करें। मैं आंशिक दृश्य के लिए त्रुटि प्राप्त हो रही: परोक्ष प्रकार 'शून्य' टाइप करने के लिए 'वस्तु'

परिवर्तित नहीं कर सकते जैसा कि मैंने कहा इससे पहले कि मैं MVC3 के लिए नया हूँ और अंतर्दृष्टि, जिसमें विधि के लिए सबसे अच्छा काम करेगा चाहते हैं मेरे परिदृश्य और इसे कैसे कार्यान्वित करें।

Answer 1

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

जैसा कि मैंने उपरोक्त टिप्पणी में कहा है, @ एचटीएमएल.एक्शन और @ एचटीएमएल। @ एचटीएमएल.रेंडरएक्शन और @ एचटीएमएल। रेंडरपार्टियल के बजाय पार्टिकल काम।

Answer 2

/संपादित करने के लिए एक रूप देने के जोड़// नोड मेरी Mvc की TreeView टेम्प्लेट की चाल को नष्ट यहाँ टूलकिट को नियंत्रित करता है: http://mvccontrolstoolkit.codeplex.com/wikipage?title=TreeView

Answer 3

$(document).ready(function() { 
     BindChart(); 
    }); 
    function BindChart() { 
     $("#org").jOrgChart({ 
      chartElement: '#chart', 
      dragAndDrop: true 
     }); 
    } 
    $(".cardadd").live("click", function() 
    { 
     var data = { id: 0 , ParentId:$(this).parent().data('cardid')}; 
     OpenForminWindow('divfrmChartMember', 'divChartMember', 'frmChartMember', chart.ChartMember, data, '', 400, 1000); 
    }); 
    $(".cardedit").live("click", function() { 
     var data = { id: $(this).parent().data('cardid')}; 
     OpenForminWindow('divfrmChartMember', 'divChartMember', 'frmChartMember', chart.ChartMember, data, '', 400, 1000); 
    }); 

    $(".cardremove").live("click", function() { 

    }); 
    function OpenForminWindow(popupId, targetDivId, formid, url, data, callbackfunc, heigth, width) { 
     $.ajax({ 
      type: "GET", 
      url: url, 
      data: data, 
      cache: false, 
      success: function (data) { 
       $('#' + targetDivId).html(data); 
       $('#' + formid).removeData('validator'); 
       $('#' + formid).removeData('unobtrusiveValidation'); 
       $('#' + formid).each(function() { $.data($(this)[0], 'validator', false); }); //enable to display the error messages 
       $.validator.unobtrusive.parse('#' + formid); 
       if (callbackfunc) 
        return callbackfunc(); 
      } 
     }); 

     $("#" + popupId).dialog({ 
      modal: true, 
      height: heigth, 
      width: width, 
      beforeClose: function (event, ui) { 
       if (typeof refresh !== 'undefined' && refresh == true) 
        ReloadCurrentPage(); 
      } 
     }); 
    } 
    $('#frmChartMember').live('submit', function (e) { 
     SubmitAjaxForm($(this).attr('id'), chart.AddMember, ReloadChart); 
     e.preventDefault(); 
    }); 
    function SubmitAjaxForm(formId, url, callBack) { 
     $.ajax({ 
      url: url, 
      type: 'post', 
      cache: false, 
      data: $('#' + formId).serialize(), 
      success: function (data) { 
       return callBack(data); 
      }, 
     }); 
    } 
    function ReloadChart(result) { 
     ClosePopup('divfrmChartMember'); 
     $.ajax({ 
      type: 'GET', 
      url: chart.ChartList, 
      cache: false, 
      success: function (result) { 
       $("#orgChart").html(result); 
       BindChart(); 

      } 
     }); 
    } 
    function ClosePopup(divid) { 
     $("#" + divid).dialog("close"); 

    } 

सार्वजनिक वर्ग ChartController: नियंत्रक { // // प्राप्त:/चार्ट/ चार्ट कॉन्टेक्स्ट सीटीएक्स = नया चार्ट कॉन्टेक्स्ट(); सार्वजनिक एक्शन रिसैट इंडेक्स() { वापसी देखें(); } सार्वजनिक एक्शन रिसेट ऑर्ग चार्ट() { वापसी आंशिक दृश्य ("_ संगठन चार्ट", ctx.Cards.ToList()); } public ActionResult ChartMember (? पूर्णांक आईडी, पूर्णांक ParentId = नल) { कार्ड कार्ड = नए कार्ड(); यदि (आईडी> 0) कार्ड = ctx.Cards.Find (आईडी); अन्य कार्ड। माता-पिता = माता-पिता; वापसी आंशिक दृश्य ("_ चार्टमम्बर", कार्ड); } सार्वजनिक एक्शन रिसेट सेवमेम्बर (कार्ड कार्ड) { अगर (card.id == 0) ctx.Cards.Add (कार्ड); अन्य ctx.Entry (कार्ड) .State = System.Data.EntityState.Modified; ctx.SaveChanges(); वापसी जेसन (सच, JsonRequestBehavior.AllowGet); } }