.NET Core Web API with an Angular Frontend in Docker with Jenkins

If you’ve been following my blog in the last few years, you might have noticed that I kind of like testing & automation. Mostly, I’m working with .NET and TypeScript in cloud and backend services, so plain old integration testing gets me pretty far. Recently, however, I’ve done a bit more on the frontend side and I wasn’t happy with the way I setup my testing.

#.net #web #api #docker #jenkins

What is GEEK

Buddha Community

jQuery Ajax CRUD in ASP.NET Core MVC with Modal Popup

In this article, we’ll discuss how to use jQuery Ajax for ASP.NET Core MVC CRUD Operations using Bootstrap Modal. With jQuery Ajax, we can make HTTP request to controller action methods without reloading the entire page, like a single page application.

To demonstrate CRUD operations – insert, update, delete and retrieve, the project will be dealing with details of a normal bank transaction. GitHub repository for this demo project : https://bit.ly/33KTJAu.

Sub-topics discussed :

• Form design for insert and update operation.
• Display forms in modal popup dialog.
• Form post using jQuery Ajax.
• Implement MVC CRUD operations with jQuery Ajax.
• Loading spinner in .NET Core MVC.
• Prevent direct access to MVC action method.

Create ASP.NET Core MVC Project

In Visual Studio 2019, Go to File > New > Project (Ctrl + Shift + N).

From new project window, Select Asp.Net Core Web Application_._

Once you provide the project name and location. Select Web Application(Model-View-Controller) and uncheck HTTPS Configuration. Above steps will create a brand new ASP.NET Core MVC project.

Setup a Database

Let’s create a database for this application using Entity Framework Core. For that we’ve to install corresponding NuGet Packages. Right click on project from solution explorer, select Manage NuGet Packages_,_ From browse tab, install following 3 packages.

Now let’s define DB model class file – /Models/TransactionModel.cs.

public class TransactionModel
{
    [Key]
    public int TransactionId { get; set; }

    [Column(TypeName ="nvarchar(12)")]
    [DisplayName("Account Number")]
    [Required(ErrorMessage ="This Field is required.")]
    [MaxLength(12,ErrorMessage ="Maximum 12 characters only")]
    public string AccountNumber { get; set; }

    [Column(TypeName ="nvarchar(100)")]
    [DisplayName("Beneficiary Name")]
    [Required(ErrorMessage = "This Field is required.")]
    public string BeneficiaryName { get; set; }

    [Column(TypeName ="nvarchar(100)")]
    [DisplayName("Bank Name")]
    [Required(ErrorMessage = "This Field is required.")]
    public string BankName { get; set; }

    [Column(TypeName ="nvarchar(11)")]
    [DisplayName("SWIFT Code")]
    [Required(ErrorMessage = "This Field is required.")]
    [MaxLength(11)]
    public string SWIFTCode { get; set; }

    [DisplayName("Amount")]
    [Required(ErrorMessage = "This Field is required.")]
    public int Amount { get; set; }

    [DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}")]
    public DateTime Date { get; set; }
}

C#Copy

Here we’ve defined model properties for the transaction with proper validation. Now let’s define  DbContextclass for EF Core.

#asp.net core article #asp.net core #add loading spinner in asp.net core #asp.net core crud without reloading #asp.net core jquery ajax form #asp.net core modal dialog #asp.net core mvc crud using jquery ajax #asp.net core mvc with jquery and ajax #asp.net core popup window #bootstrap modal popup in asp.net core mvc. bootstrap modal popup in asp.net core #delete and viewall in asp.net core #jquery ajax - insert #jquery ajax form post #modal popup dialog in asp.net core #no direct access action method #update #validation in modal popup

.NET Core Web API with an Angular Frontend in Docker with Jenkins

If you’ve been following my blog in the last few years, you might have noticed that I kind of like testing & automation. Mostly, I’m working with .NET and TypeScript in cloud and backend services, so plain old integration testing gets me pretty far. Recently, however, I’ve done a bit more on the frontend side and I wasn’t happy with the way I setup my testing.

#.net #web #api #docker #jenkins

Securing Web API using JWT|WEB API CRUD|Use Swagger|Use Token in .NET Core MVC Application

Creating a JWT Authentication Web API. How to use Token in ASP.NET Core MVC Application.
✔ Test API using SWAGGER & Postman.
✔ How to pass Bearer Token using Swagger.
✔ Complete Web API CRUD.
✔ Call Web API from ASP.NET Core MVC Controller.
✔ Keep token in Session.

✅ Download Source Code: https://payhip.com/b/2XfI

0:00 | Create Web API CRUD Using EF Core
8:23 | How to use Swagger
14:01 | How to use JWT
30:54 | Pass Bearer token using Swagger
32:53 | Test API using Postman
34:27 | Login Demo, Calling API from MVC Controller & use Token

👉FOLLOW US:
On Facebook: https://www.facebook.com/ashproghelp
On Blog: http://ashproghelp.blogspot.com

👉ASP.NET Core Tutorial Playlist:

https://www.youtube.com/playlist?list=PLprnOV9ZLFnscrKZoHtAJvl1hsP_rpyIH

👉ASP.NET Core WEB API Playlist:

https://www.youtube.com/playlist?list=PLprnOV9ZLFnsR9fB624xD8uk0tIOyByl4

👉Blazor Tutorial Playlist:

https://www.youtube.com/playlist?list=PLprnOV9ZLFnt_W3qsBAgxvwgQ4NBNJmvx

👉ASP.NET Core Authentication Playlist:

https://www.youtube.com/playlist?list=PLprnOV9ZLFnv0ZYY0bJT2LMukEN634fiD

👉SignalR Tutorials Playlist:

https://www.youtube.com/playlist?list=PLprnOV9ZLFnuKYOOXw_NE9RM5UcPmM-yp

👉KENDO UI Tutorials (WEB DEVELOPMENT) Playlist:

https://www.youtube.com/playlist?list=PLprnOV9ZLFns32TRnvTr7FgrPQH8kMog6

👉KENDO UI in ASP.NET Core Playlist:

https://www.youtube.com/playlist?list=PLprnOV9ZLFnsoYCrjDuNmWxmWm5WRBXY1

👉Files or Image Upload Playlist:

https://www.youtube.com/playlist?list=PLprnOV9ZLFnsFxlwKs-tOs13kqpakWI9e

👉==========AMCHARTS GRAPH JQUERY PLAYLIST==========
https://www.youtube.com/playlist?list=PLprnOV9ZLFnsGDKm_5W__HErKwGl3H1wu

👉=================RDLC Report PlayList===============
https://www.youtube.com/playlist?list=PLprnOV9ZLFnswiKegU95eTyu7nc_YSZmT

👉=================RDLC PRINT===============
How to print without showing report viewer in RDLC report - C#
https://www.youtube.com/watch?v=uTzwk6zBdQs

👉=================RDLC & Crystal Report===============
https://www.youtube.com/playlist?list=PLprnOV9ZLFnsTnvqGApmsCJqdOi15MVdE

👉=================SQL Server Tutorials (Series)===============
https://www.youtube.com/playlist?list=PLprnOV9ZLFntdSaPFBcMMc89XnH8gfRNy

👉=========TEAM FOUNDATION SERVER=============
TFS source control for beginners:
https://www.youtube.com/watch?v=AjhNxCUTEio

👉==========ANDROID APP DEVELOPMENT============
Quick Learn Android full basic in 45 minutes:
https://www.youtube.com/playlist?list=PLprnOV9ZLFntpdZb7cMvpHGE4YBzPDZJY

👉=================C# Basic=============================
https://www.youtube.com/playlist?list=PLprnOV9ZLFnvpVNZT6WFJeUAuVBNny9Pp

#JWTAuthentication #WebAPICrud #Swagger #UseJWTToken

#web api #jwt #web api #swagger #.net core mvc #.net core

Paging in .NET Core Web API

How to implement Pagination in .NET Core Web API.
Paging in .NET Core Web API.
👉FOLLOW US:
On Facebook: https://www.facebook.com/ashproghelp
On Blog: http://ashproghelp.blogspot.com
Download Source Code: https://payhip.com/b/4v86

👉ASP.NET Core Tutorial Playlist:

https://www.youtube.com/playlist?list=PLprnOV9ZLFnscrKZoHtAJvl1hsP_rpyIH

👉ASP.NET Core WEB API Playlist:

https://www.youtube.com/playlist?list=PLprnOV9ZLFnsR9fB624xD8uk0tIOyByl4

👉Blazor Tutorial Playlist:

https://www.youtube.com/playlist?list=PLprnOV9ZLFnt_W3qsBAgxvwgQ4NBNJmvx

👉ASP.NET Core Authentication Playlist:

https://www.youtube.com/playlist?list=PLprnOV9ZLFnv0ZYY0bJT2LMukEN634fiD

👉SignalR Tutorials Playlist:

https://www.youtube.com/playlist?list=PLprnOV9ZLFnuKYOOXw_NE9RM5UcPmM-yp

👉KENDO UI Tutorials (WEB DEVELOPMENT) Playlist:

https://www.youtube.com/playlist?list=PLprnOV9ZLFns32TRnvTr7FgrPQH8kMog6

👉KENDO UI in ASP.NET Core Playlist:

https://www.youtube.com/playlist?list=PLprnOV9ZLFnsoYCrjDuNmWxmWm5WRBXY1

👉Files or Image Upload Playlist:

https://www.youtube.com/playlist?list=PLprnOV9ZLFnsFxlwKs-tOs13kqpakWI9e

👉==========AMCHARTS GRAPH JQUERY PLAYLIST==========
https://www.youtube.com/playlist?list=PLprnOV9ZLFnsGDKm_5W__HErKwGl3H1wu

👉=================RDLC Report Playlist===============
https://www.youtube.com/playlist?list=PLprnOV9ZLFnswiKegU95eTyu7nc_YSZmT

👉=================RDLC PRINT===============
How to print without showing report viewer in RDLC report - C#
https://www.youtube.com/watch?v=uTzwk6zBdQs

👉=================RDLC & Crystal Report===============
https://www.youtube.com/playlist?list=PLprnOV9ZLFnsTnvqGApmsCJqdOi15MVdE

👉=================SQL Server Tutorials (Series)===============
https://www.youtube.com/playlist?list=PLprnOV9ZLFntdSaPFBcMMc89XnH8gfRNy

👉=========TEAM FOUNDATION SERVER=============
TFS source control for beginners:
https://www.youtube.com/watch?v=AjhNxCUTEio

👉==========ANDROID APP DEVELOPMENT============
Quick Learn Android full basic in 45 minutes:
https://www.youtube.com/playlist?list=PLprnOV9ZLFntpdZb7cMvpHGE4YBzPDZJY

👉=================C# Basic=============================
https://www.youtube.com/playlist?list=PLprnOV9ZLFnvpVNZT6WFJeUAuVBNny9Pp

Tag:
asp.net core web api pagination,
asp.net core pagination example,
net core 3.1 pagination,
Paging in ASP.NET Core Web API,
Generating Pagination using Web API,
Pagination in asp.net core application,
RESTFul API with .NET Core 3.1 - Implementing Pagination,
Paging in asp.net core application,
How to Implement Server Side Pagination in ASP.NET Core

#PagingWebAPI #WebAPIPagination #PagingAPI #GetPagingAPI

#.net core web api #api #.net core #.net

Angular 9 CRUD with ASP.NET Core Web API

In this article, we’ll implement Asp.Net Core 3.0 Web API CRUD Operations with Angular 9. To demonstrate the topic, we’ll build a project from scratch with payment details like Credit/ Debit Card.

Sub-topics discussed.

• ASP.NET Core Web API
• Create .Net Core Web API
• Setup Database with EF Core
• API Controller for CRUD Web Methods
• Angular Client Side
• Create Angular 9 Project
• Consume ASP.NET Core API From Anguar
• Form Design and Validation
• Insert/ Create Record by Form Submission
• Retrive and Display Inserted Records
• Update and Delete Operation

Create ASP.NET Core Web API

In Visual Studio 2019, Go to File > New > Project (Ctrl + Shift + N).

From New Project window, Select Asp.Net Core Web Application.

Once you provide the project name and location. A new window will be opened as follows, Select API and Uncheck HTTPS Configuration. Above steps will create a brand new ASP.NET Core Web API project.

Setup Database

Let’s create a Database for this project. Inside this project, we’ll be using Entity Framework Core to do DB Operations. So first of all we’ve to install corresponding NuGet packages. Right click on Project Name from Solution Explorer, Click on Manage NuGet Packages, In Browse Tab– install following 3 packages.

#angular #angular article #asp.net core #asp.net core article #.net core crud with sql server