Receive multiple JSON objects via an MVC4 controller using AJAX POST method

Is there any way to send multiple objects to a controller using AJAX? What should the data for the ajax post look like?

[HttpPost]
public string Register(UserLogin userLogin, Contact contact)
{
}

UserLogin

public class UserLogin 
{
   public string Username { get; set; }
   public string Password { get; set; }
}

Contact

public class Contact
{
   public string Firstname { get; set; }
   public string Lastname { get; set; }
}

AJAX ?

$.ajax({
   type: "POST",
   url: "SomeUrl"
   dataType: "json",
   contentType: "application/json; charset=utf-8",
   data: ?
});

Answer №1

Give this a shot

$.ajax({
   type: "POST",
   url: "AnotherUrl"
   dataType: "json",
   contentType: "application/json; charset=utf-8",
   data: {
       'userInfo' : {
           'Username' : 'NewUsername',
           'Password' : 'NewPassword'
       },
       'profile' : {
           'Firstname' : 'NewFirstname',
           'Lastname' : 'NewLastname'
       }
   }
});

Answer №2

To update the javascript in your code, make sure to pass your object in this format once it's created:

var userObject = {
  Name: name,//retrieve using jQuery $('#Name').val()
  Email : email    //same method
};  
var details = {
  FirstName = "",
  LastName = "",
};

Then, when making an ajax call,

data: {userInfo: userObject, details: details}

Answer №3

Here is a simple example to demonstrate how you can assign data to an ajax call:

var userData = {
username: "", password: ""
};

var userDetails = {
firstname: "", lastname: ""
};

You can then pass this data to the ajax call using: data : {userData : userData, userDetails : userDetails}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to append a URL parameter after a link is clicked using Vue.js?

I am currently working on integrating heading links on my website's sidebar that are linked to the main content using scrollspy. This allows users to easily navigate to different sections of the main content by clicking on the corresponding headings i ...

Copy the AJAX response from a JQuery request to the clipboard seamlessly without requiring the user to manually click a button

I'm attempting to automatically copy a portion of a JSON AJAX response to the user's clipboard. When the user submits a form by clicking a button, I want the response to be copied without any additional interaction required. This is my progress ...

Move on to the next iteration in the FOR loop in Node JS

Is there a way to skip item 3 in the loop without breaking it? for (var i = 1; i<= 9; i++) { if (i==3) break; console.log(i); } I had a tough time searching for an answer online because I am unsure of the exact terminology to use. Desired output: ...

The angular2 error message indicating a property cannot be read if it is

Encountering an issue trying to utilize a method within an angular2 component. Here's the code snippet : import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; import { AgGridModule } from &ap ...

Error encountered in 11ty: Invalid operation - eleventyConfig.addPassthroughCopy is not a recognized function

Attempting to integrate my CSS and JavaScript codes into 11ty has been a bit challenging for me. I recently discovered that 11ty utilizes something called .11ty.js, so I decided to utilize the addPassthroughCopy() function. Below is the script I tried: mo ...

The encoding function in Javascript and manipulation of unicode characters

Currently, I am working with ASP.NET MVC, utilizing Kendo UI Editor and jQuery AJAX. The issue arises when I have a £ character in the Kendo UI editor and proceed to send the content to the server using AJAX. The code snippet for this operation looks lik ...

Switching from using a computed property in Vue 2 to implementing the Vue 3 Composition API

I am currently in the process of updating my Vue 2 application to Vue 3 and I have been exploring how to work with computed properties using the Composition API in Vue 3. One particular challenge I am facing is migrating a Vue 2 computed property that pro ...

Integrate jquery into an expressJs application

Is there a way to include jQuery in the express app.js file? I need to use jQuery within app.js to make modifications to the HTML file. For example: app.js const express = require('express') const app = express() const $ = global.jQuery = re ...

Creating extensive pianoroll visualization using HTML and JavaScript

Currently, I am focusing on developing an HTML5 audio application utilizing the latest Web Audio API, and I require a "pianoroll" feature. This is essentially a keyboard grid where users can draw notes, similar to what is seen in many music production soft ...

What is preventing me from being able to import a React component from a file?

I've double-checked my code and everything seems correct, but when I view it on the port, only the app.js file is displayed. import React from 'react'; import ImgSlider from './ImgSlider'; import './App.css'; function ...

Creating a Navigation Bar in Outlook Style Using Javascript and CSS

Looking for a navigation sidebar design similar to Outlook for my web application. I have seen options available as Winform controls and through Visual WebGUI, but these are Microsoft-dependent solutions. We need a Javascript & CSS based solution that is s ...

Error Encountered: Internet Explorer 11 Runtime Issue

Recently, I encountered an issue with my code that had been working perfectly fine in IE7 and IE8, but started giving me a runtime error in IE11. The error message stated: "JavaScript runtime error: 'SelectAllCheckboxes' is undefined" Below is t ...

Communication between the server and client using MQTT

My goal is to establish communication between server and client using mosca. In the initial stage, I am able to subscribe and publish data from the client to the server successfully. However, I encountered a problem when trying to publish data from the ser ...

When trying to use bootbox.confirm within a dynamically loaded AJAX div, the modal unexpectedly opens and

I have implemented bootbox into my project, which was downloaded from . user_update.php is being loaded in a div within users.php using ajax functionality. Within user_update.php, there is a JavaScript function called validateForm(). Right after the functi ...

Create code based on a string input

I have a class named Template with a method called Render(string). I need to provide data to this method template. For example, I sent: <% for (int i = 0; i < 5; i++) { Console.WriteLine("*") } %> The Render method receives this string and writ ...

Using JavaScript to Create Dynamic Variable Names - Multiple Arrays?

In my project, I am working on creating markers for each user in my loop. These markers need to be generated in a way that allows me to later select them based on the corresponding userId. $.each($.parseJSON(window.usersArray), function (i, user) { w ...

The JavaScript code created in CodePen doesn't seem to function properly when integrated into my website

During a learning program, I created a basic random quote generator. The code worked flawlessly on codepen.io. Using a simple JavaScript (jQuery) function, I displayed random quotes along with their authors, which were stored in an array. I ensured that t ...

Tips for avoiding scientific notation when transferring SQL Server data to an Excel spreadsheet

Is there a way to prevent scientific notation when exporting SQL Server data into an Excel sheet? For example, a 20-digit column value can be displayed in scientific notation rather than the exact value. In SQL Server, the value may appear as 318121218000 ...

Rendering issue with component

I am encountered with a situation where one component is failing to render its sub-component. Surprisingly, there are no visible errors in the console. The data I'm expecting from the web call is also coming through without any issues. However, for so ...

Can one access console and localstorage through android studio?

Is there a way to detect if LocalStorage is being saved on an Android device from Android Studio in an application with a WebView? Also, can javascript code be executed from Android Studio similar to running it in a Chrome console? ...