How to get a modal form to post to MVC action

I have created a modal pop-up login using this tutorial

Modal Form Tutorial

Now this gets me as far as the modal form popping up. Nothing happens when I click on my submit button (the normal form works fine when not in a modal), so my question is two-fold :-

1. How do I get the submit to post to my Login action in my account controller.
2. How do I get any validation errors to show up in the modal?

This is the script that the tutorial produces :-

(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" /&开发者_JS百科gt;').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);

Thanks for any ideas,

Rich

I am not sure that this is the case, but in modal form - try to stay in the same controller as the one from the hosting view. I think the MVC has problem when the view is on one controller and the modal above it uses another one.

Also Check these two articles:

rendering-modal-dialog-with-aspnet-mvc

graceful-modals-with-aspnet-mvc2