Created
September 26, 2021 12:52
-
-
Save csharpforevermore/63df49b9b3b119a92b912aaeb928a99e to your computer and use it in GitHub Desktop.
Example of JavaScript plugin jQuery connecting to MVC ApiController
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width" /> | |
| <title>@ViewBag.Title</title> | |
| @Styles.Render("~/Content/css") | |
| @Scripts.Render("~/bundles/modernizr") | |
| </head> | |
| <body> | |
| <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> | |
| </button> | |
| @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" }) | |
| </div> | |
| <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> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="container body-content"> | |
| @RenderBody() | |
| <hr /> | |
| <footer> | |
| <p>© @DateTime.Now.Year - My ASP.NET Application</p> | |
| </footer> | |
| </div> | |
| @Scripts.Render("~/bundles/jquery") | |
| @Scripts.Render("~/bundles/bootstrap") | |
| @RenderSection("scripts", required: false) | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| curl --location --request POST 'http://localhost/api/persons' \ | |
| --header 'Content-Type: application/x-www-form-urlencoded' \ | |
| --data-urlencode 'name=Chris' \ | |
| --data-urlencode 'surname=Randle' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @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> | |
| <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" /> | |
| </form> | |
| </div> | |
| </div> | |
| @section scripts{ | |
| <script type="text/javascript"> | |
| var url = '@(Url.Action())'; | |
| $(document).ready(function () { | |
| $("#Save").click(function () { | |
| var person = new Object(); | |
| person.name = $('#name').val(); | |
| person.surname = $('#surname').val(); | |
| $.ajax({ | |
| url: '/api/personController', | |
| type: 'POST', | |
| dataType: 'json', | |
| data: person, | |
| success: function (data, textStatus, xhr) { | |
| console.log(data); | |
| }, | |
| error: function (xhr, textStatus, errorThrown) { | |
| console.log('Error in Operation'); | |
| } | |
| }); | |
| }); | |
| }); | |
| </script> | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| namespace MyWebAPjQuery.WebAPI.Models | |
| { | |
| public class person | |
| { | |
| public person() | |
| { | |
| } | |
| public string name { get; set; } | |
| public string surname { get; set; } | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| using MyWebAPjQuery.WebAPI.Models; | |
| using System.Web.Http; | |
| namespace MyWebAPjQuery.WebAPI.Controllers | |
| { | |
| public class PersonsController : ApiController | |
| { | |
| public string Post([FromBody]person obj) | |
| { | |
| return obj.name + 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