How to pass javascript object to a c# controller in asp.net MVC?

In this article we will discuss to pass multiple parameters from Ajax post call in asp.net MVC application. Before I have faced issues with jQuery ajax post call to a controller with multiple parameter due to syntax errors. Now I have found a way by passing JSON stringifyed Object to a [HttpPost] method.

Step 1: Right click on the "Controllers" folder and add "Company" controller. Copy and paste the following code. Please make sure to include "MVC_tutorials.Models" namespace.

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Net;
using System.Net.Sockets;
using System.Web;
using System.Web.Mvc;
 
namespace MVC_tutorials.Controllers
{
    public class CompanyController : Controller
    {
        //
        // GET: /addition/
        public ActionResult Index()
        {
            return View();
        }
        [HttpPost]
        public ActionResult Companyprofile(company company)
        {
            if (Request.IsAjaxRequest())
            {
                return Json(string.Format("Name: {0}{2}Address: {1}", company.name, company.Address, Environment.NewLine), JsonRequestBehavior.AllowGet);
            }
            else
            {
                return RedirectToAction("Index");
            }
        }
        public class company
        {
            public string name { get; set; }
            public string Address { get; set; }
        }
    }
}

Step 2: Right click on the "Index" action method in the "CompanyController" and add "Index" view. Copy and paste the following code.

@{
    ViewBag.Title = "pass javascript object to a c# controller in asp.net MVC";
}
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
    $(function () {
        $("[id*=btnSubmit]").click(function () {
            var dataobject = {};
            dataobject.name = $("#txtName").val();
            dataobject.Address = $("#txtAddress").val();
            $.ajax({
                type: "POST",
                url: "@Url.Action("Companyprofile", "Company", new { area = "" })",
                data: dataobject,
                //JSON.stringify(dataobject)
                //contentType: "application/json; charset=utf-8",
                //dataType: "json",
                success: function (response) {
                    alert(response);
                }
            });
            return false;
        });
    });
</script>
<style type="text/css">
    .btn {
        font-size: 19px;
        width: 100px;
        height: 45px;
        background: #00BCD4;
        border-style: solid;
        border-color: white;
        color: white;
    }
    .mytextstyle {
        font-size: 19px;
        height: 45px;
        width: 300px;
    }
    .mytextareastyle {
        font-size: 19px;
        height: 100px;
        width: 300px;
    }
</style>
<h2 style="color: #FF5722">Pass javascript object to a c# controller in asp.net MVC
</h2>
<table style="border: 1px solid #DED8D8; font-size: 19px; width: 500px; padding: 10px; font-family: Arial;">
    <tr>
        <td>Name:
        </td>
        <td>
            <input type="text" id="txtName" class="mytextstyle" value="mohamed rasik" />
        </td>
    </tr>
    <tr>
        <td>Address:
        </td>
        <td>
            <textarea id="txtAddress" class="mytextareastyle">Infinet software solution
Mangammal salai,
K.T.C Nagar,
Tirunelveli – 627011.</textarea>
        </td>
    </tr>
    <tr>
        <td>&nbsp;
        </td>
        <td style="padding-left: 50px">
            <input type="submit" id="btnSubmit" class="btn" value="Submit" />
        </td>
    </tr>
</table>

Output: