Autosave in MVC (ASP.NET)

Question

I'm implementing a web system to manage some data from my company. We are using MVC (more specically ASP.NET MVC 4), in which I'm completely new to.

The problem I'm having is that we planned to use autosave, just like GMail. We were planning on using change events queuing and once in a while submit changes through ajax. On a first thought I would use JavaScript, not sure though if that's the best way for MVC. Another trouble that I'm having is that some of the information the user will enter is not inside forms, but in a table instead. Also the layout of the page is a little sparse and I don't believe I can wrap all the inputs into a single form or even if I should do it.

My questions are:

1. What is the best way to implement autosave using MVC, should I use or not JavaScript?
2. Is there any library in JavaScript or a feature in ASP.NET MVC to implement the queuing or should I do it by hand?
3. Also, can I use form to wrap table rows?

Note: I've seen some suggestions to use localstorage or others client persistency, but what I need is server persistency, and we don't even have a save button on the page.

Thanks for the help in advance ;)

Answer 1

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

Answer 2

You can add form="myformid" attribute to elements that are outside form to include it in form. I would add data-dirty="false" attribute to all elements at the beginning and attach change event that would change data-dirty attribute of changing element to true. Then you can save form each 30 seconds for example (get elements that have data-change=true and pass to server). After saving, every element's data-dirty becomes false again. Example of autosave with 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

Attaching event to all elements of form:

$(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 3

Answers...

1. Definitely use javascript and AJAX, you don't want the page to keep refreshing when the user makes a change
2. I don't know about any libraries, but I would be happy to do this by hand. Detect the changes using javascript and then post the data via AJAX
3. You can access any form field from your controller with the FormCollection parameter, or the classic Form["fieldname"] method. As long as your table cells have unique name values you will be able to fetch the data