如何在具有多种形式的页面上使用自动保存的局部视图？

Question

扩展在MVC（ASP.NET）中的自动保存中找到的示例，我想创建一个部分以在我的应用程序中重用。 我有一个带选项卡式布局的视图，每个选项卡都有自己的表单，这会引起问题，即每种表单都会尝试每次提交，并且仅文档中的第一个时间戳会更新。 我知道为什么会这样，但是我不知道该如何解决。

部分的cshtml：

<div class="form-group">
<label class="control-label col-lg-2" for=""> </label>
<div class="col-lg-10">
    <span class="help-block" id="autosaveTime">Not Autosaved</span>
</div>
</div>

@{
    var autosaveString = "'" + @ViewData["autosaveController"] + "'";
    if (ViewData["autosaveAction"] != null && ViewData["autosaveAction"] != "")
        autosaveString += ", '" + ViewData["autosaveAction"] + "'";
} 

<script type="text/javascript">
    $(document).ready(function () {
        autosave(@Html.Raw(autosaveString));
    });
</script>

使用Javascript：

//methodName is optional-- will default to 'autosave'
function autosave(controllerName, methodName)
{
    methodName = typeof methodName !== 'undefined' ? methodName : 'autosave'
    var dirty = false;
    $('input, textarea, select').keypress(function () {
        dirty = true;
    });
    $('input, textarea, select').change(function () {
        dirty = true;
    });
    window.setInterval(function () {
        if (dirty == true) {
            var form = $('form');
            var data = form.serialize();
            $.post('/' + controllerName + '/' + methodName, data, function () {
                $('#autosaveTime').text("Autosaved at " + new Date);
            })
            .fail(function () {
                $('#autosaveTime').text("There was a problem autosaving, check your internet connection and login status.");
            });
            dirty = false;
        }
    }, 30000); // 30 seconds
}

对于如何解决它，我有2个想法，但不确定哪个更可维护/更可行：

1. 给每个表单一个id，并将其传递给partial / autosave函数。 将名称添加到自动保存时间文本块中以进行更新，并确定要序列化/提交的表单。
2. 以某种方式使用jquery的closest函数来查找自动保存块的放置形式，并使用它来执行我在＃1中显式执行的操作。

Answer 1

首先，使用Razor帮助程序的Html扩展名创建URL（在JavaScript中动态拼接此类URL不必要地有风险）。 接受它，并将其塞入选项卡控件的data属性中，如下所示：

<div class="tab autosave" data-action-url='@Html.Action("Action", "Controller")'>
    <form>
        <!-- Insert content here -->
    </form>
</div>

然后，您需要类似ONCE的东西-不要在所有地方都包括它，并从部分中完全删除javascript：

$(function() {
    // Execute this only once, or you'll end up with multiple handlers... not good
    $('.autosave').each(function() {
        var $this = $(this),
            $form = $this.find('form'),
            dirty = false;

        // Attach event handler to the tab, NOT the elements--more efficient, and it's always properly scoped
        $this.on('change', 'input select textarea', function() {
            dirty = true;
        });

        setInterval(function() {
            if(dirty) {
                // If your form is unobtrusive, you might be able to do something like: $form.trigger('submit'); instead of this ajax
                $.ajax({
                    url : $this.data('action-url'),
                    data : $form.serialize()
                }).success(function() {
                    alert("I'm awesome");
                    dirty = false;
                });
            }
        }, 30 * 1000);
    });
});