Passing Multiple Models Using AJAX In ASP.NET MVC

Link

@model PassingMultipleModel.Models.Common

@{

    ViewBag.Title = "Index";

}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<h2>Customer</h2>

<table>

    <tr><td>Customer Id</td><td>@Html.TextBoxFor(m => m.customer.CustomerId)</td></tr>

    <tr><td>Customer Name</td><td>@Html.TextBoxFor(m => m.customer.CustomerName)</td></tr>

    <tr><td>Address</td><td>@Html.TextBoxFor(m => m.customer.Address)</td></tr>

</table>

<h2>Employee</h2>

<table>

    <tr><td>Employee Id</td><td>@Html.TextBoxFor(m => m.employee.EmployeeId)</td></tr>

    <tr><td>Employee Name</td><td>@Html.TextBoxFor(m => m.employee.EmployeeName)</td></tr>

    <tr><td>Address</td><td>@Html.TextBoxFor(m => m.employee.Address)</td></tr>

</table>

<input type="button" id="btnClick" value="Submit" />

<script>

    $("#btnClick").click(function () {

      

        var customer = {

            CustomerId: $('#@Html.IdFor(m=>m.customer.CustomerId)').val(),

            CustomerName: $('#@Html.IdFor(m=>m.customer.CustomerName)').val(),

            Address: $('#@Html.IdFor(m=>m.customer.Address)').val()

        }

        var employee = {

            EmployeeId: $('#@Html.IdFor(m=>m.employee.EmployeeId)').val(),

            EmployeeName: $('#@Html.IdFor(m=>m.employee.EmployeeName)').val(),

            Address: $('#@Html.IdFor(m=>m.employee.Address)').val()

        }

        var model = {

            "customer": customer,

            "employee": employee

        }

        //alert(model)

        $.ajax({

            type: "post",

            url: "/Demo/Process",

            data: model,

            datatype: "json",

            cache: false,

            success: function (data) {

                alert(data);

            },

            error: function (xhr) {

                alert('No Valid Data');

            }

        });

    });

</script>

Controller------------------------------------------------------

public JsonResult Process(Common model)

{

           

     // Write your code based on your Process or your Concept

     return Json("Hola Mundo",JsonRequestBehavior.AllowGet);

}


----------------------------------------------------------

https://www.aspsnippets.com/Articles/Pass-Send-Model-object-in-jQuery-ajax-POST-request-to-Controller-method-in-ASPNet-MVC.aspx

     function SendModel() {


            var person = {};

            person.Name = $("#txtName").val();

            $.ajax({
                type: "POST",
                url: "/Home/AjaxMethod",
                data: '{person: ' + JSON.stringify(person) + '}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    alert("Hello: " + response.Name + ".\nCurrent Date and Time: " + response.DateTime);
                },
                failure: function (response) {
                    alert(response.responseText);
                },
                error: function (response) {
                    alert(response.responseText);
                }
            });



        }



        $("#test").click(function () {

            SendModel();


        });





        [HttpPost]
        public JsonResult AjaxMethod(PersonModel person)
        {
            person.DateTime = DateTime.Now.ToString();

            return Json(person);

        }