Question

I have a form in my ASP.NET MVC 3 application that will use jquery to send it’s data to the controller action instead of doing a normal postback:

$('.AjaxForm').live("submit", function (event) {
            event.preventDefault();
            $.validator.unobtrusive.parseDynamicContent('.uiModalContent input');
            console.log($(this).attr('action'));
            $.ajax({
                type: 'POST',
                url: $(this).attr('action'),
                data: data,
                success: function (responseHtml) {
                    alert(responseHtml);
                },
                error: function (responseHtml) {
                    alert('error');
                },
                statusCode:
                {
                    404: function (responseHtml) {
                        alert('404');
                    },
                    500: function (responseHtml) {
                        alert('500');
                    }
                }
            });
        });

However I get an error saying data is undefined… How do I get the data from the form and send it? Also does the built-in validation in ASP.NET MVC 3 work with my code or will I have issues? Thanks

Answer 1

You should use form.serialize() to make data value. Your code should be changed to:

url: $(this).attr('action'),
data: $('.AjaxForm').serialize(),