ASP.NET MVC Modulo di inserimento dettagli master

Question

Sto tentando di implementare un modulo di immissione degli ordini utilizzando ASP.NET MVC ma affrontando molte difficoltà. Tutti gli esempi che ho trovato sono relativi alla visualizzazione dei moduli dei dettagli principali e nessuno per l'aggiunta o la modifica.

Supponiamo di avere due tabelle: ordine e ordine Le linee correlate tra loro con relazione uno-a-molti. Nella vista principale avevo un pulsante "Nuovo" quando cliccato mostrava una nuova vista dell'ordine composta dai campi ordine, una griglia che mostra le righe dell'ordine e un pulsante "Salva" che quando si fa clic riporterà l'intero ordine insieme a le sue linee in un database. La griglia dovrebbe avere tre pulsanti: "Aggiungi riga", "Modifica riga" e "Elimina riga". Quando si fa clic su "Aggiungi riga", dovrebbe essere visualizzata una nuova vista che consente all'utente di aggiungere la linea alle linee della griglia della vista dell'ordine - in questa fase il database non è interessato-. Quando l'utente fa clic su "Modifica linea", verrà visualizzata una vista che consente all'utente di modificare la linea selezionata e al termine dell'aggiornamento delle linee della griglia dell'ordine.

I problemi più difficili sono:

Come passare l'ordine e la sua collezione linee tra la vista dell'ordine e il punto di vista della linea ordine?

Come aggiornare la visualizzazione dell'ordine in base alle modifiche nella visualizzazione della riga dell'ordine?

E come mantenere i cambiamenti tra le viste senza che il database sia coinvolto?

C'è un esempio concreto che mostra come implementare questo utilizzando MVC?

vostro aiuto e feedback è apprezzato.

Answer 1

Si potrebbe provare Telericks libero controllo griglia MVC ...

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

Answer 2

differenza WebForms, ASP.NET MVC non cerca di nascondere la natura stateless di HTTP. Per lavorare con un oggetto complesso su più forme di avere un paio di opzioni:

• Salva l'oggetto sul server con ogni modifica in modo che l'oggetto aggiornato è disponibile utilizzando solo un id
• utilizzare jQuery per compilare la modulo di ordine riga e salva i dettagli nel modulo principale

Io di solito vado con l'opzione lato client me stesso, con il modulo principale con campi nascosti per i dati che verranno modificati nella sottomaschera. È possibile che l'opzione lato server sia più semplice, tuttavia, se non si desidera coinvolgere il database, è possibile mantenere l'oggetto parzialmente aggiornato nella sessione.

Answer 3

Appena fuori dalla parte superiore della mia testa (una sorta di deposito del cervello) ...

• si potrebbe avere una parte griglia principale del modulo. Questo sarebbe a pieno schermo caricato da un'azione (o con un numero d'ordine o meno a seconda del caricamento di uno esistente o meno).

• Quando si fa clic su un evento (nuovo o modificato), questo può aprire una vista parziale in stile "lightbox". Ciò restituirebbe quindi un oggetto JSON alla forma principale.

• L'oggetto json passato viene quindi sottoposto a rendering utilizzando il modello nella parte inferiore della tabella (per uno nuovo) o aggiornando un record esistente. Questo potrebbe anche essere salvato sul server nella stessa chiamata Ajax. Oppure aggiorna solo il lato client e chiedi all'utente di fare clic su un pulsante di salvataggio.

• Un flag isDirty sarà necessario in modo che tutte le modifiche vengano impostate su true e quando il browser tenta di uscire o chiudere, quindi è possibile richiedere all'utente di salvare o meno.

Spero che questo aiuti.

modificare

non provato questo, ma potrebbe essere interessante con l'aspetto db nessuno della tua domanda click

Answer 4

Motivi hanno un'occhiata al mio blog post sulla creazione maestro modulo dettagli in asp.net MVC. contiene anche progetto demo che potete scaricare

Answer 5

Passaggio 1: Creare vista del modello

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

Fase 2: Aggiungi javascript per aggiungere linee d'ordine

<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> 

Passo 3: Creare un'azione per salvare i dati

[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} }; 
    } 

si può download source code e video tutorial