Tự động lưu trong MVC (ASP.NET)

Question

Tôi đang triển khai hệ thống web để quản lý một số dữ liệu từ công ty của mình. Chúng tôi đang sử dụng MVC (cụ thể hơn ASP.NET MVC 4), trong đó tôi hoàn toàn mới.

Sự cố tôi gặp phải là chúng tôi dự định sử dụng tính năng tự động lưu, giống như Gmail. Chúng tôi đã lên kế hoạch sử dụng các sự kiện thay đổi xếp hàng và thỉnh thoảng gửi các thay đổi thông qua ajax. Trên ý nghĩ đầu tiên tôi sẽ sử dụng JavaScript, không chắc chắn nếu đó là cách tốt nhất cho MVC. Một vấn đề khác mà tôi gặp phải là một số thông tin mà người dùng sẽ nhập không phải là bên trong biểu mẫu, mà thay vào đó là trong bảng. Ngoài ra bố cục của trang hơi thưa thớt và tôi không tin rằng tôi có thể bọc tất cả các yếu tố đầu vào vào một biểu mẫu đơn lẻ hoặc thậm chí nếu tôi nên thực hiện.

Câu hỏi của tôi là:

1. cách tốt nhất để thực hiện tự động lưu sử dụng MVC là gì, tôi nên sử dụng hay không Javascript?
2. Có thư viện nào trong JavaScript hoặc một tính năng trong ASP.NET MVC để thực hiện xếp hàng hoặc tôi nên làm điều đó bằng tay không?
3. Ngoài ra, tôi có thể sử dụng biểu mẫu để bao gồm các hàng trong bảng không?

Lưu ý: Tôi đã thấy một số gợi ý để sử dụng localstorage hoặc các ứng dụng khách khác, nhưng những gì tôi cần là độ ổn định của máy chủ và chúng tôi thậm chí không có nút lưu trên trang.

Thanks for the help trước;)

Answer 1

Bạn có thể thêm form="myformid" thuộc tính vào các yếu tố bên ngoài biểu mẫu để đưa vào biểu mẫu. Tôi sẽ thêm thuộc tính data-dirty="false" cho tất cả các phần tử ở đầu và đính kèm sự kiện thay đổi sẽ thay đổi thuộc tính data-dirty của việc thay đổi phần tử thành true. Sau đó, bạn có thể lưu biểu mẫu mỗi 30 giây chẳng hạn (lấy các phần tử có thay đổi dữ liệu = true và chuyển đến máy chủ). Sau khi lưu, mọi dữ liệu của phần tử bẩn sẽ trở thành false một lần nữa. Ví dụ về tự động lưu với jQuery:

window.setInterval(function(){ 
    var dirtyElements = $('#myformid').find('[data-dirty=true]').add('[form=myformid][data-dirty=true]'); 
    if(dirtyElements.length > 0){ 
     var data = dirtyElements.serialize(); 
     $.post('saveurl', data, function(){ 
      dirtyElements.attr('data-dirty', false); 
      alert('data saved successfully'); 
     }); 
    } 
}, 30000); // 30 seconds 

Gắn sự kiện cho tất cả các yếu tố của hình thức:

$(function(){ 
    var formElements = $('#myformid') 
          .find('input, select, textarea') 
          .add('[form=myformid]') 
          .not(':disabled') 
          .each(function(){ 
           $(this).attr('data-dirty', false).change(function(){ 
            $(this).attr('data-dirty', true); 
           }); 
          }); 
}); 

Answer 2

1. Đó là thực sự lựa chọn duy nhất của bạn. Nếu bạn gửi biểu mẫu mà không có Ajax thì bạn sẽ trải nghiệm tải lại toàn bộ trang. Nó không có vẻ như đó là những gì bạn muốn.

2. Có rất nhiều cách để thực hiện điều này (cũng xem câu trả lời của karaxuna vừa đăng). Bạn có thể đính kèm một sự kiện vào tất cả các yếu tố đầu vào của bạn và bất kỳ lúc nào trong số họ thay đổi sử dụng bộ hẹn giờ để lưu dữ liệu. Nếu một sự kiện thay đổi khác xảy ra thì hãy đặt lại bộ hẹn giờ để bạn không phải tiết kiệm cho mỗi sự kiện thay đổi.

   Hoặc nếu bạn không cần nó phức tạp, chỉ cần sử dụng bộ hẹn giờ đơn giản để lưu mỗi X phút bất kể có nhập dữ liệu mới hay không.

3. Bạn có thể đặt bảng trong một số form; không có gì sai với điều đó. Tôi chỉ đề nghị sử dụng các đầu vào thích hợp để dễ dàng tuần tự hóa dữ liệu và gửi nó đến máy chủ.

Answer 3

Bạn có thể sử dụng hub SignalR để giao tiếp tự động giữa trang của bạn và máy chủ.Xem https://github.com/SignalR/SignalR/wiki và http://signalr.net/ để biết chi tiết về công nghệ này.

Bằng cách đó, bạn có thể gửi các sự kiện thay đổi trực tiếp đến máy chủ. Bạn có thể điều tiết chúng bằng cách sử dụng một mô hình người tiêu dùng sản xuất trong JavaScript, nhưng hiệu suất của SignalR là đủ tốt để bạn có thể thoát khỏi mà không phải làm điều này.

Bạn có thể nhúng một bảng bên trong một biểu mẫu, nhưng một lần nữa, SignalR sử dụng một phương tiện khác nhau của giao tiếp từ máy khách đến máy chủ.

Chúc bạn may mắn.

Answer 4

1) Sử dụng Javascript! jQuery làm cho nó khá dễ dàng để thực hiện tự động của bạn tiết kiệm không đồng bộ trong nền bằng cách sử dụng các cuộc gọi AJAX.

2) Không có điều gì tôi biết, nhưng không quá khó.

3) Không, không may bạn có thể không, nhưng bạn có thể làm một cái gì đó như thế này:

<table id="mainTable"> 
<tr> 
    <td> 
    <form id="someForm"> 
     <table class="aSubTable"> 
     <tr> 
      <td><!-- fields go here --></td> 
      <td><!-- fields go here --></td> 
     </tr> 
     </table> 
    </form> 
    </td> 
<tr> 
</table> 

(i biết rằng mã ví dụ này không tận dụng Razor, nhưng nó không phải là khó khăn để tìm ra những phần nào để thay thế với Razor cho phương tiện của riêng bạn)

Answer 5

Đáp ...

1. Chắc chắn sử dụng javascript và AJAX, bạn không muốn trang để giữ làm mới khi người dùng thực hiện một sự thay đổi
2. Tôi không biết về bất kỳ thư viện nào, nhưng tôi rất sẵn lòng làm điều này bằng tay. Phát hiện các thay đổi bằng cách sử dụng javascript và sau đó đăng dữ liệu qua AJAX
3. Bạn có thể truy cập bất kỳ trường biểu mẫu nào từ trình điều khiển của mình với thông số FormCollection hoặc phương thức cổ điển Form["fieldname"]. Miễn là các ô trong bảng của bạn có các giá trị name duy nhất, bạn sẽ có thể tìm nạp dữ liệu

Answer 6

Câu trả lời một phần cho câu hỏi 1 của bạn: Đúng vậy, mvc 4 sẽ hoạt động tốt với javascript (jquery) và ajax

Câu trả lời ở trên cho bạn thấy một số cách bạn sẽ viết javascript/ajax trong quan điểm dao cạo của mình, sau đó bạn sẽ liên lạc với bộ điều khiển (sẽ lấy dữ liệu từ "mô hình") của toàn bộ trải nghiệm khung mvc .net được gắn với các cài đặt khác nhau, web.config bạn có thể kiểm tra khi giá trị thay đổi của bạn thành false

Exampl e

trong web.config của bạn, bạn sẽ thấy

<appSettings> 
    <add key="webpages:Version" value="2.0.0.0" /> 
    <add key="webpages:Enabled" value="false" /> 
    <add key="PreserveLoginUrl" value="true" /> 
    <add key="ClientValidationEnabled" value="true" /> 
    <add key="UnobtrusiveJavaScriptEnabled" value="true" /> 
</appSettings> 

MVC 3 thậm chí đã có này làm việc rất tốt:

<appSettings> 
    <add key="webpages:Version" value="1.0.0.0" /> 
    <add key="ClientValidationEnabled" value="true" /> 
    <add key="UnobtrusiveJavaScriptEnabled" value="true" /> 
</appSettings> 

Answer 7

we can Auto save form using Ajax 
function AutoSaveMyForm(spanid) { 
    var dataToPost = $("form").serialize() 
    $.ajax({ 
     type: "POST", 
     url: "/MyController/AutoSaveActionMethod", 
     data: dataToPost, 
     cache: false, 
     success: function(resultdata) { 
      if (resultdata['Code'] == '1') { // show success saved 
       console.log(resultdata['ResultMsg']); 
       if (spanid == "SaveLastStep") { 
        window.location = "/Dashboard/Index"; 
       } 
       $('#' + spanid).html('Save Successfully.'); 
      } else if (resultdata['Code'] == '0') { // show error 
       console.log(resultdata['ResultMsg']); 
       $('#' + spanid).html('Not Saved'); 
      } else { // an error has occured 
       $('#' + spanid).html('Error Generated.'); 
      } 
     } 
    }); 
} 

window.setInterval(function() { 
    AutoSaveMyForm('SpanIdToShowResult') 
}, 60000); // 1 min 

By using set interval method we can call javascript method which call ajax to save form and pass any span id to get result back