This content originally appeared on Level Up Coding - Medium and was authored by Roland Xavier
Building a Modern Web Application with .NET Framework, MVC, Web API & SQL Server
Introduction:
The world of web development has evolved tremendously in recent years, and developers are now spoilt for choice with a variety of frameworks, programming languages, and tools available. In this blog post, we’ll explore how to build a modern web application using .NET Framework, MVC, Web API, SQL Server, and Angular.
.NET Framework vs. .NET Core
.NET Framework is a software framework developed by Microsoft that supports building and running applications on Windows. It has been around for a long time and has a vast collection of libraries and tools available. However, it is not cross-platform compatible, and its performance can be slow.
.NET Core, on the other hand, is a newer, open-source version of .NET Framework that is cross-platform compatible and faster. It also has a smaller footprint and is optimized for modern web and cloud applications. In this tutorial, we’ll be using .NET Framework, but the steps are similar for .NET Core.
MVC and Web API
MVC (Model-View-Controller) is a design pattern used in web development that separates the application into three interconnected parts: the model, the view, and the controller. This pattern helps in separating concerns and making the application more manageable.
Web API is a framework used to build HTTP services that can be consumed by web and mobile applications. It is built on top of MVC and supports RESTful architecture.
SQL Server
SQL Server is a relational database management system developed by Microsoft. It is widely used in enterprise applications and offers a variety of features such as high availability, security, and scalability.
Building the Web Application
Now that we have an understanding of the various technologies and tools involved let’s build our web application.
Prerequisites
- Visual Studio (2017 or later)
- SQL Server Management Studio
- Node.js
- Angular CLI
Step 1: Creating the Database
- Open SQL Server Management Studio and create a new database called “EmployeeDB.”
- Create a new table called “Employee” with the following columns: Id (int), Name (nvarchar(50)), and Department (nvarchar(50)).
- Insert some sample data into the “Employee” table.
Step 2: Creating the Web API
- Open Visual Studio and create a new ASP.NET Web Application.
- Select the “Web API” template and click “Create.”
- In the “Models” folder, create a new class called “Employee.cs” with the following properties:
public class Employee
{
public int Id { get; set; }
public string Name { get; set; }
public string Department { get; set; }
}
- In the “Controllers” folder, create a new class called “EmployeeController.cs” with the following code:
using System.Collections.Generic;
using System.Linq;
using System.Web.Http;
namespace EmployeeAPI.Controllers
{
public class EmployeeController : ApiController
{
List<Employee> employees = new List<Employee>()
{
new Employee { Id = 1, Name = "John Doe", Department = "IT" },
new Employee { Id = 2, Name = "Jane Smith", Department = "HR" },
new Employee { Id = 3, Name = "Bob Johnson", Department = "Finance" }
};
// GET api/employee
public IEnumerable<Employee> Get()
{
return employees;
}
// GET api/employee/5
public Employee Get(int id)
{
return employees.FirstOrDefault(e => e.Id == id);
}
// POST api/employee
public void Post([FromBody]Employee employee)
{
employees.Add(employee);
}
// PUT api/employee/5
public void Put(int id, [FromBody]Employee employee)
{
var emp = employees.FirstOrDefault(e => e.Id == id);
emp.Name = employee.Name;
emp.Department = employee.Department;
}
// DELETE api/employee/5
public void Delete(int id)
{
var emp = employees.FirstOrDefault(e => e.Id == id);
employees.Remove(emp);
}
}
}
- Run the application to ensure that the Web API is working correctly. You can use a tool such as Postman to test the API endpoints.
Step 3: Creating the MVC Application
- Open Visual Studio and create a new ASP.NET Web Application.
- Select the “MVC” template and click “Create.”
- In the “Models” folder, create a new class called “Employee.cs” with the following properties:
public class Employee
{
public int Id { get; set; }
public string Name { get; set; }
public string Department { get; set; }
}
- In the “Controllers” folder, create a new class called “EmployeeController.cs” with the following code:
using System.Web.Mvc;
using System.Net.Http;
using System.Net.Http.Headers;
using System.Threading.Tasks;
using Newtonsoft.Json;
using EmployeeMVC.Models;
namespace EmployeeMVC.Controllers
{
public class EmployeeController : Controller
{
private string BaseUrl = "http://localhost:port/api/employee/";
// GET: Employee
public async Task<ActionResult> Index()
{
using (var client = new HttpClient())
{
client.BaseAddress = new Uri(BaseUrl);
client.DefaultRequestHeaders.Clear();
client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
HttpResponseMessage response = await client.GetAsync("getall");
if (response.IsSuccessStatusCode)
{
string data = await response.Content.ReadAsStringAsync();
var employees = JsonConvert.DeserializeObject<List<Employee>>(data);
return View(employees);
}
}
return View();
}
// GET: Employee/Details/5
public async Task<ActionResult> Details(int id)
{
using (var client = new HttpClient())
{
client.BaseAddress = new Uri(BaseUrl);
client.DefaultRequestHeaders.Clear();
client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
HttpResponseMessage response = await client.GetAsync("get/" + id);
if (response.IsSuccessStatusCode)
{
string data = await response.Content.ReadAsStringAsync();
var employee = JsonConvert.DeserializeObject<Employee>(data);
return View(employee);
}
}
return View();
}
// GET: Employee/Create
public ActionResult Create()
{
return View();
}
// POST: Employee/Create
[HttpPost]
public async Task<ActionResult> Create(Employee employee)
{
using (var client = new HttpClient())
{
client.BaseAddress = new Uri(BaseUrl);
client.DefaultRequestHeaders.Clear();
client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
HttpResponseMessage response = await client.PostAsJsonAsync("create", employee);
if (response.IsSuccessStatusCode)
{
return RedirectToAction("Index");
}
}
return View();
}
// GET: Employee/Edit/5
public async Task<ActionResult> Edit(int id)
{
using (var client = new HttpClient())
{
client.BaseAddress = new Uri(BaseUrl);
client.DefaultRequestHeaders.Clear();
client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
HttpResponseMessage response = await client.GetAsync("get/" + id);
if (response.IsSuccessStatusCode)
{
string data = await response.Content.ReadAsStringAsync();
var employee = JsonConvert.DeserializeObject<Employee>(data);
return View(employee);
}
}
return View();
}
// POST: Employee/Edit/5
[HttpPost]
public async Task<ActionResult> Edit(int id, Employee employee)
{
using (var client = new HttpClient())
{
client.BaseAddress = new Uri(BaseUrl);
client.DefaultRequestHeaders.Clear();
client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
HttpResponseMessage response = await client.PutAsJsonAsync("update/" + id, employee);
if (response.IsSuccessStatusCode)
{
return RedirectToAction("Index");
}
}
return View();
}
// GET: Employee/Delete/5
public async Task<ActionResult> Delete(int id)
{
using (var client = new HttpClient())
{
client.BaseAddress = new Uri(BaseUrl);
client.DefaultRequestHeaders.Clear();
client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
HttpResponseMessage response = await client.GetAsync("get/" + id);
if (response.IsSuccessStatusCode)
{
string data = await response.Content.ReadAsStringAsync();
var employee = JsonConvert.DeserializeObject<Employee>(data);
return View(employee);
}
}
return View();
}
// POST: Employee/Delete/5
[HttpPost]
public async Task<ActionResult> Delete(int id, FormCollection collection)
{
using (var client = new HttpClient())
{
client.BaseAddress = new Uri(BaseUrl);
client.DefaultRequestHeaders.Clear();
client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
HttpResponseMessage response = await client.DeleteAsync("delete/" + id);
if (response.IsSuccessStatusCode)
{
return RedirectToAction("Index");
}
}
return View();
}
}
}
Step 4: Deploying the Application to Azure
- Create a new Web App in Azure.
- In Visual Studio, right-click on the project and select “Publish.”
- Select “Microsoft Azure App Service” and click “Create Profile.”
- Fill in the necessary information, such as the App Service name, subscription, and resource group.
- Click “Create” to publish the application to Azure.
Conclusion
In this article, we have seen how to create a .NET Framework Web API and an MVC application that consumes the API. We have also covered how to use SQL Server as the database and deploy the application to Azure. With this knowledge, you can build and deploy your own .NET applications with ease.
Become a Medium Member to directly support my work. You’ll also get full access to every story on Medium. Thanks in advance!
Level Up Coding
Thanks for being a part of our community! Before you go:
- 👏 Clap for the story and follow the author 👉
- 📰 View more content in the Level Up Coding publication
- 💰 Free coding interview course ⇒ View Course
- 🔔 Follow us: Twitter | LinkedIn | Newsletter
🚀👉 Join the Level Up talent collective and find an amazing job
Building a Modern Web Application with .NET Framework, MVC, Web API, SQL Server, and Angular was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Roland Xavier
Roland Xavier | Sciencx (2023-04-22T22:21:49+00:00) Building a Modern Web Application with .NET Framework, MVC, Web API, SQL Server, and Angular. Retrieved from https://www.scien.cx/2023/04/22/building-a-modern-web-application-with-net-framework-mvc-web-api-sql-server-and-angular/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.