Automatyczne zapisywanie w MVC (ASP.NET)

Question

Wdrażam system internetowy do zarządzania niektórymi danymi z mojej firmy. Używamy MVC (bardziej specyficznie ASP.NET MVC 4), w którym jestem całkowicie nowy.

Problem polega na tym, że planowaliśmy użyć autozapisu, tak jak GMail. Planowaliśmy używać kolejkowania zdarzeń zmian i raz na jakiś czas przesyłamy zmiany przez ajax. Na pierwszej myśli użyłbym JavaScript, nie jestem pewien, czy to najlepszy sposób na MVC. Innym problemem, jaki mam, jest to, że niektóre informacje, które użytkownik wprowadzi, nie są w formularzach, ale w tabeli. Również układ strony jest trochę rzadki i nie wierzę, że mogę zawrzeć wszystkie dane wejściowe w jednej formie lub nawet, jeśli powinienem to zrobić.

Moje pytania są następujące:

1. Co jest najlepszym sposobem wdrożenia autozapis przy użyciu MVC, należy używać albo nie JavaScript?
2. Czy istnieje jakaś biblioteka w JavaScript lub funkcja w ASP.NET MVC do wdrażania kolejkowania lub czy powinienem to zrobić ręcznie?
3. Czy można również użyć formularza do zawijania wierszy tabeli?

Uwaga: Widziałem kilka sugestii dotyczących korzystania z localstorage lub innych trwałych klientów, ale potrzebuję trwałości serwera i nie mamy nawet przycisku zapisu na stronie.

Dzięki za pomoc z góry;)

Answer 1

Możesz dodać atrybut form="myformid" do elementów znajdujących się poza formularzem w celu uwzględnienia go w formularzu. Dodałabym atrybut data-dirty="false" do wszystkich elementów na początku i dołączam do niego zmianę, która zmieniałaby atrybut dirty-data zmiany elementu na true. Następnie możesz zapisać formularz, na przykład co 30 sekund (uzyskaj elementy, które mają zmianę danych = true i przekazuj do serwera). Po zapisaniu, brudne dane każdego elementu stają się znowu fałszywe. Przykład autosave z 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 

Zakładanie zdarzenia do wszystkich elementów formularza:

$(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. to naprawdę jedyną opcją. Jeśli prześlesz formularz bez Ajax, przeładujesz całe strony. To nie brzmi tak, jak tego chcesz.

2. Istnieje wiele sposobów na wdrożenie tego (patrz także odpowiedź właśnie opublikowana przez karaxuna). Możesz dołączyć wydarzenie do wszystkich swoich wejść i za każdym razem, gdy którykolwiek z nich się zmieni, użyj timera do zapisania danych. Jeśli pojawi się inne zdarzenie zmiany, zresetuj licznik czasu, aby nie kończyło się zapisywaniem dla każdego zdarzenia zmiany.

   Jeśli nie jest to konieczne, wystarczy użyć prostego timera, aby zapisać co X minut, niezależnie od tego, czy wprowadzono nowe dane.

3. Możesz umieścić tabelę w obrębie form; nie ma w tym nic złego. Sugerowałbym tylko użycie odpowiednich danych wejściowych, aby ułatwić serializację danych i wysłać je na serwer.

Answer 3

Można użyć koncentratora SignalR komunikować się dynamicznie pomiędzy strony i serwera.Szczegółowe informacje na temat tej technologii można znaleźć w pozycjach https://github.com/SignalR/SignalR/wiki i http://signalr.net/.

W ten sposób można wysyłać zdarzenia zmian bezpośrednio na serwer. Można je dławić za pomocą modelu producenta-konsumenta w JavaScript, ale wydajność SignalR jest wystarczająco dobra, aby można było odejść bez konieczności wykonywania tego.

Możesz osadzić tabelę wewnątrz formularza, ale znowu SignalR używa różnych sposobów komunikacji klient-serwer.

Powodzenia.

Answer 4

1) Użyj Javascriptu! jQuery ułatwia wykonywanie automatycznych zapisów asynchronicznie w tle za pomocą wywołań AJAX.

2) Brak, o którym jestem świadomy, ale nie powinno to być zbyt trudne.

3) Nie, niestety nie można, ale można zrobić coś takiego:

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

(Zdaję sobie sprawę, że kod ten przykład nie wykorzystać Razor, ale to nie powinno być trudne dowiedzieć się, które części zastąpić brzytwa dla własnych środków)

Answer 5

odpowiedzi ...

1. Zdecydowanie użyć JavaScript i AJAX, nie chcesz strona zachować orzeźwiający, gdy użytkownik dokona zmian
2. Nie znam żadnych bibliotek, ale byłbym szczęśliwy, robiąc to ręcznie. Wykryj zmiany za pomocą javascript, a następnie opublikuj dane za pośrednictwem AJAX
3. Możesz uzyskać dostęp do dowolnego pola formularza ze sterownika za pomocą parametru FormCollection lub klasycznej metody Form["fieldname"]. Tak długo, jak komórki tabeli mieć unikalne wartości name będzie można pobrać dane

Answer 6

Częściowa odpowiedź na swoje pytanie 1 tylko: Tak, od razu po wyjęciu z pudełka, MVC 4 będzie pracował wielki z javascript (jquery) i ajax

Powyższe odpowiedzi pokazują niektóre ze sposobów, w jakie będziesz pisać javascript/ajax w swoich widokach brzytwy, wtedy będziesz komunikował się z kontrolerem (który powinien pobrać dane z "modelu"), a następnie całego doświadczenia .net mvc jest powiązana z różnymi ustawieniami, web.config możesz następnie przetestować, kiedy twoja zmiana wartości na false

Exampl e

w Twojej web.config, widać

<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 nawet ten działa bardzo dobrze:

<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