10

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

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

我的问题是：

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

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

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

4

7 回答 7

12

您可以将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);
                                });
                           });
});
于 2013-06-07T14:59:32.870 回答
3

答案...

  1. 绝对使用 javascript 和 AJAX，当用户进行更改时，您不希望页面保持刷新
  2. 我不知道任何图书馆，但我很乐意手工完成。使用 javascript 检测更改，然后通过 AJAX 发布数据
  3. 您可以使用FormCollection参数或经典Form["fieldname"]方法从控制器访问任何表单字段。只要您的表格单元格具有唯一name值，您就可以获取数据
于 2013-06-07T15:02:24.797 回答
2

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

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

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

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

于 2013-06-07T14:59:28.437 回答
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 替换哪些部分以供您自己使用）

于 2013-06-07T15:02:21.667 回答
2 
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
于 2017-12-16T06:46:14.520 回答
1

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

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

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

祝你好运。

于 2013-06-07T14:59:59.607 回答
0

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

上面的答案向您展示了一些在 razor 视图中编写 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>
于 2013-06-08T07:50:58.270 回答