How to pass complex object from jquery to action controller in tag <a>

Question

How to pass complex object from jquery to action controller in tag

I have a jquery code like this

function InitCell(row, column, value) {

    var MyPerson = new Object();
    MyPerson.ID = '123456789';
    MyPerson.FirstNmae = 'abc';
    MyPerson.LastName = 'def';

    var html = "<a href='/test/Index/person =" + MyPerson +"></a>";
}

In addition I have a action controller like this

public class testController : Controller

{
    //
    // GET: /test/

    public ActionResult Index(Person person)
    {
        return View();
    }

}

class Person
{
    public int ID { get; set; }
    public string LastName { get; set; }
    public string FirstName { get; set; }
    public List<Person> Children { get; set; }
}

Uzair Sajid · Accepted Answer · 2012-08-04 23:51:31Z

3

What you can do is make an HTTP POST request instead of HTTP GET.

$('#postLink').click(function() {
    var MyPerson = {
        ID: 1234,
        FirstName: 'abc',
        LastName: 'def'
    };

    $.ajax({
        data: MyPerson,
        url: $(this).attr('href'),
        type: 'POST',
        dataType: 'json' /* this really is optional */,
        success: function (response) {
            return true;
        },
        error: function ( error ) {
            return false;
        }
    )};

    return false; /* required to stop event propagation */
});

Now you can define an HTML <a> element like so:

<a href="/test/Index" id="postLink">Ajax post the person to the server.</a>

Your controller should now be able to parse the Person object.

Edit: You might want to remove the List<Person> if you aren't passing it with each request. It would aid ASP.NET in identifying a complex type (Person in this case) as the data type of your request. It is generally better to create ViewModels for each of your views as well so that you have a strongly typed data context for your view.

class PersonViewModel
{
    public int ID { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
}

edited Aug 4, 2012 at 23:51

answered Aug 4, 2012 at 23:31

Uzair Sajid

2,1853 gold badges21 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1576706 Over a year ago

How do I contains the tag with a call to ajax?

Uzair Sajid Over a year ago

You can wrap the entire JavaScript block in a click event handler. I'll update the JS code above with the example.

Quentin · Accepted Answer · 2012-08-04 23:20:21Z

You can't, as such. URIs are strings. If you want to pass data in them that isn't formatted as a string, then you have to serialise it to a string and then deserialise at the other end.

For general purposes, JSON is a popular serialisation format, but remember that not all strings are URI safe so you will need to encode the JSON text before including it in a URI.

You just have three pieces of data though, so you could:

var html = "<a href='/test/Index/person/" +
           encodeURIComponent( MyPerson.ID ) + "/" +
           encodeURIComponent( MyPerson.FirstName ) + "/" +
           encodeURIComponent( MyPerson.LastName ) + 
           "></a>";

Or, if the data already exists on the server — just pass the ID value and then get the names from the database.

HatSoft · Accepted Answer · 2012-08-04 23:23:38Z

0

A querystring takes parameters not the type of object you have so you will have to pass it as a querystring with delimited &

Example :

var html = "<a href='/test/Index/person?PersonId=123456789&FirtsName=Test......

answered Aug 4, 2012 at 23:23

HatSoft

11.3k3 gold badges30 silver badges43 bronze badges

Collectives™ on Stack Overflow

How to pass complex object from jquery to action controller in tag <a>

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related