Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Example of JavaScript plugin jQuery connecting to MVC ApiController
<!DOCTYPE html>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home", new { area = "" }, null)</li>
<li>@Html.ActionLink("API", "Index", "Help", new { area = "" }, null)</li>
<div class="container body-content">
<hr />
<p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
@RenderSection("scripts", required: false)
curl --location --request POST 'http://localhost/api/persons' \
--header 'Content-Type: application/x-www-form-urlencoded' \
--data-urlencode 'name=Chris' \
--data-urlencode 'surname=Randle'
@using MyWebAPjQuery.WebAPI.Controllers
<div class="jumbotron">
<h1>ASP.NET jQuery to Web API AJAX call</h1>
<p class="lead">This sentence has a class that denotes it as a lead phrase.</p>
<div class="row">
<div class="col-md-4">
<h2>My MVC API AJAX Call</h2>
<form id="form1">
Name :- <input type="text" name="name" id="name" value="Chris" />
Surname:- <input type="text" name="surname" id="surname" value="Randle" />
<input type="button" id="Save" value="Save Data" />
@section scripts{
<script type="text/javascript">
var url = '@(Url.Action())';
$(document).ready(function () {
$("#Save").click(function () {
var person = new Object(); = $('#name').val();
person.surname = $('#surname').val();
url: '/api/personController',
type: 'POST',
dataType: 'json',
data: person,
success: function (data, textStatus, xhr) {
error: function (xhr, textStatus, errorThrown) {
console.log('Error in Operation');
namespace MyWebAPjQuery.WebAPI.Models
public class person
public person()
public string name { get; set; }
public string surname { get; set; }
using MyWebAPjQuery.WebAPI.Models;
using System.Web.Http;
namespace MyWebAPjQuery.WebAPI.Controllers
public class PersonsController : ApiController
public string Post([FromBody]person obj)
return + obj.surname;
public string Get()
string t = "est";
return t;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment