Dylan  Iqbal

Dylan Iqbal

1569398256

How to create an Angular 8 application with ASP.NET Core 3.0

Introduction

Microsoft just released .NET Core 3.0 on 23rd September 2019. You can get the latest version from this URL. Please note, if you are a Windows developer, you must install Visual Studio 2019 version 16.3 or later to work with this version. .NET Core 3.0 contains more awesome features. Previous ASP.NET version 2.1 and 2.2 were shipped with Angular version 6 only. But in this current release, Microsoft added the latest version of Angular 8. They have resolved the loading issues in previous version as well. In this post, I will explain the steps to create an Angular 8 application with ASP.NET 3.0. We will create a simple controller class to get latest C# Corner posts details and will be shown in the home component. We will get more features soon from Microsoft soon.

Install Node.js latest version

Please download the latest version of Node.js from their website. You require Node.js 10 or later version to work with Angular 8 as per their official documentation.

How to create an Angular 8 application with ASP.NET Core

Download and Install .NET Core 3.0 SDK.

As I mentioned earlier, .NET Core 3.0 requires Visual Studio 2019 v.16.3 or later. Please download and install the latest version of Visual Studio.

After installing both .NET Core 3.0 and Visual Studio 2019 v.16.3, you can create a new project in Visual Studio.

How to create an Angular 8 application with ASP.NET Core

Choose ASP.NET Core Web Application template and click Next button.

How to create an Angular 8 application with ASP.NET Core

Please give a valid name to the project and choose an appropriate folder to save that project. Click “Create” button to go next stage.

How to create an Angular 8 application with ASP.NET Core

Please note, by default HTTPS configuration is selected. If you do not wish that, please remove the tick from check box.

After clicking the “Create” button, your new project will be created shortly.

How to create an Angular 8 application with ASP.NET Core

You can see a “ClientApp” folder is created in the project. This is our Angular 8 project.

How to create an Angular 8 application with ASP.NET Core

If you check the package.json file, you can see the Angular library references. Please note that, node_modules are not yet created automatically. You must build the solution to create node packages. Other option is to just run the project. The node dependencies will be created automatically.

How to create an Angular 8 application with ASP.NET Core

In previous version of Angular 6 with ASP.NET Core 2.2, showed some error in the startup needed multiple refresh to resolve the issue. In this version, Microsoft resolved those issues.

How to create an Angular 8 application with ASP.NET Core

But currently I am getting some errors in the console with default project. Hopefully, Microsoft team will resolve these issues in coming releases. Adding to this project, we can create a new controller for getting the latest posts details (articles, blogs and news) from C# Corner RSS feeds.

Create an API controller for getting C# Corner RSS Feeds

We can create a “Feed” class.


    using System;  
      
    namespace Angular8ASPNETCore3  
    {  
        public class Feed  
        {  
            public string Link { get; set; }  
            public string Title { get; set; }  
            public string FeedType { get; set; }  
            public string Author { get; set; }  
            public string Content { get; set; }  
            public DateTime PubDate { get; set; }  
            public string PublishDate { get; set; }  
      
            public Feed()  
            {  
                Link = "";  
                Title = "";  
                FeedType = "";  
                Author = "";  
                Content = "";  
                PubDate = DateTime.Today;  
                PublishDate = DateTime.Today.ToString("dd-MMM-yyyy");  
            }  
        }  
    }  

We can create the controller for getting RSS feeds for latest post details from C# Corner.

RssFeedsController.cs


    using Microsoft.AspNetCore.Mvc;  
    using System;  
    using System.Collections.Generic;  
    using System.Globalization;  
    using System.Linq;  
    using System.Xml.Linq;  
      
    namespace Angular8ASPNETCore3.Controllers  
    {  
        [ApiController]  
        [Route("[controller]")]  
        public class RssFeedsController : ControllerBase  
        {  
            readonly CultureInfo culture = new CultureInfo("en-US");  
      
            [HttpGet]  
            public IEnumerable<Feed> Get()  
            {  
                try  
                {  
                    XDocument doc = XDocument.Load("https://www.c-sharpcorner.com/rss/latestcontentall.aspx");  
                    var entries = from item in doc.Root.Descendants().First(i => i.Name.LocalName == "channel").Elements().Where(i => i.Name.LocalName == "item")  
                                  select new Feed  
                                  {  
                                      Content = item.Elements().First(i => i.Name.LocalName == "description").Value,  
                                      Link = (item.Elements().First(i => i.Name.LocalName == "link").Value).StartsWith("/") ? "https://www.c-sharpcorner.com" + item.Elements().First(i => i.Name.LocalName == "link").Value : item.Elements().First(i => i.Name.LocalName == "link").Value,  
                                      PubDate = Convert.ToDateTime(item.Elements().First(i => i.Name.LocalName == "pubDate").Value, culture),  
                                      PublishDate = Convert.ToDateTime(item.Elements().First(i => i.Name.LocalName == "pubDate").Value, culture).ToString("dd-MMM-yyyy"),  
                                      Title = item.Elements().First(i => i.Name.LocalName == "title").Value,  
                                      FeedType = (item.Elements().First(i => i.Name.LocalName == "link").Value).ToLowerInvariant().Contains("blog") ? "Blog" : (item.Elements().First(i => i.Name.LocalName == "link").Value).ToLowerInvariant().Contains("news") ? "News" : "Article",  
                                      Author = item.Elements().First(i => i.Name.LocalName == "author").Value  
                                  };  
      
                    return entries.OrderByDescending(o => o.PubDate);  
                }  
                catch  
                {  
                    List<Feed> feeds = new List<Feed>();  
                    Feed feed = new Feed();  
                    feeds.Add(feed);  
                    return feeds;  
                }  
            }  
        }  
    }  

Please create above class under “Controllers” folder and paste above code. Please add required references to your class.

We can modify the Home component inside the “ClientApp”, “src” and “app” folder with below code.

home.component.ts


    import { Component, Inject } from '@angular/core';  
    import { HttpClient } from '@angular/common/http';  
      
    @Component({  
        selector: 'app-home',  
        templateUrl: './home.component.html'  
    })  
    export class HomeComponent {  
        latestPosts: Feed[] = [];  
        constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {  
            http.get<Feed[]>(baseUrl + 'rssfeeds').subscribe(result => {  
                this.latestPosts = result;  
            }, error => console.error(error));  
        }  
    }  
      
    interface Feed {  
        link: string;  
        title: string;  
        feedType: string;  
        author: string;  
        content: string;  
        publishDate: string;  
    }    

Also modify the template file with below code.

home.component.html

<div style="text-align:center">  
  <h1 style="margin-top:10px;">  
    Welcome to Angular <b style="color:crimson">8</b> with ASP.NET Core <b style="color:navy">3.0</b>  
  </h1>  
  <img width="200" alt="Angular ASP.Net Core Logo" src="../assets/angularcore.png" />  
  <div class="card" style="margin-left:50px; margin-right:50px; margin-bottom:50px;">  
    <div class="card-header" style="font-weight:bold; font-size:x-large;">  
      C# Corner Latest Posts from RSS Feeds  
    </div>  
    <div class="card-body">  
      <div class="table-responsive" style="max-height:385px;">  
        <table class="table mb-0" *ngIf="latestPosts && latestPosts.length>0">  
          <thead>  
            <tr>  
              <th>Sl.No</th>  
              <th>Post Title(With Link)</th>  
              <th>Post Type</th>  
              <th>Published Date</th>  
              <th>Author</th>  
            </tr>  
          </thead>  
          <tbody>  
            <tr *ngFor="let post of latestPosts; let i = index">  
              <td>{{ i + 1 }}</td>  
              <td style="text-align:left;"><a href="{{post.link}}" target="_blank">{{post.title}}</a></td>  
              <td>{{ post.feedType }}</td>  
              <td>{{ post.publishDate }}</td>  
              <td>{{ post.author}} </td>  
            </tr>  
          </tbody>  
        </table>  
      </div>  
    </div>  
  </div>  
</div> 

We have successfully modified the Home component. We can run the application.

How to create an Angular 8 application with ASP.NET Core

We could see the latest 30 articles/blogs/news details from C# Croner in this home page.

Conclusion

In this post, we could see how to create an Angular 8 project with ASP.NET Core 3.0 latest SDK in very simple steps. We could also see that; Microsoft improved the performance of Angular 8 application and reduced the initial loading time as well. I can say this is very light weight build. We can expect more exciting features from Microsoft team very soon. I will also try to write more articles on other features of .NET Core 3.0 very soon. Please give your valuable feedback about this post.

#angular #dotnet #asp-net #web-development

What is GEEK

Buddha Community

How to create an Angular 8 application with ASP.NET Core 3.0
Einar  Hintz

Einar Hintz

1602560783

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_._

Image showing how to create ASP.NET Core Web API project in Visual Studio.

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.

Showing project template selection for .NET Core MVC.

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.

Showing list of NuGet Packages for Entity Framework Core

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

Einar  Hintz

Einar Hintz

1602564619

MVC User Registration & Login with ASP.NET Core Identity

User registration and authentication are mandatory in any application when you have little concern about privacy. Hence all most all application development starts with an authentication module. In this article, we will discuss the quickest way to use **ASP.NET Core Identity for User Login and Registration **in a new or existing MVC application.

Sub-topics discussed :

  • How to add ASP.NET Core Identity to MVC application.
  • Customize ASP.NET Core Identity.
  • Identity.UI Design Customization.
  • Next step.

Background

ASP.NET Core Identity is an API, which provides both user interface(UI) and functions for user authentication, registration, authorization, etc. Modules/ APIs like this will really be helpful and fasten the development process. It comes with ASP.NET Core Framework and used in many applications before. Which makes the API more dependable and trustworthy.

ASP.NET Core MVC with user authentication can easily be accomplished using Identity.UI. While creating the MVC project, you just need to select Authentication as Individual User Accounts.

Showing how to create an MVC application with ASP.NET Core Identity API

The rest will be handled by ASP.NET Core Identity UI. It already contains razor view pages and backend codes for an authentication system. But that’s not what we want in most of the cases. we want to customize ASP.NET Core Identity as per our requirement. That’s what we do here.

Create an ASP.NET Core MVC Project

First of all, I will create a brand new ASP.NET Core MVC application without any authentication selected. We could add ASP.NET Core Identity later into the project.

In Visual Studio 2019, Go to File > New > Project (Ctrl + Shift + N). From new project window, select ASP.NET Core Web Application.

Create an ASP.NET Core Web application

Once you provide the project name and location. A new window will be opened as follows, Select _Web Application(Model-View-Controller), _uncheck _HTTPS Configuration _and DO NOT select any authentication method. Above steps will create a brand new ASP.NET Core MVC project.

Select Model View Controller templet under .NET Core

#asp.net core article #asp.net core #add asp.net core identity to existing project #asp.net core identity in mvc #asp.net core mvc login and registration #login and logout in asp.net core

Creating roles in asp net core

#Asp.net core #Asp.net core mvc #Core #Asp.net core tutorials #Asp.net core with entity framework

Asp.Net Core MVC Bangla Tutorials - 35 (Complete eCommerce Application)

#Asp.net core #Asp.net core mvc #Core #Asp.net core tutorials #Asp.net core with entity framework

Asp.Net Core MVC Bangla Tutorials - 13 (Complete eCommerce Application)

#Asp.net core #Asp.net core mvc #Core #Asp.net core tutorialss #Asp.net core with entity framework