Home Angular Angular with Asp.Net Core Full Stack

Angular with Asp.Net Core Full Stack

14 min read
0
0
3,434

This tutorial will teach you how to make Crud Application using Asp.net Core Entity Framework with Angular Frontend application and Sql Server Database using Api access Crud application.this tutorial explains the Code First approach.

Install the required Dependencies

Microsoft.EntityFrameworkCore.Design
Microsoft.EntityFrameworkCore.SqlServer
Microsoft.EntityFrameworkCore.Tools
Newtonsoft.Json

First Step Select the Model Folder Right Click and Create the Class Student.cs

Student.cs

[Key]
public int id { get; set; }
public string stname { get; set; }
public string course { get; set;

StudentDbContext

using Microsoft.EntityFrameworkCore;

namespace ReactAspCrud.Models
{
    public class StudentDbContext : DbContext
    {
        public StudentDbContext(DbContextOptions<StudentDbContext> options) : base(options)
        {
        }
        public DbSet<Student> Student { get;set; }

        protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
        {
            optionsBuilder.UseSqlServer("Data Source=.; Initial Catalog=lbs; User Id=sa; password=123; TrustServerCertificate= True");
        }
    }
}

Program.cs

Add these Context inside the Program.cs  file

Establish the Database Connection

builder.Services.AddDbContext<StudentDbContext>(options =>
options.UseSqlServer(builder.Configuration.GetConnectionString(“StudentDbContext”)));

Connect the WebApi for Allow the Permissions

app.UseCors(policy => policy.AllowAnyHeader()
.AllowAnyMethod()
.SetIsOriginAllowed(origin => true)
.AllowCredentials());

I attached the full code of Program.cs file where you going paste the above code.

using Microsoft.EntityFrameworkCore;
using ReactAspCrud.Models;

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.AddDbContext<StudentDbContext>(options =>
   options.UseSqlServer(builder.Configuration.GetConnectionString("StudentDbContext")));

var app = builder.Build();
app.UseCors(policy => policy.AllowAnyHeader()
                            .AllowAnyMethod()
                            .SetIsOriginAllowed(origin => true)
                            .AllowCredentials());

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

appsettings.json

Paste the ConnectionStrings

"AllowedHosts": "*",
  "ConnectionStrings": {
    "StudentDbContext": "Server=.;Database=lbs;Trusted_Connection=True;MultipleActiveResultSets=true"
  }

After that Go to Tools->NuGet Package Manager->Package Manager Console

then you can get the console . you have add-migration initial

then migration files has been created.

after that you have run the command as

    Load More Related Articles
    Load More By admin
    Load More In Angular

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    Check Also

    Build Crud App with Laravel 11 and Vue.js

    In this tutorial will teach Vue Laravel 10 CRUD using Vite step by step. Laravel  10 CRUD …