टैब्यूलर डेटा (एएसपी एमवीसी) को संपादित करने के लिए कैसे करें

Question

मुझे ब्राउज़र में डेटा की एक तालिका संपादित करने में सक्षम होना चाहिए।

मैंने एमवीसीसीओन्ट्रिब में देखा है कि एक टेबल प्रस्तुत करने के लिए एक HTML सहायक है। उपयोगी ... लेकिन क्या होगा यदि मैं चाहता हूं कि उपयोगकर्ता उस तालिका को संपादित करने में सक्षम हो? जो मैं देख सकता हूं उससे यह मदद नहीं करता है।

इस तक पहुंचने का सबसे अच्छा तरीका क्या है?

अंदर एक टेबल के साथ पारंपरिक फार्म? यदि ऐसा है तो पोस्ट किए गए डेटा को पंक्तियों के संग्रह में वापस पार्स करने के लिए पर्याप्त एमवीसी स्मार्ट है? वैसे भी यह कैसे काम करेगा?

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

मुझे इस तालिका में पंक्तियां जोड़ने में भी सक्षम होना चाहिए। मुझे पेजिंग समर्थन की आवश्यकता नहीं है।

क्या वहां शेल्फ समाधान बंद है?

क्या मुझे वेब फॉर्म पर वापस जाना चाहिए? :)

Answer 1

फिल हैक के ब्लॉग पर एक नज़र डालें जहां वह वर्णन करता है कि model bind to a list कैसे करें।

शायद यह मदद कर सकता है?

Answer 2

मैं पहली बार जावास्क्रिप्ट यूआई पुस्तकालयों में से एक चेकआउट होगा:

• ExtJS Grid
• Yahoo DataTable
• Flexigrid

WebForms आसान होता है जब यह जल्दी से विकसित करने के लिए संपादन योग्य ग्रिड की तरह अमीर यूआई के लिए आता है ।

Answer 3

कल रात मैंने एक सरल समाधान लागू किया: Phil Haack's blog में वर्णित नामकरण सम्मेलन के साथ कोशिकाओं में इनपुट फ़ील्ड्स का उपयोग करके फॉर्म + टेबल (लिंक के लिए @ बेंगबेट के लिए धन्यवाद)।

यह काम कर रहा है लेकिन यह थोड़ा सा है (उदाहरण के लिए jquery के साथ पंक्तियों को जोड़ने के लिए मुझे अगली अप्रयुक्त अनुक्रमणिका को काम करने की आवश्यकता है)।

तो मैं अभी भी और अधिक समाधान ढूंढ रहा हूं।

एक मैंने पाया है extjs library है जो एक बहुत समृद्ध ग्रिड प्रदान करता है। मैंने अभी तक काम नहीं किया है कि ग्रिड डेटा को मेरे नियंत्रक कार्यों में से किसी एक को वापस पोस्ट करने का एक आसान तरीका है, हालांकि ...

Answer 4

मुझे एक ही समस्या है, और मुझे इसके लिए एक समाधान मिला है। ऐसा मत सोचो कि यह सबसे सुंदर है, लेकिन यह मेरे लिए आदर्श है, क्योंकि मेरी आवश्यकताओं में से एक jQuery के Jeditable प्लगइन का उपयोग कर तालिका डेटा को संपादित करने में सक्षम था।

तो मैं MVCContrib के ग्रिड < का उपयोग कर तालिका जनरेट> विस्तार:

Html.Grid<Somenamespace.Line>(Model.InvoiceLines) 
      .Attributes(id => "InvoiceGrid") 
      .Columns(column => { 
       column.For(li => li.LineItem.ItemDescription).Attributes(name => ".LineItem.ItemDescription", @class => "click"); 
       column.For(li => li.LineItem.InvoiceUnitNetPrice).Named("Unit net price ").Attributes(name => ".LineItem.InvoiceUnitNetPrice", @class => "click"); 
       column.For(li => li.LineItem.InvoiceQuantity).Attributes(name => ".LineItem.InvoiceQuantity", @class => "click"); 
      }) 
      .Render(); 
//rest of the code 
Html.Submit("_submit", "Save"); 

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

$(document).ready(function() { 
     $('#_submit').click(function(e) { 
       e.preventDefault(); 
       $('#InvoiceGrid tbody tr').each(function(index) { 
        var hidden = $('<input />').attr({ type: 'hidden', name: 'InvoiceLines.Index', value: index }); 
        $(this).children('td:first-child').before(hidden); 
        $(this).children('td:not(:first-child)').each(function() { 
         $(this).append($('<input />').attr({ type: 'hidden', value: $(this).text(), name: 'InvoiceLines[' + index + ']' + $(this).attr('name') })); 
        }); 
       }); 
       $('form').submit(); 
      }); 

      //editable stuff    
      $('.click').editable(function(value, settings) { 
       return (value); 
      }, { submit: 'OK' }); 
     }); 

हर टीडी मैं छिपे हुए इनपुट बनाने में, मूल्य के साथ, सूचकांक के साथ प्रत्येक पंक्ति इनपुट में, और यहाँ सबसे महत्वपूर्ण 'नाम' विशेषता होती है: मॉडल में संग्रह की नाम .rest.of.path, इसलिए इस विशेष मामले में (उदाहरण) [यहाँ सूचकांक चला जाता है]:

InvoiceLines[2].LineItem.ItemDescription 

, आशा है कि यह मदद करेंगे क्योंकि अमीर ग्रिड हमेशा एक जवाब नहीं है ;)

आर उदाहरण मैट्यूज़