.NET Core Archives - Tech Insights

How to download multiple files in ASP.NET Core MVC

Ahmed — Fri, 10 Nov 2023 11:03:11 +0000

This article explains how to download multiple files using ASP.NET Core MVC. First, create a table to store file information, such as filename and source path.

Here is the following step-by-step guide to download multiple files in ASP.NET Core MVC:

Create an Asp.NET Core MVC Project

Assuming you have Visual Studio 2019 or Visual Studio 2022 installed, follow these steps to create a new ASP.NET Core Project.

Open the visual studio (IDE).
Click on the “Create new project” option.
Choose “ASP.NET Core Web Application” from the list of available templates.
Click the Next button.
Then configure a new project, and specify the name and location of your project.
Click the “Next” button.
Then select .Net Core as the runtime and choose the version from the dropdown list at the top.
Make sure to uncheck the checkboxes for “Enable Docker Support” and “Configure for HTTPS” since we won’t be using authentication.
Click the “Create” button

Create a Model

namespace WebApplication_Download_Files.Models
{
    public class FileAssets
    {
        public Guid Id { get; set; }
        public string Filename { get; set; } = null;
        public string FileUrls { get; set; } = null;

        public FileAssets()
        {
            Id = Guid.NewGuid();
        }
    }
}

Configure Database Connection

Open the Program.cs file and add the following code snippet.

using Microsoft.EntityFrameworkCore;
using Microsoft.EntityFrameworkCore.SqlServer;
using Microsoft.Extensions.Configuration;
using WebApplication_Download_Files.Models;


var builder = WebApplication.CreateBuilder(args);

//Connection string
// "connectionstr": //"Server=localhost;Database=inventoryDb;Encrypt=False;Trusted_Connection=True;"

builder.Services.AddDbContext(opt=> opt.UseSqlServer(builder.Configuration.GetConnectionString("connectionstr")));
// Add services to the container.
builder.Services.AddControllersWithViews();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
}
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.Run();

Migration

Run the following command in the package manager console.

add-migration 'Init-create'
update-database

Create Controller

Open the HomeController.cs file. Create a new method named “downloadAll”

using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using System.Diagnostics;
using System.Text;
using WebApplication_Download_Files.Models;
using Microsoft.AspNetCore.Hosting;
using System.IO.Compression;

namespace WebApplication_Download_Files.Controllers
{
    public class HomeController : Controller
    {
        
        private readonly AppDbContext _context;
        private readonly IWebHostEnvironment _env;

        public HomeController(AppDbContext context, IWebHostEnvironment env)
        {
           
            _context = context;
            _env = env;
         
        }

        public async Task Index()
        {
            return _context.FileAssets != null ?
                        View(await _context.FileAssets.ToListAsync()) :
                        Problem("Entity set 'AppDbContext.FileAssets'  is null.");

        }

        public IActionResult downloadAll()
        {
            var ZipFile = $"docFile-{DateTime.Now.ToString("yyyy_MM-dd-HH_mm_ss")}.zip";

            using (var memorystream = new MemoryStream())
            {
                using(var archieve = new ZipArchive(memorystream,ZipArchiveMode.Create,true))
                {
                    _context.FileAssets.ToList().ForEach(files=>
                    {
                        var zipentry = archieve.CreateEntry(files.Filename);
                        var stringpath = Path.Combine(this._env.WebRootPath +  files.FileUrls);
                        byte[] bytes = System.IO.File.ReadAllBytes(stringpath);
                        using (var filems = new MemoryStream(bytes))
                            using(var openstream = zipentry.Open())
                        {
                            filems.CopyTo(openstream);
                        }

                    });
                }
                return File(memorystream.ToArray(), "application/zip", ZipFile);
            }
        }
    }
}

Create View

Open the Index.cshtml file and update the following code:

@model IEnumerable
@{
    ViewData["Title"] = "Home Page";
}


    File List to Download


    
            @foreach (var item in Model)
            {
                
            }
        
        
            
                
                    @Html.DisplayNameFor(model => model.Filename)
                
                
                    Action
                
                
            
        
        
                    
                        @Html.DisplayFor(modelItem => item.Filename)
                    
                    
                    
                        @Html.ActionLink("Download File","download",new{Filename = item.FileUrls  } )                        
                    

                
    
    Download All

@Html.DisplayNameFor(model => model.Filename)	Action
@Html.DisplayFor(modelItem => item.Filename)	@Html.ActionLink("Download File","download",new{Filename = item.FileUrls } )

output:

.NET CORS | How to Enable CORS in ASP.NET CORE WEB API

Ahmed — Sat, 28 Oct 2023 07:37:36 +0000

What is CORS

CORS stands for Cross-Origin Resource Sharing. It is an HTTP protocol that allows web applications to access resources hosted on different domains. In this article, we will learn How to Enable CORS in ASP.NET Core Web API.

How to Enable CORS

Enabling CORS in ASP.NET Core Web API is quite easy, as the platform comes with built-in features to support that.

Enable CORS Policy with Specific Origin

You need to configure CORS in the Program.cs file, if you are using below .NET 6 then configure CORS in the startup.cs file.

Open the Program.cs file in your editor and modify it. Here is how to enable CORS in ASP.NET Core.

   Services.AddCors(Opt =>
       {
         Opt.AddPolicy("CorsPolicy", policy =>
        {
             policy.AllowAnyHeader().AllowAnyMethod().WithOrigins("https://localhost:4200");
                 });
            });

app.UseCors("CorsPolicy");

Above code example, we are using the WithOrigins method, which accepts a list of string URIs as parameters, and allows you to specify multiple origins for a single CORS Policy.

Enable CORS Policy with any Origin

With this CORS policy, we are grating access to all origins “AllowAnyOrigin”, allowing any request header “AllowAnyHeader”, and permitting any HTTP method “AllowAnyMethod”

 Services.AddCors(Opt =>
       {
         Opt.AddPolicy("CorsPolicy", policy =>
        {
             policy.AllowAnyOrigin().
                    AllowAnyHeader().
                    AllowAnyMethod(); 
                 });
            });

app.UseCors("CorsPolicy");

CORS Policy Options

Here are the CORS policy options you can use to configure your ASP.NET Core WEB API:

AllowAnyOrigin: To accept requests from any domain

WithOrigins: To allow requests only from specific domains.

WithMethods: to specify which HTTP methods are allowed in the request.

AllowAnyMethod: To allow any HTTP method (GET, POST, PUT, etc.) in the request.

AllowAnyHeader: To accept any HTTP request header.

WithHeaders: To specify which HTTP headers are allowed in the request.

WithExposedHeaders: To specify which headers are safe to expose to the API of a CORS API specification.

AllowCredentials: To allow requests with credentials.

Conclusion

In this article, we have shown you how to enable CORS(Cross-Origin Resource Sharing) in an ASP.NET Core Web API. CORS is essential for allowing web applications hosted in different domains to access your API securely.

See More Articles:

Difference between IEnumerable and IQueryable in C#

The post .NET CORS | How to Enable CORS in ASP.NET CORE WEB API appeared first on Tech Insights.

How to Create CRUD operation using Angular and ASP.NET Core Web API

Ahmed — Wed, 18 Oct 2023 12:14:27 +0000

In this article, we will learn How to Create CRUD operation using Angular and ASP.NET Core Web API. To demonstrate the topic, we will build a project from scratch.

We will take a systematic step-by-step approach, applying the principles of clean architecture, to develop CRUD operation using Angular and ASP.NET Core Web API

Prerequisites

Install .NET SDK 7
VS Code or Visual Studio
Angular 16

ASP.NET Web API Project

Create Web API

dotnet new project_Name

Create Classlib project

# Create Domain layer
dotnet new classlib -n Domain
# Create Application layer
dotnet new classlib -n Application
# Create Infrastructure layer
dotnet new classlib -n Infrastructure

Install Packages

Install packages in the Infrastructure project

Microsoft.EntityFrameworkCore
Microsoft.EntityFrameworkCore.Design
Microsoft.EntityFrameworkCore.Sqlite
Microsoft.EntityFrameworkCore.Tools

Reference the projects

Now that we understand the principles of Clean Architecture, let’s see how we can reference it in an ASP.NET Core Web API project

Application Layer

Infrastructure Layer

Web API

Create Entities in the Domain Layer

path:/Domain/Entities

Employee.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace Domain.Entities
{
    public class Employee : BaseEntity
    {        
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Street {get;set;}
        public string City { get; set; }
        public string State { get; set; }  
    }
}

BaseEntity.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace Domain.Entities
{
    public class BaseEntity
    {
        public BaseEntity()
        {
            
            CreateAt = DateTime.UtcNow;
        }
        public int Id { get; set; }
        public DateTime CreateAt { get; set; }
    }
}

Create an Interface in the Application Layer

path:/Application/Interfaces

IEmployeeRepo.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Domain.Entities;
 
namespace Application.Interfaces
{
    public interface IEmployeeRepo
    {
        Task> GetEmployeeListAsync();
        Employee GetEmployeeById(int id);
        Employee CreateEmployee(Employee employee);
        Employee UpdateEmployee(Employee employee);
        void DeleteEmployee(int id);

    }
}

Create DB Context, Concrete Class, and Services in the Infrastructure Layer

path:/Infrastructure/Data

AppDbContext.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Domain.Entities;
using Microsoft.EntityFrameworkCore;

namespace Infrastructure.Data
{
    public class AppDbContext : DbContext
    {

        public AppDbContext(DbContextOptions options) : base(options)
        {
        }
        public DbSet Employees { get; set;}
    }
}

path:/Infrastructure/Repository

EmployeeRepository.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Application.Interfaces;
using Domain.Entities;
using Infrastructure.Data;
using Microsoft.EntityFrameworkCore;

namespace Infrastructure.Repository
{
    public class EmployeeRepository : IEmployeeRepo
    {

        private readonly AppDbContext _context;

        public EmployeeRepository(AppDbContext context)
        {
            _context = context;
        }
        public Employee CreateEmployee(Employee employees)
        {
            _context.Employees.Add(employees);
            var result = _context.SaveChangesAsync();
            if (result.IsCompletedSuccessfully) { return employees; }

            return null;
        }

        public Employee GetEmployeeById(int id)
        {
            return _context.Employees.FindAsync(id).Result;
        }

        public async Task> GetEmployeeListAsync()
        {
            return await _context.Employees.ToListAsync();

        }

        public Employee UpdateEmployee(Employee employee)
        {
            this._context.Employees.Update(employee);
            _context.SaveChanges();
            return employee;
        }

        public void DeleteEmployee(int id)
        {
            var result = GetEmployeeById(id);
            _context.Employees.Remove(result);
            _context.SaveChanges();

        }
    }
}

path:/Infrastructure/Services

ServicesConfig.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Application.Interfaces;
using Infrastructure.Data;
using Infrastructure.Repository;
using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;

namespace Infrastructure.Services
{
    public static class ServicesConfig
    {
        public static IServiceCollection AddApplication(this IServiceCollection services, IConfiguration config)
        {

            services.AddDbContext(opt =>
            {
                opt.UseSqlite(config.GetConnectionString("connection"));
            });

            services.AddScoped();

           
            return services;
        }
    }
}

Update Program.cs

using Infrastructure.Services;
var builder = WebApplication.CreateBuilder(args);

// Add services to the container.

builder.Services.AddControllers();
// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

builder.Services.AddApplication(builder.Configuration);
//builder.Services.AddAutoMapper(AppDomain.CurrentDomain.GetAssemblies());

builder.Services.AddCors(Opt => Opt.AddDefaultPolicy(opt =>
                {
                    opt.AllowAnyHeader().AllowAnyMethod().AllowAnyOrigin();
                }));

var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}

app.UseHttpsRedirection();


app.UseAuthorization();

app.MapControllers();
app.UseCors();
app.Run();

Migration

dotnet ef migrations add  initialcreate -p .\Infrastructure\ -s API  -o Migrations

dotnet ef database update -p Infrastructure -s API

Create Account Controller

EmployeeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Application.Interfaces;
using Domain.Entities;
using Microsoft.AspNetCore.Mvc;

namespace API.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class EmployeeController : ControllerBase
    {
        private readonly IEmployeeRepo _employeeRepo;


        public EmployeeController(IEmployeeRepo employeeRepo)
        {
            _employeeRepo = employeeRepo;

        }
        [HttpGet]
        public async Task> GetEmployees()
        {

            return await this._employeeRepo.GetEmployeeListAsync();
        }
        [HttpPost]
        public ActionResult EmployeePost(Employee employees)
        {

            var result = _employeeRepo.CreateEmployee(employees);
            return Ok(result);
        }

        [HttpPut]
        public ActionResult EmployeePut(Employee employee)
        {


            var result = _employeeRepo.UpdateEmployee(employee);
            return Ok(result);
        }

        [HttpGet("{id}")]
        public Employee EmployeeGetById(int id)
        {
            var result = this._employeeRepo.GetEmployeeById(id);
            return result;
        }
        [HttpDelete("{id}")]
        public ActionResult DeleteEmployee(int id)
        {
            this._employeeRepo.DeleteEmployee(id);
            return Ok("Employee Deleted");
        }
    }
}

Create Client-side Angular Project

To create the client-side application, we’ll be using Angular. This section will guide you through setting up an Angular project and creating the necessary components.

# Create a client side Application
ng new project_name
# Navigate the inside project folder
cd project_name

# open the VS Code
code .

# Run the App
ng serve

Create Module | Services | Routing | Shared Module

# Create a module
ng   g  m employee/employee --flat

# Create a Routing
ng   g  m employee/employee-routing --flat

# Create a Service
 ng   g  s employee/employee  --flat
# Shared module
Employee.ts

Update Routing

import { NgModule, createComponent } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule   } from '@angular/router';
import { ReadComponent } from './read/read.component';
import { UpdateComponent } from './update/update.component';
import { DeleteComponent } from './delete/delete.component';
import { CreateComponent } from './create/create.component';


const routes : Routes=[

  {path:'', component:ReadComponent},
  {path:'Create', component:CreateComponent}, 
  {path:'update/:id', component:UpdateComponent},
  {path:'delete/:id', component:DeleteComponent},

]

@NgModule({
  declarations: [],
  imports: [
    RouterModule.forChild(routes),
    CommonModule
  ],
  exports:[
    RouterModule
  ]
})
export class EmployeeRoutingModule { }

Update Module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CreateComponent } from './create/create.component';
import { UpdateComponent } from './update/update.component';
import { ReadComponent } from './read/read.component';
import { DeleteComponent } from './delete/delete.component';
import { EmployeeRoutingModule } from './employee-routing.module';
import { ReactiveFormsModule } from '@angular/forms';



@NgModule({
  declarations: [
    CreateComponent,
    UpdateComponent,
    ReadComponent,
    DeleteComponent
  ],
  imports: [
    EmployeeRoutingModule,
    ReactiveFormsModule,
    CommonModule
  ]
})
export class EmployeeModule { }

Create Shared Module

Employee.ts

export interface Employee {
    id : number,
    firstName : string,
    lastName : string,
    street : string,
    city : string,
    state : string,
    createAt : Date
}

Update Service

import { Injectable } from '@angular/core';
import { Router, Routes } from '@angular/router';
import { HttpClient } from '@angular/common/http'
import { Employee } from '../shared/modules/Employee';
import { map } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class EmployeeService {
  baseUrl = 'https://localhost:8080/api';
   
  constructor(private http : HttpClient ,private router : Router ) { }

  CreateEmployee(values:any){
      return this.http.post(this.baseUrl + '/Employee/',values).pipe(
        map(employee=> {
          alert("Employee Created Successfully...!" + employee);
        })
      )
  }

  GetEmployee(){
    return this.http.get(this.baseUrl + '/Employee/')
  }

  GetEmployeeById(id:number){
    return this.http.get(this.baseUrl + '/Employee/'+ id)
  }

  UpdateEmployee(values:any){

    return this.http.put(this.baseUrl + '/Employee/', values).pipe(
      map(emp=>{
        alert("Employee Updated Successfully...!" + emp);
      })
    )
  }
  RemoveEmployee(id:number){
    return this.http.delete(this.baseUrl + '/Employee/' + id);

  }
}

Create Component

# Create a component
ng  g c Employee/Read --skip-tests
ng  g c Employee/Create--skip-tests
ng  g c Employee/Update --skip-tests
ng  g c Employee/Delete --skip-tests

Update Read Component

read.component.ts

import { Component, OnInit } from '@angular/core';
import { EmployeeService } from '../employee.service';
import { ActivatedRoute } from '@angular/router';
import { Employee } from 'src/app/shared/modules/Employee';

@Component({
  selector: 'app-read',
  templateUrl: './read.component.html',
  styleUrls: ['./read.component.scss']
})
export class ReadComponent implements OnInit {
  employee? :any;

 constructor(private employeeServices: EmployeeService, private router:ActivatedRoute){}

  ngOnInit(): void {
    this.loadEmployee();
  }

  loadEmployee(){
    this.employeeServices.GetEmployee().subscribe({
       next : emp => this.employee=emp,
       error: error=> alert(error)       
    });
  }
}

read.component.html




    
    Id
    First Name
    Last Name
    Street
    City
    State
    Created At
    Action
    


    
        {{emp.id}}
        {{emp.firstName}}
        {{emp.lastName}}
        {{emp.street}}
        {{emp.city}}
        {{emp.state}}
        {{emp.createAt}}

Id	First Name	Last Name	Street	City	State	Created At	Action
{{emp.id}}	{{emp.firstName}}	{{emp.lastName}}	{{emp.street}}	{{emp.city}}	{{emp.state}}	{{emp.createAt}}

Update Create Component

create.component.ts

import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { EmployeeService } from '../employee.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-create',
  templateUrl: './create.component.html',
  styleUrls: ['./create.component.scss']
})
export class CreateComponent {
  title : string ='Employee Registeration Form';

  EmpForm = new FormGroup({
    firstName : new FormControl('',Validators.required),
    lastName: new FormControl('',Validators.required),
    street: new FormControl('',Validators.required),
    city: new FormControl('',Validators.required),
    state: new FormControl('',Validators.required) 
  });

   constructor(private employeeService: EmployeeService, private router: Router){}

  onSubmit(){
    this.employeeService.CreateEmployee(this.EmpForm.value).subscribe({
      next:()=> this.router.navigateByUrl('/'),
      error:()=> alert("Please check ...!") 
    })
    
  }
}

create.component.html

Update Edit Component

update.component.ts

import { Component, OnInit } from '@angular/core';
import { EmployeeService } from '../employee.service';
import { ActivatedRoute, Router } from '@angular/router';
import { FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-update',
  templateUrl: './update.component.html',
  styleUrls: ['./update.component.scss']
})
export class UpdateComponent implements OnInit{
employee?:any;
id?:any; 



constructor(private employeeService:EmployeeService, private router:ActivatedRoute,private route:Router)
{
  this.id = this.router.snapshot.paramMap.get('id');
}


EmpForm = new FormGroup({
  firstName : new FormControl('',Validators.required),
  lastName: new FormControl('',Validators.required),
  street: new FormControl('',Validators.required),
  city: new FormControl('',Validators.required),
  state: new FormControl('',Validators.required),
  id: new FormControl('',Validators.required) 
});
  ngOnInit(): void {
     this.getEmployee();
  }
getEmployee(){

  if(this.id) this.employeeService.GetEmployeeById(this.id).subscribe({
    next : emp => this.employee = emp,
    error : error=>alert(error)
  });
}
onSubmit(){
   this.employeeService.UpdateEmployee(this.EmpForm.value).subscribe({
    next:()=>this.route.navigateByUrl('/'),
    error:()=>alert("Please check...!")
   })
}
}

update.component.html

update works!

Update Delete Component

delete.component.ts

import { Component, OnInit } from '@angular/core';
import { EmployeeService } from '../employee.service';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-delete',
  templateUrl: './delete.component.html',
  styleUrls: ['./delete.component.scss']
})
export class DeleteComponent implements OnInit {
employee?:any;
id?:any; 

constructor(private employeeService:EmployeeService, private router : ActivatedRoute, private route:Router)
{ 
    this.id =this.router.snapshot.paramMap.get('id');
} 
  ngOnInit(): void {    
    this.getEmployee();
  }
  getEmployee(){
   
    if(this.id) this.employeeService.GetEmployeeById(this.id).subscribe({
      next : emp => this.employee = emp,
      error : error=>alert(error)
    });
  }
  onSubmit(){   
      this.employeeService.RemoveEmployee(this.id).subscribe({
      next : ()=>this.route.navigateByUrl('/'),
      error :()=>alert("Please check..!")
     
    });
  } 
}

delete.component.html

Root App Updating

Update app-routing. module

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {path:'',loadChildren:()=>import('./Employee/employee.module').then(emp=>emp.EmployeeModule)},
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Update app.component.html

Get List

Update record

Delete Record

The post How to Create CRUD operation using Angular and ASP.NET Core Web API appeared first on Tech Insights.

.NET Core Archives - Tech Insights

How to download multiple files in ASP.NET Core MVC

Create an Asp.NET Core MVC Project

Create a Model

Configure Database Connection

Migration

Create Controller

Create View

File List to Download

.NET CORS | How to Enable CORS in ASP.NET CORE WEB API

What is CORS

How to Enable CORS

Enable CORS Policy with Specific Origin

Enable CORS Policy with any Origin

CORS Policy Options

How to Create CRUD operation using Angular and ASP.NET Core Web API

ASP.NET Web API Project

Create Web API

Create Classlib project

Install Packages

Install packages in the Infrastructure project

Reference the projects

Application Layer

Infrastructure Layer

Web API

Create Entities in the Domain Layer

Create an Interface in the Application Layer

Create DB Context, Concrete Class, and Services in the Infrastructure Layer

Update Program.cs

Migration

Create Account Controller

Create Client-side Angular Project

Create Module | Services | Routing | Shared Module

Update Routing

Update Module

Create Shared Module

Update Service

Create Component

Update Read Component

read.component.ts

read.component.html

Update Create Component

create.component.ts

create.component.html

Employee

Update Edit Component

update.component.ts

update.component.html

Update Delete Component

delete.component.ts

delete.component.html

Root App Updating

Update app-routing. module

Update app.component.html

Add Employee