Angular 17 basic CRUD Operation using ASP.NET WEB API

0

 Angular 17 basic CRUP Operation using ASP.NET WEB API:-

First create Web API in ASP.NET CORE MVC:

here i have created student model class and create API using code first approach.

using System.ComponentModel.DataAnnotations;


namespace WebApplication2.Models

{

    public class Student

    {

        [Key]

        public long rno { get; set; }

        public string? name { get; set; }

    }

}


Code of APIController

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using System.Linq.Expressions;
using WebApplication2.Models;

namespace WebApplication2.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class StudentsController : ControllerBase
    {
        private readonly StudentDbContext _db;
        public StudentsController(StudentDbContext _db) {
            this._db = _db;

        }
        [HttpGet]
          public async Task<ActionResult<IEnumerable<Student>>> GetStudents()
            {
            return await _db.Students.ToListAsync();
            }
        [HttpGet("{id}")]
        public async Task<ActionResult<Student>> GetStudentByRno(long id)
        {
            var studata= await _db.Students.FindAsync(id);
            if(studata==null)
            {
                return NotFound();
            }
            return studata;
        }
        [HttpPost]
        public async Task<ActionResult> AddStudents([FromBody]Student  o)
        {
            try
            {

                //  _db.Students.Add(o);
                _db.Add(o);
                await _db.SaveChangesAsync();

                    return Ok(new { msg = "success" });
                
            }
            catch(Exception ex)
            {
                return Ok(new { msg = ex.Message.ToString() });
            }
          
        }

        [HttpPut]
        public async Task<ActionResult> UpdateStudents([FromBody] Student o)
        {
            try
            {
               _db.Entry(o).State = EntityState.Modified;

                await _db.SaveChangesAsync();
                return Ok(new { msg = "success" });
            }
            catch (Exception ex)
            {
                return Ok(new { msg = "fail" });
            }

        }
        [HttpPatch]
        public async Task<ActionResult> PatchStudents([FromBody] Student o)
        {
            try
            {
                _db.Entry(o).State = EntityState.Modified;

                await _db.SaveChangesAsync();
                return Ok(new { msg = "success" });
            }
            catch (Exception ex)
            {
                return Ok(new { msg = "fail" });
            }

        }
        [HttpDelete("{id:long}")]
        public async Task<IActionResult> DeleteStudents(long id)
        {
            try
            {
                var o = await _db.Students.FindAsync(id);
                _db.Students.Remove(o);
                await _db.SaveChangesAsync();
                return Ok(new { msg = "success" });
            }
            catch (Exception ex)
            {
                return Ok(new { msg = "fail" });
            }

        }
    }
}


Now create custom Angular Service to define the all Crud operation based functionality.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
  providedIn: 'root'
})
export class PostService {
//  private url = 'http://jsonplaceholder.typicode.com/posts';
  private url='https://localhost:7122/api/Students';
  private url1='https://localhost:7122/api/Students';
  private url2='https://localhost:7122/api/Students';
  constructor(private httpClient: HttpClient) { }
  findPosts(): Observable<any> {
   
    //alert(id);
    return this.httpClient.get('https://localhost:7122/api/Students/2');
  }
  getPosts(): Observable<any>{
    return this.httpClient.get(this.url);
  }
  addPosts(data: any): Observable<any> {
    return this.httpClient.post<any>(this.url1,data);
  }
  updatePosts(data: any): Observable<any> {
 
    return this.httpClient.put<any>(this.url2,data);
  }
  deletePosts(id:number): Observable<any> {
  // this.url2 = this.url2+"/"+id;
    return this.httpClient.delete<any>(this.url2+"/"+id);
  }
}


Inject PostService under Angular Component

I have created AccessUrlCompopnent and write following code under Angular Component class and
Template Page

Code of Component class for basic crud operation

import { Component } from '@angular/core';
import { PostService } from '../post.service';

@Component({
  selector: 'app-access-url',
  templateUrl: './access-url.component.html',
  styleUrl: './access-url.component.css'
})
export class AccessUrlComponent {
  posts:any;
  postdata:any;
 
  constructor(private service:PostService) {}

  ngOnInit() {
   this.postdata=null;
   
}
findPosts()
{
  this.service.findPosts().subscribe(response => {
        this.postdata = response;
       // console.log(response);
      });
}
viewData()
{
  this.service.getPosts().subscribe(response => {
        this.posts = response;
        console.log(response);
      });
}
submitData()
{
  const dataToSend = {name:'shahshi'}; // Replace with your data
    this.service.addPosts(dataToSend).subscribe(
      (response) => {
        console.log('Post successful:', response);
        // Handle the response as needed
      },
      (error) => {
        console.error('Error:', error);
        // Handle errors
      }
    );
}
submitData1()
{
  const dataToSend = {rno:2,name:'updated data'}; // Replace with your data
    this.service.updatePosts(dataToSend).subscribe(
      (response) => {
        console.log('Edit successful:', response);
        // Handle the response as needed
      },
      (error) => {
        console.error('Error:', error);
        // Handle errors
      }
    );
}
submitData2()
{
 this.service.deletePosts(4).subscribe(
      (response) => {
        console.log('Delete successful:', response);
        // Handle the response as needed
      },
      (error) => {
        console.error('Error:', error);
        // Handle errors
      }
    );
}
}

Code of Template Page:-

<p>access-url works!</p>
<ul class="list-group">
    <li *ngFor="let post of posts" class="list-group-item">
        {{ post.rno }}   ||  {{ post.name }}
    </li>
  </ul>

  <div *ngIf="postdata !== null">
   
  Find API Data is
  <b>{{postdata.rno}} || {{postdata.name}}</b>
 
</div>
  <input type="button" value="Find" (click)="findPosts()" />
  <br/>
  <input type="button" value="View" (click)="viewData()" />
  <br/>
  <input type="button" value="Insert" (click)="submitData()" />
  <br/>
  <input type="button" value="Update" (click)="submitData1()" />
  <br />
  <input type="button" value="Delete" (click)="submitData2()" />




Post a Comment

0Comments

POST Answer of Questions and ASK to Doubt

Post a Comment (0)