MVC中的自动保存（ASP.NET）

问题描述 投票：10回答：7

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

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

我的问题是：

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

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

我在这里先向您的帮助表示感谢 ;）

javascript asp.net-mvc asp.net-mvc-4 autosave
7个回答
12
投票

您可以将form="myformid"属性添加到表单外部的元素以将其包含在表单中。我会在开头的所有元素中添加data-dirty="false"属性，并附加将更改元素的data-dirty属性更改为true的change事件。然后，您可以每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);
                                });
                           });
});
3
投票

答案...

  1. 绝对使用javascript和AJAX，您不希望页面在用户进行更改时保持刷新
  2. 我不知道任何图书馆，但我很乐意手工完成。使用javascript检测更改，然后通过AJAX发布数据
  3. 您可以使用FormCollection参数或经典的Form["fieldname"]方法从控制器访问任何表单域。只要您的表格单元格具有唯一的name值，您就可以获取数据
2
投票
  1. 这真的是你唯一的选择。如果您在没有Ajax的情况下提交表单，那么您将体验整页重新加载。听起来不像你想要的那样。
  2. 有很多方法可以实现这一点（另请参阅刚刚发布的karaxuna答案）。您可以将事件附加到所有输入，并且在任何更改时使用计时器保存数据。如果发生另一个更改事件，则重置计时器，这样您就不会为每个更改事件保存。 或者，如果您不需要它那么复杂，只需使用一个简单的计时器来保存每X分钟，无论是否输入任何新数据。
  3. 你可以在form中放一张桌子;这没什么不对。我建议使用适当的输入，这样很容易序列化数据并将其发送到服务器。
2
投票

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替换哪些部分应该不难）

1
投票

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

这样，您可以将更改事件直接发送到服务器。您可以使用JavaScript中的生产者 - 消费者模型来限制它们，但SignalR的性能足够好，您应该能够在不必执行此操作的情况下逃脱。

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

祝你好运。

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
0
投票

仅针对您的问题1的部分答案：是的，开箱即用，mvc 4将使用javascript（jquery）和ajax工作得很好

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

例

在你的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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.