JQuery.unobtrusive.ajax 不适用于“取消”类（MVC 5）

Question

我一直在用头撞墙试图让这个工作，我终于决定寻求帮助。我的表单中有两个提交按钮。一个提交按钮是允许用户返回。它需要是一个提交按钮，因为我仍然需要使用隐藏输入字段提交的表单。

<form action="/Question/ProcessQuestion" data-ajax="true" data-ajax-failure="handleError" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#questionForm" data-ajax-url="/Question/ProcessQuestion" id="form0" method="post">
    <input type="hidden" name="TraversalId" value="a59aff78-d10c-4800-b91a-3ae47a95a52c">
    <input type="hidden" name="AssetId" value="1cf261a6-4549-4802-bd43-f2900178604d">
    <input type="hidden" name="Type" value="question/text">
    <div id="textQuestion">
        <div class="bodyText">
            <div>In the space below, describe the problem with the left ankle, using as many details as possible.</div><br>
            <textarea rows="10" cols="50" maxlength="999" name="TextResponse" class="textarea" required=""></textarea>
            <div class="bigButtons"><br>
                <input type="submit" id="btnBack" value="Back" name="buttonType" class="cancel">
                <input type="submit" id="btnContinue" value="Continue" name="buttonType">
            </div>
        </div>
    </div>
</form>

如您所见，“返回”按钮中有一个名为“取消”的类。根据几个来源，即使验证失败，这也应该提交表单。我听从了stackoverflow 的建议。它不起作用。我还看到 asp.net 团队在哪里声明它已修复 asp.net codeplex，但这不是真的，因为它不适合我。

我一直在调试代码，执行从来没有进入下面的函数。

$(document).on("submit", "form[data-ajax=true]", function (evt) {
    var clickInfo = $(this).data(data_click) || [],
        clickTarget = $(this).data(data_target),
        isCancel = clickTarget && clickTarget.hasClass("cancel");
    evt.preventDefault();
    if (!isCancel && !validate(this)) {
        return;
    }
    asyncRequest(this, {
        url: this.action,
        type: this.method || "GET",
        data: clickInfo.concat($(this).serializeArray())
    });
});

相反，文本区域被突出显示，并且快速弹出消息指出“请填写此字段”。我确定我做错了什么，但是，我不知道它是什么。如果能得到任何帮助，我将不胜感激。

Answer 1

我最终选择更改 jquery.unobtrusive.ajax.js 代码。我为以下事件处理程序添加了一些逻辑。

$(document).on("click", "form[data-ajax=true] :submit", function (evt) {
    var name = evt.currentTarget.name,
        target = $(evt.target),
        form = $(target.parents("form[data-ajax=true]")[0]);

    form.data(data_click, name ?[{ name: name, value: evt.currentTarget.value }]: []);
    form.data(data_target, target);

    setTimeout(function () {
        form.removeData(data_click);
        form.removeData(data_target);
    }, 0);
});

我在变量声明之后添加了这个逻辑。

if (target.hasClass("cancel")) {
    var clickInfo = name ? [{ name: name, value: evt.currentTarget.value }] : [];
    var options = {
        url : form.attr("action"),
        type: form.attr("method"),
        data: clickInfo.concat(form.serializeArray())
    };
    $.ajax(options).done(function(result) {
        var target = $(form.attr("data-ajax-update"));
        target.replaceWith(result);
    }).fail(function(result) {
        if (result.statusText && result.responseText) {
            handleError(result);
        }
    });
    return false;
}

它现在对我有用。如果有人有更好的方法来解决这个问题，我将不胜感激。我真的不想修改 jquery.unobtrusive.ajax.js 文件，但是，我也不想为相同的事件和元素连接一个新的处理程序，因为已经存在一个。