एएसपी.नेट एमवीसी मास्टर विवरण एंट्री फॉर्म

Question

मैं एएसपी.नेट एमवीसी का उपयोग कर ऑर्डर एंट्री फॉर्म को कार्यान्वित करने की कोशिश कर रहा हूं लेकिन कई कठिनाइयों का सामना कर रहा हूं। मेरे द्वारा प्राप्त सभी नमूनों को मास्टर विवरण फ़ॉर्म देखने, और जोड़ने या संपादित करने के लिए कोई भी नहीं है।

मान लीजिए कि मेरे पास दो टेबल हैं: ऑर्डर और ऑर्डरलाइन जो एक-दूसरे से जुड़े संबंधों से एक-दूसरे से संबंधित हैं। मुख्य दृश्य में जब मैंने क्लिक किया था तो मेरे पास "नया" बटन था, इसे ऑर्डर फ़ील्ड से बना एक नया ऑर्डर व्यू दिखाना चाहिए, एक ग्रिड जो ऑर्डर लाइन दिखाता है, और एक "सेव" बटन जो क्लिक होने पर पूरे ऑर्डर को जारी रखेगा डेटाबेस में इसकी लाइनें। ग्रिड में तीन बटन होना चाहिए: "लाइन जोड़ें", "रेखा संपादित करें", और "रेखा हटाएं"। जब "लाइन जोड़ें" पर क्लिक किया जाता है तो एक नया दृश्य दिखाया जाना चाहिए जो उपयोगकर्ता को ऑर्डर व्यू ग्रिड लाइनों में लाइन जोड़ने की अनुमति देता है - इस चरण में डेटाबेस प्रभावित नहीं होता है। जब उपयोगकर्ता "एडिट लाइन" पर क्लिक करता है तो एक दृश्य दिखाया जाएगा जो उपयोगकर्ता को चयनित लाइन को संपादित करने की अनुमति देता है और जब ऑर्डर ग्रिड लाइन अपडेट करता है।

सबसे कठिन समस्याएं हैं:

कैसे आदेश देख सकते हैं और आदेश पंक्ति विचारों के बीच आदेश और उसके लाइनों संग्रह पारित करने के लिए?

ऑर्डर लाइन दृश्य में परिवर्तनों के आधार पर ऑर्डर व्यू को कैसे अपडेट करें?

और डेटाबेस के बिना दृश्यों के बीच परिवर्तनों को कैसे बनाए रखना है?

क्या कोई ठोस उदाहरण है जो दिखाता है कि एमवीसी का उपयोग करके इसे कैसे कार्यान्वित किया जाए?

आपकी मदद और प्रतिक्रिया की सराहना की है।

Answer 1

आप Telericks मुक्त MVC ग्रिड नियंत्रण की कोशिश कर सकते ...

http://demos.telerik.com/aspnet-mvc/grid/hierarchyserverside

Answer 2

WebForms के विपरीत, ASP.NET MVC HTTP का राज्यविहीन प्रकृति छिपाने की कोशिश नहीं करता। कई रूपों में एक जटिल वस्तु के साथ काम करने के लिए आप विकल्पों में से एक जोड़ी है:

• बचाना प्रत्येक परिवर्तन के साथ सर्वर पर वस्तु ताकि अद्यतन वस्तु को भरने के लिए केवल एक आईडी
• उपयोग jQuery का उपयोग कर उपलब्ध है ऑर्डर लाइन फॉर्म और मुख्य फॉर्म

मैं आम तौर पर क्लाइंट साइड विकल्प के साथ जाता हूं, जिसमें मुख्य रूप से डेटा के छिपे हुए फ़ील्ड होते हैं जो सबफॉर्म में संपादित किए जाएंगे। आप सर्वर साइड विकल्प को आसान बना सकते हैं हालांकि - यदि आप वास्तव में डेटाबेस को शामिल नहीं करना चाहते हैं तो आप सत्र में अपनी आंशिक रूप से अपडेट की गई वस्तु को रख सकते हैं।

Answer 3

बस मेरे सिर (मस्तिष्क डंप का एक प्रकार) के ऊपर से ...

• आप प्रपत्र का एक मुख्य ग्रिड हिस्सा हो सकता था। यह एक क्रिया से भरा पूर्ण दृश्य होगा (या तो ऑर्डर नंबर के साथ या मौजूदा लोड को लोड करने के आधार पर नहीं)।

• किसी ईवेंट (नया या संपादित करें) पर क्लिक करते समय यह "लाइटबॉक्स" शैली में आंशिक दृश्य खोल सकता है। यह फिर एक जेसन ऑब्जेक्ट को मुख्य रूप में वापस भेज देगा।

• पारित कर दिया json वस्तु तो (एक नया एक के लिए) तालिका के निचले भाग को templating का उपयोग कर या एक मौजूदा रिकॉर्ड को अपडेट प्रदान की जाएगी। यह उसी AJAX कॉल में सर्वर पर वापस सहेजा जा सकता है। या बस क्लाइंट पक्ष को अपडेट करें और उपयोगकर्ता को एक सेव बटन पर क्लिक करने की आवश्यकता है।

• एक गंदे ध्वज की आवश्यकता होगी ताकि किसी भी बदलाव को सही साबित किया जा सके और जब ब्राउज़र छोड़ने या बंद करने का प्रयास करता है तो आप उपयोगकर्ता को सहेजने या नहीं करने के लिए संकेत दे सकते हैं।

उम्मीद है कि इससे मदद मिलती है।

संपादित

इस कोशिश की नहीं लेकिन click

Answer 4

दलीलों asp.net MVC के मास्टर विस्तार प्रपत्र बनाने पर मेरी blog post पर एक नजर है अपने प्रश्न में से कोई भी db पहलू के साथ दिलचस्प हो सकता है। यह भी डेमो परियोजना है कि आप डाउनलोड कर सकते हैं

Answer 5

चरण 1 में शामिल हैं: बनाएँ दृश्य मॉडल

public class OrderVM 
{ 
    public string OrderNo { get; set; } 
    public DateTime OrderDate { get; set; } 
    public string Description { get; set; } 
    public List<OrderDetail> OrderDetails {get;set;} 
} 

चरण 2: ऐड क्रम लाइनों

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 

$(function() { 
     $('#orderDate').datepicker({ 
      dateFormat : 'mm-dd-yy' 
     }); 
    }); 

    $(document).ready(function() { 
     var orderItems = []; 
     //Add button click function 
     $('#add').click(function() { 
      //Check validation of order item 
      var isValidItem = true; 
      if ($('#itemName').val().trim() == '') { 
       isValidItem = false; 
       $('#itemName').siblings('span.error').css('visibility', 'visible'); 
      } 
      else { 
       $('#itemName').siblings('span.error').css('visibility', 'hidden'); 
      } 

      if (!($('#quantity').val().trim() != '' && !isNaN($('#quantity').val().trim()))) { 
       isValidItem = false; 
       $('#quantity').siblings('span.error').css('visibility', 'visible'); 
      } 
      else { 
       $('#quantity').siblings('span.error').css('visibility', 'hidden'); 
      } 

      if (!($('#rate').val().trim() != '' && !isNaN($('#rate').val().trim()))) { 
       isValidItem = false; 
       $('#rate').siblings('span.error').css('visibility', 'visible'); 
      } 
      else { 
       $('#rate').siblings('span.error').css('visibility', 'hidden'); 
      } 

      //Add item to list if valid 
      if (isValidItem) { 
       orderItems.push({ 
        ItemName: $('#itemName').val().trim(), 
        Quantity: parseInt($('#quantity').val().trim()), 
        Rate: parseFloat($('#rate').val().trim()), 
        TotalAmount: parseInt($('#quantity').val().trim()) * parseFloat($('#rate').val().trim()) 
       }); 

       //Clear fields 
       $('#itemName').val('').focus(); 
       $('#quantity,#rate').val(''); 

      } 
      //populate order items 
      GeneratedItemsTable(); 

     }); 
     //Save button click function 
     $('#submit').click(function() { 
      //validation of order 
      var isAllValid = true; 
      if (orderItems.length == 0) { 
       $('#orderItems').html('<span style="color:red;">Please add order items</span>'); 
       isAllValid = false; 
      } 

      if ($('#orderNo').val().trim() == '') { 
       $('#orderNo').siblings('span.error').css('visibility', 'visible'); 
       isAllValid = false; 
      } 
      else { 
       $('#orderNo').siblings('span.error').css('visibility', 'hidden'); 
      } 

      if ($('#orderDate').val().trim() == '') { 
       $('#orderDate').siblings('span.error').css('visibility', 'visible'); 
       isAllValid = false; 
      } 
      else { 
       $('#orderDate').siblings('span.error').css('visibility', 'hidden'); 
      } 

      //Save if valid 
      if (isAllValid) { 
       var data = { 
        OrderNo: $('#orderNo').val().trim(), 
        OrderDate: $('#orderDate').val().trim(), 
        //Sorry forgot to add Description Field 
        Description : $('#description').val().trim(), 
        OrderDetails : orderItems 
       } 

       $(this).val('Please wait...'); 

       $.ajax({ 
        url: '/Home/SaveOrder', 
        type: "POST", 
        data: JSON.stringify(data), 
        dataType: "JSON", 
        contentType: "application/json", 
        success: function (d) { 
         //check is successfully save to database 
         if (d.status == true) { 
          //will send status from server side 
          alert('Successfully done.'); 
          //clear form 
          orderItems = []; 
          $('#orderNo').val(''); 
          $('#orderDate').val(''); 
          $('#orderItems').empty(); 
         } 
         else { 
          alert('Failed'); 
         } 
         $('#submit').val('Save'); 
        }, 
        error: function() { 
         alert('Error. Please try again.'); 
         $('#submit').val('Save'); 
        } 
       }); 
      } 

     }); 
     //function for show added items in table 
     function GeneratedItemsTable() { 
      if (orderItems.length > 0) { 
       var $table = $('<table/>'); 
       $table.append('<thead><tr><th>Item</th><th>Quantity</th><th>Rate</th><th>Total</th></tr></thead>'); 
       var $tbody = $('<tbody/>'); 
       $.each(orderItems, function (i, val) { 
        var $row = $('<tr/>'); 
        $row.append($('<td/>').html(val.ItemName)); 
        $row.append($('<td/>').html(val.Quantity)); 
        $row.append($('<td/>').html(val.Rate)); 
        $row.append($('<td/>').html(val.TotalAmount)); 
        $tbody.append($row); 
       }); 
       $table.append($tbody); 
       $('#orderItems').html($table); 
      } 
     } 
    }); 

</script> 

चरण के लिए जावास्क्रिप्ट जोड़े 3: डेटा को बचाने के लिए एक क्रिया बनाएँ

[HttpPost] 
    public JsonResult SaveOrder(OrderVM O) 
    { 
     bool status = false; 
     if (ModelState.IsValid) 
     { 
      using (MyDatabaseEntities dc = new MyDatabaseEntities()) 
      { 
       Order order = new Order { OrderNo = O.OrderNo, OrderDate = O.OrderDate, Description = O.Description }; 
       foreach (var i in O.OrderDetails) 
       { 
        // 
        // i.TotalAmount = 
        order.OrderDetails.Add(i); 
       } 
       dc.Orders.Add(order); 
       dc.SaveChanges(); 
       status = true; 
      } 
     } 
     else 
     { 
      status = false; 
     } 
     return new JsonResult { Data = new { status = status} }; 
    } 

आप download source code और video tutorial