asp.net MVC

How to pass multiple parameters to a POST method using jQuery Ajax in asp.net MVC?

How to pass multiple parameters to a POST method using jQuery Ajax in asp.net MVC?, someone asked me to explain?

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 "UserInfo" 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 UserInfoController : Controller
    {
        //
        // GET: /addition/
        public ActionResult Index()
        {
           return View();
        }

       [HttpPost]
        public ActionResult profile(string name, int age)
        {
            if (Request.IsAjaxRequest())
            {
                return Json(string.Format("Name: {0}{2}Age: {1}", name, age, Environment.NewLine), JsonRequestBehavior.AllowGet);
            }
            else
            {
               return RedirectToAction("Index");
           }
        }
    }
}

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

@{
   ViewBag.Title = "passingmultiple parameter using jQuery Ajax";
}
<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.age = $("#txtAge").val();
           $.ajax({
                type: "POST",
               url: "@Url.Action("profile", "UserInfo", new { area = "" })",
                data: 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;
    }
</style>
<h2 style="color: #FF5722">passing multiple parameter using jQuery Ajax
</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>Age:
        </td>
        <td>
            <input type="text" id="txtAge" class="mytextstyle" value="27" />
        </td>
    </tr>
    <tr>
        <td>&nbsp;
        </td>
        <td style="padding-left: 50px">
            <input type="submit" id="btnSubmit" class="btn" value="Submit" />
        </td>
    </tr>
</table>

 Output:

pass multiple parameters to a POST method using jQuery Ajax in asp.net MVC

Video tutorial:

Post your comments / questions