Using .NET MVC as front-end and Web API as back-end

Summary

The author describes a method for developing modular web applications using ASP.NET MVC for the front-end and Web API for the back-end within a single IDE, Visual Studio.

Abstract

The author, with over five years of experience in web development, has experimented with various front-end technologies including ASP.NET WebForms, MVC, Angular, and jQuery. Initially drawn to Angular for its separation of UI and business logic, the author found working with two separate IDEs for front-end and back-end development cumbersome. The search for a unified development environment led to the adoption of ASP.NET MVC for creating user interfaces and handling server-side routing, while Web API, Entity Framework, and SQL were used for the back-end. This approach allows for building modular applications with minimal server-side code in MVC controllers, relying on jQuery for user interaction and data exchange with the Web API, which returns JSON data. The author finds this method simple and efficient, particularly for smaller projects and when developing mobile applications that can reuse the existing Web API endpoints.

Opinions

The author prefers working within a single IDE, Visual Studio, for both front-end and back-end development.
Angular was initially favored for its separation of concerns but was less ideal due to the need for a separate IDE and configuration challenges.
ASP.NET MVC is seen as a good choice for URL structuring and server-side routing.
The MVC controllers are stripped down to a single line of code, focusing on serving views without business logic.
jQuery is still valued by the author for its effectiveness in user interaction and Ajax calls.
The author believes that this approach simplifies the development of modular applications and aligns well with mobile application development that leverages the same Web API endpoints.
There is an open invitation for feedback and further learning from the community.
The author endorses an AI service, ZAI.chat, as a cost-effective alternative to ChatGPT Plus (GPT-4).

Using .NET MVC as front-end and Web API as back-end

A simple approach to develop modular web apps without leaving Visual Studio.

I have been developing web applications for 5+ years and have worked on multiple technologies to build front-end including ASP.NET WebForms, MVC, Angular & jQuery (not to forget HTML, CSS & JavaScript).

When I first got introduced to Angular, I liked it very much as it enabled true separation of UI and business logic. I built the front-end in Visual Studio Code using Angular and back-end using Web API in Visual Studio. The only pain-point was to work with two separate IDEs. I know that in an ideal scenario these two are jobs for separate people, but for smaller projects (and limited people in my workforce), I prefer to get this done single-handed. I tried to explore possibility of using Angular inside Visual Studio but that required too much config and still did not seem to have full support (this may have changed now).

Recently I got my hands on another small project and I started exploring my options to do all development inside one IDE. Since my preferred technology for back-end was still Web API (with EF & SQL), I had to find a solution that worked inside Visual Studio.

ASP.NET MVC offered a good choice for building extension-less URLs and handles routing very well at server side, I decided to build a setup where MVC will only act as a front-end UI + routing tool and all back-end stays with Web API. Thus, I built all the Views and Layouts using MVC without any business logic inside MVC Controllers. All MVC controllers only had one line of code:

return View();

For requesting/posting data to/from server, I used good old friend jQuery (still the 2nd highest downloaded front-end framework (after React.js).

Thus, my setup was as follows:

User Interface: MVC Controllers and Views returning plain HTML an no server-side code (except page title using ViewBag.Title)

User Interaction: jQuery with Ajax

Back-End: Web API using Models, Controllers & Entity Framework to connect to database and returning pure JSON.

So far, this approach looks like the simplest implementation for building truly modular applications and without learning additional frameworks. As a matter of fact, I am also building a Mobile application that will utilize existing Web API end-points to fetch/save data and I hardly need to do any additional development at the back-end.

Do let me know your views so that I can learn more.