Ticker

6/recent/ticker-posts

Create ASP.NET MVC 5 with Web API

Dotnettricks September 10, 2019

What is Web API?

ASP.NET Web API is a framework which makes it easy to build up the HTTP services to reach towards the broad range of clients including desktop browsers, any operating systems and mobile devices as well. ASP.NET MVC 5 with Web API is the perfect platform for building RESTful applications on the .NET Framework and uses PUT, GET, POST, DELETE verbs of client communications.
When any developers are building APIs on Web, there are so many ways that they can build APIs on the Web including HTTP/RPC that means using HTTP in Remote Procedure Call to call into things like Methods across the Web.

Let’s Start with Web API:

First, create a new ASP.NET MVC 5 project and select the Web API template. While selecting the WEB API template, if you want you can change the “Authentication” type to the most suitable one for you. You can keep this as “No Authentication” also and open it as anonymous users.
Now, if you are trying to run any project without changing it, you would able to see the Home Page and clicking on the API menu, you will get an API help page with some documentation. Just try browsing what API shows with URL’s GET api/Values with http://localhost:14129/api/Values and you can get some values in XML format.
After that you can be confirmed that Web API is up and running and serving data back to us.
From the below coding section, you will be able to understand how to make a jQUery Post call to Web API Controller’s method using jQuery AJAX in ASP.NET MVC 5 Razor.

Model:

Given below is a Model class of ASP.NET MVC 5 with Web API named PersonModel with two different properties – Name and DateTime.
public class PersonModel
{
    ///<summary>
    /// Gets or sets Name.
    ///</summary>
    public string Name { get; set; }

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

Web API Controller:

Now, to add an ASP.NET MVC 5 with Web API Controller you will need to Right Click on the Controllers folder in the Solution Explorer and click on Add and then Controller. From the Add Scaffold window, choose Web API 2 Controller- Empty option and give a suitable name and click OK. Now, the next thing is to register the Configuration for Web API in the Global.asax file so that the WebAPI is available for accessing on Web. Now to do this open the Global.asax files and adds the line given below:
System.Web.Http.GlobalConfiguration.Configure(WebApiConfig.Register);
You have to add it as per the below mentioned order:

public class MvcApplication : System.Web.HttpApplication
{
    protected void Application_Start()
    {
        AreaRegistration.RegisterAllAreas();
        System.Web.Http.GlobalConfiguration.Configure(WebApiConfig.Register);
        RouteConfig.RegisterRoutes(RouteTable.Routes);
    }
}

The next thing is to code the Web API Controller. The WebAPI Controller consists the method AjaxMethod that accepts an object of PersonModel with DateTime property that returns current Date and Time. The overall method is ornamented with Route attribute to define its Route for calling the Web API method.
public class AjaxAPIController : ApiController
{
    [Route("api/AjaxAPI/AjaxMethod")]
    [HttpPost]
    public PersonModel AjaxMethod(PersonModel person)
    {
        person.DateTime = DateTime.Now.ToString();
        return person;
    }
}

Controller:
In this stage, you have to add one empty Controller along with a View. It is used to call Web API 2 Controller’s method using jQuery AJAX. The Controller consists of empty Action Method which returns the View.
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }
}

View:
In this step, add an Empty View without Model for the Controller. View mainly consists a Button with HTML TextBox element. This Button is assigned with JQuery click event handler and when the Button is clicked a iQuery AJAX call is made with Web API 2 Controller’s method.


Learn More ; 


Tags:

Post a Comment

0 Comments