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>
</td>
<td style="padding-left: 50px">
<input type="submit" id="btnSubmit" class="btn" value="Submit" />
</td>
</tr>
</table>
Output:
Video tutorial:
Post your comments / questions
Recent Article
- Requested setting INSTALLED_APPS, but settings are not configured. You must either define..
- ValueError:All arrays must be of the same length - Python
- Check hostname requires server hostname - SOLVED
- How to restrict access to the page Access only for logged user in Django
- Migration admin.0001_initial is applied before its dependency admin.0001_initial on database default
- Add or change a related_name argument to the definition for 'auth.User.groups' or 'DriverUser.groups'. -Django ERROR
- Addition of two numbers in django python
- The request was aborted: Could not create SSL/TLS secure channel -Error in Asp.net
Related Article