Skip to main content

Web API in ASP.NET MVC

Web API in ASP.NET MVC:-


It is used to contain a set of methods to perform the operation, API means application programming interface which provides a URL to consume functionality from one application to another.

It use HttpPost for data insertion ,HttpGet for data selection ,HttpPut for data updation and HttpDelete for data deletion .

Web API provides a clean, secure, and light-weight URL pattern to access data from .NET MVC application to another MVC application or cross-platform application.

It uses HTTP protocol to communicate data from client to server .we can create REST WEB API using WEB API application which can return data using JSON format or XML format.



API UrlTemplate will be different from normal ASP.NET MVC application because in ASP.NET MVC first, we write controller name/method name/data but in Web API first, we write api/controllername method name will depend on operation.

Syntax of API Controller

 public class ControllernameController : ApiController
    {
        // GET api/values
        public IEnumerable<string> Get()   //Write code for data selection
        {
            return new string[] { "value1", "value2" };
        }

        // GET api/values/5
        public string Get(int id)  //Write code for find record
        {
            return "value";
        }

        // POST api/values
        public void Post([FromBody]string value)  //Write Code for data insertion
        {
        }

        // PUT api/values/5
        public void Put(int id, [FromBody]string value)  //Write Code for data updation
        {
        }

        // DELETE api/values/5
        public void Delete(int id)   //Write Code for delete operation
        {
        }
    }

If we want to create an action method name different then Get, Post, Put and Delete then we will write HttpGET, HttpPost, HttpPut, and HttpDelete Verb.


 // GET api/values
        [HttpGet]
        public IEnumerable<string> ViewValues()
        {
            return new string[] { "value1", "value2" };
        }

        // GET api/values/5
        [HttpGet]
        public string GetValue(int id)
        {
            return "value";
        }


Simple Example of Web API:-

Create Model Class using right-click on model folder:-

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MvcApplication6.Models
{
    public class PersonModel
    {
        public string Name { get; set; }

        ///<summary>
        /// Gets or sets DateTime.
        ///</summary>
        public string DateTime { get; set; }
    }
}


Create APIController and write the following code:-

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using MvcApplication6.Models;
namespace MvcApplication6.Controllers
{
    public class PersontestController : ApiController
    {
        [HttpPost]
        public PersonModel AjaxMethod(PersonModel obj)
        {
            obj.DateTime = DateTime.Now.ToString();
            return obj;
        }

   
    }
}


Create Another controller to consume web api and call web api url using AJAX:-
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcApplication6.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
    }
}


Code of index.cshtml to consume web API:-
<html>
    <head>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
        $(function () {
            $("#btnGet").click(function () {
                var person = '{Name: "' + $("#txtName").val() + '" }';
                $.ajax({
                    type: "POST",
                    url: "/api/Persontest/AjaxMethod",
                    data: 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);
                    }
                });
            });
        });
    </script>
    </head>
    <body>

    <input type="text" id="txtName"/>
    <input type="button" id="btnGet" value="Get Current Time"/>

    </body>

</html>



Labels:

Comments

Post a Comment

POST Answer of Questions and ASK to Doubt

Popular posts from this blog

DSA in C# | Data Structure and Algorithm using C#

  DSA in C# |  Data Structure and Algorithm using C#: Lecture 1: Introduction to Data Structures and Algorithms (1 Hour) 1.1 What are Data Structures? Data Structures are ways to store and organize data so it can be used efficiently. Think of data structures as containers that hold data in a specific format. Types of Data Structures: Primitive Data Structures : These are basic structures built into the language. Example: int , float , char , bool in C#. Example : csharp int age = 25;  // 'age' stores an integer value. bool isStudent = true;  // 'isStudent' stores a boolean value. Non-Primitive Data Structures : These are more complex and are built using primitive types. They are divided into: Linear : Arrays, Lists, Queues, Stacks (data is arranged in a sequence). Non-Linear : Trees, Graphs (data is connected in more complex ways). Example : // Array is a simple linear data structure int[] number...
Post a Comment
Read more

JSP Page design using Internal CSS

  JSP is used to design the user interface of an application, CSS is used to provide set of properties. Jsp provide proper page template to create user interface of dynamic web application. We can write CSS using three different ways 1)  inline CSS:-   we will write CSS tag under HTML elements <div style="width:200px; height:100px; background-color:green;"></div> 2)  Internal CSS:-  we will write CSS under <style> block. <style type="text/css"> #abc { width:200px;  height:100px;  background-color:green; } </style> <div id="abc"></div> 3) External CSS:-  we will write CSS to create a separate file and link it into HTML Web pages. create a separate file and named it style.css #abc { width:200px;  height:100px;  background-color:green; } go into Jsp page and link style.css <link href="style.css"  type="text/css" rel="stylesheet"   /> <div id="abc"> </div> Exam...
Post a Comment
Read more

Top 50 Most Asked MERN Stack Interview Questions and Answers for 2025

 Top 50 Most Asked MERN Stack Interview Questions and Answers for 2025 Now a days most of the IT Company asked NODE JS Question mostly in interview. I am creating this article to provide help to all MERN Stack developer , who is in doubt that which type of question can be asked in MERN Stack  then they can learn from this article. I am Shiva Gautam,  I have 15 Years of experience in Multiple IT Technology, I am Founder of Shiva Concept Solution Best Programming Institute with 100% Job placement guarantee. for more information visit  Shiva Concept Solution 1. What is the MERN Stack? Answer : MERN Stack is a full-stack JavaScript framework using MongoDB (database), Express.js (backend framework), React (frontend library), and Node.js (server runtime). It’s popular for building fast, scalable web apps with one language—JavaScript. 2. What is MongoDB, and why use it in MERN? Answer : MongoDB is a NoSQL database that stores data in flexible, JSON-like documents. It...
Post a Comment
Read more