Passing form data to asp.net mvc controller action using JQuery

Question

Hi to all,

Basically, I have an HTML Form and would want to pass the data from the form to n asp.net mvc controller, then the controller would return an XML for client side manipulation.

Here is my initial code:

Client:

$(function() {
    $('#btnSubmit').click(function() {
        $.post('/Home/Create', $('form').serialize(), function(data) {
            $('#entryForm').remove('form');
            // $('#entryForm form').html(data);
            alert(data);
            $(data).find('Person').each(function() {
                alert($(this).attr('Lastname').val());
            });
        }, "xml");
        return false;
    });
});

Here is the code for my Controller action:

   public ActionResult Create(Person p)
    {
        //Person p = new Person();
        //p.Lastname = lastname;
        //p.Firstname = firstname;
        //p.Middlename = middlename;

        // this returns XML Data
        return new XmlResult(p);    
    }

When I run and debug, I get a message that says "attr(..) is null or not an object. Can you please help me identify what I'm doing wrong here? Any suggestion would also be gladly appreciated, as I am still trying to learn web development using ASP.NET MVC.

Thanks

Most

Answer 1

hi to all

I realize that I was doing it alright, here is my updated code for the client side:

$(function() {
    $('#btnSubmit').click(function() {
        $.post('/Home/Create', $('form').serialize(), function(data) {
            $('#entryForm').remove('form');
            // $('#entryForm form').html(data);

            $(data).find('Person').each(function() {
                var $lastname = $(this).find('Lastname').text();
                var $firsttname = $(this).find('Firstname').text();
                var $middlename = $(this).find('Middlename').text();
                // alert('<p>Lastname: ' + $lastname + '</p>');
                $('<p></p>').html($lastname).appendTo('#detailsForm');
            });
        }, "xml");
        return false;
    });
});

Now, my next challenge would be, How I can send XML file, using ASP.NET MVC, to the client so that I can use JQuery to process the XML???

Thanks

Answer 2

public ActionResult ReturnXmlFile() {
   return File( byte[] data, "text/xml" );
   ...
   return File( string filename, "text/xml" );
   ...
   return File( Stream filestream, "text/xml" );
}

http://stackoverflow.com/questions/1375486/how-to-create-file-and-return-it-via-fileresult-in-asp-net-mvc

Answer 3

Why dont you use JSon Result? JQuery supports that just replace the "xml" in your $.post call with "json"