Mẫu MVC Master Chi tiết Nhập

Question

Tôi đang cố gắng thực hiện một mẫu đơn đặt hàng bằng cách sử dụng ASP.NET MVC nhưng phải đối mặt với rất nhiều khó khăn. Tất cả các mẫu mà tôi tìm thấy có liên quan đến việc xem biểu mẫu chi tiết chính và không có mẫu nào để thêm hoặc chỉnh sửa.

Giả sử tôi có hai bảng: Thứ tự và Dòng đơn hàng có liên quan đến nhau với mối quan hệ một-nhiều. Trong giao diện chính, tôi có nút “Mới” khi nhấp vào nó sẽ hiển thị chế độ xem đơn đặt hàng mới bao gồm các trường đơn đặt hàng, lưới hiển thị các dòng đơn đặt hàng và nút “Lưu” khi được nhấp sẽ duy trì toàn bộ đơn đặt hàng cùng với các dòng của nó vào cơ sở dữ liệu. Lưới phải có ba nút: “Thêm đường”, “Chỉnh sửa đường” và “Xóa đường”. Khi “Add Line” được nhấn, một khung nhìn mới sẽ được hiển thị cho phép người dùng thêm dòng vào các đường lưới khung nhìn thứ tự - ở giai đoạn này cơ sở dữ liệu không bị ảnh hưởng. Khi người dùng nhấp vào "Chỉnh sửa dòng", chế độ xem sẽ được hiển thị cho phép người dùng chỉnh sửa dòng đã chọn và khi cập nhật xong các dòng lưới đặt hàng.

Vấn đề khó khăn nhất là:

Làm cách nào để chuyển thứ tự và tập hợp các dòng của nó giữa chế độ xem đơn hàng và chế độ xem thứ tự?

Làm cách nào để cập nhật chế độ xem đơn hàng dựa trên các thay đổi trong chế độ xem thứ tự dòng?

Và cách duy trì các thay đổi giữa các chế độ xem mà không có cơ sở dữ liệu liên quan?

Có ví dụ cụ thể nào cho thấy cách triển khai tính năng này bằng MVC không?

Trợ giúp và phản hồi của bạn được đánh giá cao.

Answer 1

Bạn có thể thử Telericks kiểm soát lưới MVC miễn phí ...

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

Answer 2

Không giống như WebForms, ASP.NET MVC không cố gắng để che giấu bản chất phi trạng thái của HTTP. Để làm việc với một đối tượng phức tạp trên nhiều hình thức bạn có một vài lựa chọn:

• Lưu đối tượng trên máy chủ với mỗi thay đổi để các đối tượng được cập nhật có sẵn chỉ sử dụng một id
• Sử dụng jquery để cư mẫu đơn đặt hàng và lưu chi tiết vào biểu mẫu chính

Tôi thường tự chọn tùy chọn phía máy khách, với biểu mẫu chính có trường ẩn cho dữ liệu sẽ được chỉnh sửa trong biểu mẫu con. Bạn có thể thấy tùy chọn phía máy chủ dễ dàng hơn - nếu bạn thực sự không muốn liên quan đến cơ sở dữ liệu, bạn có thể giữ đối tượng được cập nhật một phần trong phiên.

Answer 3

Chỉ cần ra khỏi đỉnh đầu của tôi (một loại bãi não) ...

• Bạn có thể có một phần lưới chính của biểu mẫu. Đây sẽ là chế độ xem đầy đủ được tải từ một hành động (với số thứ tự hoặc không phụ thuộc vào việc tải một hiện có hay không).

• Khi nhấp vào một sự kiện (mới hoặc chỉnh sửa), điều này có thể mở một phần chế độ xem theo kiểu "hộp đèn". Điều này sau đó sẽ quay trở lại một đối tượng json trở lại hình thức chính.

• Đối tượng json được truyền sau đó sẽ được hiển thị bằng cách sử dụng templating đến cuối bảng (đối với một đối tượng mới) hoặc cập nhật bản ghi hiện có. Điều này cũng có thể được lưu lại cho máy chủ trong cùng một cuộc gọi ajax. Hoặc chỉ cần cập nhật phía máy khách và cần người dùng nhấp vào nút lưu.

• Cần có cờ 30 đô la để mọi thay đổi đặt thành đúng và khi trình duyệt cố gắng thoát hoặc đóng, v.v. thì bạn có thể nhắc người dùng lưu hoặc không.

Hy vọng điều này sẽ hữu ích.

chỉnh sửa

Không thử này, nhưng có thể là thú vị với các khía cạnh db không ai trong số câu hỏi của bạn click

Answer 4

Pleas có một cái nhìn tại blog post của tôi vào việc tạo ra hình thức chi tiết tổng thể trong asp.net MVC. nó cũng chứa dự án demo mà bạn có thể tải

Answer 5

Bước 1: Tạo điểm mô hình

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

Bước 2: Thêm javascript cho các dây chuyền tự add

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

Bước 3: Tạo hành động để lưu dữ liệu

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

bạn có thể download source code và video tutorial