ASP.NET MVC Formulario de entrada de detalles del maestro

Question

Estoy tratando de implementar un formulario de entrada de órdenes utilizando ASP.NET MVC pero con muchas dificultades. Todas las muestras que encontré están relacionadas con la visualización de formularios de detalles maestros, y ninguna para agregar o editar.

Supongamos que tengo dos tablas: orden y líneas de pedido que están relacionadas entre sí con una relación uno a muchos. En la vista principal tenía un botón "Nuevo" al hacer clic, debería mostrar una nueva vista de orden compuesta por los campos de orden, una cuadrícula que muestra las líneas de orden y un botón "Guardar" que al hacer clic persistirá todo el orden junto con sus líneas en una base de datos. La cuadrícula debe tener tres botones: "Agregar línea", "Editar línea" y "Eliminar línea". Cuando se hace clic en "Agregar línea", debe mostrarse una nueva vista que permite al usuario agregar la línea a las líneas de la cuadrícula de vista de orden; en esta etapa, la base de datos no se ve afectada. Cuando el usuario hace clic en "Editar línea", se mostrará una vista que le permite al usuario editar la línea seleccionada y, cuando termine, actualice las líneas de cuadrícula de la orden.

Los problemas más difíciles son:

cómo pasar la orden y su colección de líneas entre la vista del orden y los puntos de vista de línea de pedido?

¿Cómo actualizar la vista de orden en función de los cambios en la vista de línea de orden?

¿Y cómo persistir los cambios entre vistas sin la base de datos involucrada?

¿Hay algún ejemplo concreto que muestre cómo implementar esto usando MVC?

su ayuda y comentarios se agradece.

Answer 1

Usted podría intentar Telericks libre de control de la red MVC ...

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

Answer 2

A diferencia de Web Forms, ASP.NET MVC no trata de ocultar la naturaleza sin estado de HTTP. Para trabajar con un objeto complejo a través de múltiples formas que tiene un par de opciones:

• Guardar el objeto en el servidor con cada cambio de modo que el objeto actualizada está disponible sólo con un id
• usar jQuery para poblar el forma de línea de orden y guardar los detalles de la forma principal

suelo ir con la opción del lado del cliente mismo, con la forma principal que tiene campos ocultos para los datos que se editará en el subformulario. Sin embargo, puede encontrar la opción del lado del servidor más fácil: si realmente no desea involucrar a la base de datos, puede mantener su objeto parcialmente actualizado en la sesión.

Answer 3

Justo al lado de la parte superior de la cabeza (una especie de descarga del cerebro) ...

• usted podría tener una parte principal de la forma de cuadrícula. Esta sería una vista completa cargada desde una acción (ya sea con un número de orden o no dependiendo de cargar uno existente o no).

• Al hacer clic en un evento (nuevo o editar) esto podría abrir una vista parcial en un estilo "lightbox". Esto devolvería un objeto json a la forma principal.

• El objeto json pasado se representará utilizando plantillas en la parte inferior de la tabla (para una nueva) o actualizará un registro existente. Esto también podría guardarse nuevamente en el servidor en la misma llamada ajax. O simplemente actualice el lado del cliente y necesita que el usuario haga clic en un botón para guardar.

• Se necesita un distintivo isDirty para que cualquier cambio lo establezca en verdadero y cuando el navegador intente salir o cerrarse, etc. luego puede solicitar al usuario que lo guarde o no.

Espero que esto ayude.

edición

No probado esto, pero podría ser interesante con el aspecto db ninguno de su pregunta click

Answer 4

súplicas tienen un vistazo a mi blog post en la creación de formulario detallado maestría en asp.net mvc. sino que también contiene proyecto de demostración que puede descargar

Answer 5

Paso 1: Crear vista del modelo

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

Paso 2: Añadir Javascript para líneas de pedido Agregar

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

Paso 3: Crear una acción para guardar datos

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

se puede download source code y video tutorial