如何获取模态表单以发布到 MVC 操作

Question

我使用本教程创建了一个模式弹出登录

Modal Form Tutorial

现在这让我了解弹出的模态表单。当我点击我的提交按钮时没有任何反应（正常表单在不处于模式时工作正常），所以我的问题有两个：-

1. 如何在我的帐户控制器中将提交发布到我的登录操作。
2. 如何让任何验证错误显示在模式中？

这是本教程生成的脚本：-

(function ($) {
var alog = window.console ? console.log : alert;

$.fn.popUpForm = function (options) {
    // REQUIRE a container
    if (!options.container) { alert('Container Option Required'); return; }

    // Give us someplace to attach forms
    $("#popUpHide").length || $('<div id="popUpHide" />').appendTo('body').css('display', 'none');

    // Defaults and options
    var defaults = {
        container: '',
        modal: true,
        resizeable: false,
        width: 440,
        title: 'Website Form',
        beforeOpen: function (container) { },
        onSuccess: function (container) { },
        onError: function (container) { }
    };
    var opts = $.extend({}, defaults, options);

    this.each(function () {
        var $this = $(this);

        if (!$this.is('a') || $this.attr('href') == '') { return; }

        var SRC = $this.attr('href') + ' ' + opts.container;

        var formDOM = $("<div />").load(SRC, function () {
            $('#popUpHide').append(formDOM);

            $(opts.container).dialog({
                autoOpen: false,
                width: opts.width,
                modal: opts.modal,
                resizable: opts.resizeable,
                title: opts.title
            });

            $(opts.container).bind("submit", function (e) {
                e.preventDefault();
                ajaxSubmit($this[0]);
            });

            $this.bind("click", function (e) {
                e.preventDefault();
                opts.beforeOpen.call($this[0], opts.container);
                $(opts.container).dialog('open');
            });
        });

    });

    function ajaxSubmit(anchorObj) {
        console.log(anchorObj);
        var form = $(opts.container);
        var method = form.attr('method') || 'GET';

        $.ajax({
            type: method,
            url: form.attr('action'),
            data: form.serialize(),
            success: function () {
                $(opts.container).dialog('close');
                opts.onSuccess.call(anchorObj, opts.container);
            },
            error: function () {
                opts.onError.call(anchorObj, opts.container);
            }
        });
    }
}
})(jQuery);

感谢您的任何想法，

丰富

Answer 1

我不确定情况是否如此，但以模态形式 - 尝试与托管视图中的控制器保持在同一个控制器中。我认为当视图位于一个控制器上并且其上方的模式使用另一个控制器时，MVC 会出现问题。

同时查看这两篇文章：

rendering-modal-dialog-with-aspnet-mvc

graceful-modals-with-aspnet-mvc2