1

我想我错过了一些简单的东西，但我被一遍又一遍地查看相同的代码蒙蔽了双眼，并且可以使用另一双眼睛。

我有一个包含表单的 MVC 部分视图。

<div class="Clear"></div>
 <div class="OverFlow">
     @using (Html.BeginForm(null, null, FormMethod.Post, new {id = "formId"}))
     {
         <div class="ErrorBx1">@Html.GetData()</div>
         <table>
             @Html.EditorFor(m => m.FormModel, "MyEditorTemplate") 
             <tr>
                 <td colspan="2"></td>
                 <td><input type="image" src="@Images.ResolveDefault("btn-send.jpg")" alt="Send" class="Send" /></td>
             </tr>
         </table>
     }
 </div>

此视图还包含一些 Javascript

<script type="text/javascript">
    $(function () {
        $('#formId').submit(function () {
            $.ajax({
                cache: false,
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (res) {
                    if (res.success) {
                        alert("success");
                        closeDialog();
                        window.parent.specialFunction();
                    } else {
                        alert("not success");
                        $('#someElement').replaceWith(res);
                    }
                }
            });
            return false;
        });
    });
</script>

这是执行的控制器方法

[HttpPost]
public ActionResult Index(MyViewModel viewModel)
{
    if (CheckSuccess())
    {
        return Json(new { success = true });
    }

    return ViewNoLayout("otherView", viewModel);
}

这个视图被加载到一个 jQuery.UI 对话框中。第一次加载对话框时，单击表单上的提交按钮正确执行成功函数 - 弹出警报，关闭对话框并调用父函数。如果我再次弹出对话框并单击提交按钮，则调用将转到服务器并正确处理，但页面会重新加载并且仅显示 JSON 字符串（无警报等）。我假设我缺少某种客户端缓存，或者类似的东西。有任何想法吗？

4

1 回答 1

2

document.ready从您的视图中删除：

<script type="text/javascript">
    $('#formId').submit(function () {
        $.ajax({
            cache: false,
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function (res) {
                if (res.success) {
                    alert("success");
                    closeDialog();
                    window.parent.specialFunction();
                } else {
                    alert("not success");
                    $('#someElement').html(res);
                }
            }
        });
        return false;
    });
</script>

原因是document.ready当您将部分注入 DOM 时，第二次不再执行。因此，您的提交事件不再附加。请注意前面的问题：删除document.ready第一次加载此页面时必须将此脚本放置在标记中的表单之后的方法，它根本不会附加它。

显然，我所说的所有这些只是为了解决您当前的问题。

但您真正的问题是您正在混合标记和 HTML。永远不应该这样做。标记属于视图，脚本属于 javascript 文件。单独的 javascript 文件。所以你应该把它外部化到一个单独的 js 文件中。所以真正的解决方案是在一个单独的文件中使用以下脚本.on()（或者.delegate()如果您使用的是旧的 jQuery 版本，并且.live()如果您使用的是史前版本的 jQuery）来活跃地订阅可能尚未出现在您的 DOM 上的元素订阅时：

$(document).on('submit', '#formId', function() {
    $.ajax({
        cache: false,
        url: this.action,
        type: this.method,
        data: $(this).serialize(),
        success: function (res) {
            if (res.success) {
                alert("success");
                closeDialog();
                window.parent.specialFunction();
            } else {
                alert("not success");
                $('#someElement').html(res);
            }
        }
    });
    return false;    
});
于 2012-07-09T22:07:56.807 回答