MVC 中的自动保存 (ASP.NET)

Question

我正在实施一个网络系统来管理我公司的一些数据。 我们正在使用 MVC（更具体地说是 ASP.NET MVC 4），我对它完全陌生。

我遇到的问题是我们计划使用自动保存，就像 GMail 一样。 我们计划使用更改事件队列，并偶尔通过 ajax 提交更改。 第一次想到我会使用 JavaScript，但不确定这是否是 MVC 的最佳方式。 我遇到的另一个问题是用户将输入的某些信息不在表单中，而是在表格中。 此外，页面的布局有点稀疏，我不相信我可以将所有输入包装到一个表单中，或者即使我应该这样做。

我的问题是：

1. 使用 MVC 实现自动保存的最佳方式是什么，我应该使用还是不使用 JavaScript？
2. 是否有 JavaScript 中的库或 ASP.NET MVC 中的功能来实现排队或我应该手动完成？
3. 另外，我可以使用表单来包装表格行吗？

注意：我看到了一些使用 localstorage 或其他客户端持久性的建议，但我需要的是服务器持久性，我们甚至在页面上都没有保存按钮。

提前感谢您的帮助；）

Answer 1

您可以将form="myformid" 属性添加到表单之外的元素以将其包含在表单中。我会在开头为所有元素添加data-dirty="false" 属性，并附加更改事件，该事件会将更改元素的数据脏属性更改为true。然后，例如，您可以每 30 秒保存一次表单（获取具有 data-change=true 的元素并传递给服务器）。保存后，每个元素的 data-dirty 再次变为 false。使用 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

将事件附加到表单的所有元素：

$(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. 一定要使用 javascript 和 AJAX，你不希望页面在用户进行更改时一直刷新
2. 我不知道任何库，但我很乐意手动执行此操作。使用 javascript 检测更改，然后通过 AJAX 发布数据
3. 您可以使用FormCollection 参数或经典的Form["fieldname"] 方法从控制器访问任何表单字段。只要您的表格单元格具有唯一的 name 值，您就可以获取数据

Answer 3

1. 这确实是您唯一的选择。如果您在没有 Ajax 的情况下提交表单，那么您将体验到整个页面的重新加载。听起来这不是你想要的。

2. 有很多方法可以实现这一点（另请查看 karaxuna 刚刚发布的答案）。您可以将事件附加到所有输入，并且任何时候它们中的任何一个更改都使用计时器来保存数据。如果发生另一个更改事件，则重置计时器，这样您就不会为每个更改事件进行保存。

   或者，如果您不需要它那么复杂，只需使用一个简单的计时器每隔 X 分钟保存一次，无论是否输入了任何新数据。

3. 您可以在form 中放置一个表格；这没有什么问题。我只是建议使用适当的输入，以便轻松序列化数据并将其发送到服务器。

Answer 4

1) 使用 Javascript！ jQuery 使得使用 AJAX 调用在后台异步执行自动保存变得相当容易。

2 ) 我不知道，但应该不会太难。

3 ) 不，很遗憾你不能，但你可以这样做：

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

（我知道这个示例代码没有利用 Razor，但不难找出用 Razor 替换哪些部分以供您自己使用）

Answer 5

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 6

您可以使用 SignalR 集线器在您的页面和服务器之间进行动态通信。有关此技术的详细信息，请参阅 https://github.com/SignalR/SignalR/wiki 和 http://signalr.net/。

这样，您可以将更改事件直接发送到服务器。您可以使用 JavaScript 中的生产者-消费者模型来限制它们，但 SignalR 的性能已经足够好，您应该能够摆脱这些，而不必这样做。

您可以在表单中嵌入表格，但同样，SignalR 使用不同的客户端到服务器通信方式。

祝你好运。

Answer 7

仅针对您的问题 1 的部分答案：是的，开箱即用，mvc 4 可以很好地与 javascript (jquery) 和 ajax 配合使用

上面的答案向您展示了您将在剃刀视图中编写 javascript /ajax 的一些方法，然后您将与控制器（应该从“模型”获取数据）进行通信，然后是整个 .net 的一部分mvc 框架体验与各种设置相关联，web.config 然后您可以在将值更改为 false 时进行测试

例子

在您的 web.config 中，您会看到

<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 甚至可以很好地工作：

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