How to pass multiple values as single object in Javascript/Ajax

Question

I'm new to javascript and MVC I'm working on a sample application containing a sign up page and I'm using ajax to done the process my current code is given below

  function create() {
        var user_name = $("#txtUser").val();
        var pass = $("#txtPass").val();
        var email = $("#txtEmail").val();
        var phone = $("#txtPhone").val();
        var city = $("#txtCity").val();
        var state = $("#txtState").val();
        var zip = $("#txtZip").val();
        $.ajax({
            url: '/EmberNew/Home/Create',
            type: 'POST',
            data: { user_name: user_name, pass: pass,email:email,phone:phone,city:city,state:state,zip:zip },
            success: function (response) {
                alert("success");
            }
        });
        return false;
    }

and its working fine but I want to know that is there any way to pass these values as a single object like in C# forgive me if this question is too silly

serverside code

[HttpPost]
public ActionResult Create(User user)
{
    UserDL newUser = new UserDL();
    newUser.SignUp(user);

    return Json(new { success = true });

}

and also I want to know is there any way to combine these values directly with my server side object

User.cs

public class User
{
    public virtual int ID { get; set; }
    public virtual string UserName { get; set; }
    public virtual string Password { get; set; }
    public virtual string EmailID { get; set; }
    public virtual int Phone { get; set; }
    public virtual string City { get; set; }
    public virtual string State { get; set; }
    public virtual int Zip { get; set; }

}

check this http://stackoverflow.com/questions/1184624/convert-form-data-to-js-object-with-jquery. ( I suppose you are using jquery) — sakhunzai, May 29 '13 at 04:40

vijay · Accepted Answer · 2013-05-29T07:06:47.930

2

Try below code. Sore all variable in single object named data and pass it.

function create() {

        var data = {
            'UserName': $("#txtUser").val(),
            'Password': $("#txtPass").val(),
            'EmailID': $("#txtEmail").val(),
            'Phone': $("#txtPhone").val(),
            'City': $("#txtCity").val(),
            'State': $("#txtState").val(),
            'Zip': $("#txtZip").val()
        };
        $.ajax({
            url: '/EmberNew/Home/Create',
            type: 'POST',
            data: data ,
            success: function (response) {
                alert("success");
            }
        });
        return false;
    }

edited May 29 '13 at 07:06

answered May 29 '13 at 04:40

vijay

1,323
1
11
15

To get values in your `User` object, Property name should match with name in JavaScript object and parameter name as well. Can you share your `User` class definition. – vijay May 29 '13 at 04:54
thanks for the response the User class definition added in the question – May 29 '13 at 04:57
'function create() { var user = { 'EmailID': $('#emailid').val(), 'password': $('#password').val() } $.ajax({ url: '/EmberNew/Home/Create', type: 'POST', data: { user:user }, success: function (response) { alert("hi"); } }); return false; }' changed the code but not working – May 29 '13 at 05:10
In you class definition there are only three properties so you will get those three only in controller. See updated answer – vijay May 29 '13 at 05:19
Updated the User model but the problem still there the value binding in script done without any problem but when its pass that object to server it shows null values – May 29 '13 at 05:30
Have you noticed property name changed in JS for `EmailID` and `password`. This two values should be there on server. – vijay May 29 '13 at 05:32
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/30802/discussion-between-alen-joy-and-vijay) – May 29 '13 at 05:36

How to pass multiple values as single object in Javascript/Ajax

1 Answers1