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 stackoverflow.com/questions/1184624/…. ( I suppose you are using jquery) — sakhunzai
– sakhunzai, Commented May 29, 2013 at 4:40

vijay · Accepted Answer · 2013-05-29 07:06:47Z

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, 2013 at 7:06

answered May 29, 2013 at 4:40

vijay

1,3531 gold badge11 silver badges15 bronze badges

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

7 Comments

vijay Over a year ago

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.

user1589906 Over a year ago

thanks for the response the User class definition added in the question

user1589906 Over a year ago

'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

vijay Over a year ago

In you class definition there are only three properties so you will get those three only in controller. See updated answer

user1589906 Over a year ago

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

|

Collectives™ on Stack Overflow

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

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related