When paired with the Clean Architecture pattern, ASP.NET Core MVC provides a solid framework for building online applications that can result in controllable and extendable solutions. In this article, we will look at how to organize an ASP.NET Core MVC project utilizing Clean Architecture principles, using C# code samples.

What is the Clean Architecture Concept?
Clean Architecture is a software design philosophy that emphasizes concern separation and maintainability by layering the codebase. Typically, these layers include.

Layer of User Interface
The presentation elements are placed here. It includes controllers, views, and view models in the context of ASP.NET Core MVC.

Layer of Application
This layer contains the application's business logic. It is in charge of managing user queries, data processing, and interfacing with the domain layer.

The Domain Layer
This layer is the application's heart, defining the fundamental business entities, rules, and domain-specific logic. It must be decoupled from any infrastructure or application-specific code.

Layer of Infrastructure
This layer handles external concerns like data access, external services, and infrastructure-related code. It should be kept separate from the other layers.

Establishing a Clean Architecture Initiative
Let's get started by making a new ASP.NET Core MVC project with Clean Architecture in mind.

Step One: Make a New ASP.NET Core MVC Project
To start a new ASP.NET Core MVC project, we can use either the dotnet command-line tool or Visual Studio. Ascertain that the ASP.NET Core SDK is installed.

dotnet new mvc -n ZRCleanArchitectureApp

Step 2: Creating a Project Structure
Separate our project into distinct folders for each layer to better organize it.

ZRCleanArchitectureApp.Web
This folder comprises controllers, views, and view models and represents the presentation layer.

ZRCleanArchitectureApp.Application
We define application services and business logic in this subdirectory.

ZRCleanArchitectureApp.Domain
This folder contains the definitions of our domain entities and business rules.

ZRCleanArchitectureApp.Infrastructure
This section handles data access, external services, and infrastructure-related code.

Step 3: Put Clean Architecture into Practice
Domain Entities Definition

// ZRCleanArchitectureApp.Domain/Entities/Product.cs
public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public decimal Price { get; set; }
}

Implementing Application Services
// ZRCleanArchitectureApp.Application/Services/ProductService.cs
public class ProductService
{
    private readonly IProductRepository _productRepository;

    public ProductService(IProductRepository productRepository)
    {
        _productRepository = productRepository;
    }

    public async Task<IEnumerable<Product>> GetAllProductsAsync()
    {
        return await _productRepository.GetAllAsync();
    }

    // Add other business logic methods here
}

Creating Controllers
// ZRCleanArchitectureApp.Web/Controllers/ProductController.cs
public class ProductController : Controller
{
    private readonly ProductService _productService;

    public ProductController(ProductService productService)
    {
        _productService = productService;
    }

    public async Task<IActionResult> Index()
    {
        var products = await _productService.GetAllProductsAsync();
        return View(products);
    }

    // Add other action methods
}

Configuring Dependency Injection
In the Program.cs file, configure dependency injection for our services and repositories.
builder.Services.AddScoped<ProductService>();
builder.Services.AddScoped<IProductRepository, ProductRepository>();

ASP.NET Core MVC Clean Architecture provides a disciplined approach to designing maintainable, scalable, and easily testable web applications. We may focus on building clean, modular code by dividing concerns into discrete levels.

We have barely scraped the surface of Clean Architecture in this post. We may improve our project by incorporating validation, authentication, and authorization systems, as well as unit tests to check the accuracy of our code.

Keep in mind that Clean Architecture is a suggestion, not a hard and fast rule. Adapt it to our project's unique requirements and complexities, and strive for simplicity and maintainability in our codebase at all times.

In this tutorial, we will look at how to create a dynamic form with multiselect checkboxes in an ASP.NET MVC application. We'll concentrate on how to use jQuery AJAX to handle form submission, retrieve the selected checkboxes, and store the data to the database. The code provided offers a detailed example of how to develop a user-friendly student data management system that allows each student to select several languages.

You should have a basic understanding of ASP.NET MVC, C#, jQuery, and Entity Framework before going.

How do you make a Multiselect Checkbox Form?
In the "Index.chtml" file, we have designed a form to collect student data, including a section to select multiple languages for each student using checkboxes.
<!-- Index.chtml -->
<!-- ... (existing code) ... -->
<div class="text-light text-center my-3">
    <div class="d-flex justify-content-center">
        <h5 class="text-warning">Languages:</h5>
        <div id="languagesSection">
            @for (int i = 0; i < Model.Languages.Count; i++)
            {
                <label>@Model.Languages[i].LanguageName</label>
                @Html.CheckBoxFor(model => model.Languages[i].IsChecked)
                @Html.HiddenFor(model => model.Languages[i].ID)
                @Html.HiddenFor(model => model.Languages[i].LanguageName)
            }
        </div>
    </div>
</div>
<!-- ... (existing code) ... -->

Implementing AJAX for Adding Data to Database
In the JavaScript section, we've implemented an AJAX function to handle the form submission and add student data to the database.
// AJAX for Adding Data to Database
$("#SumbitButton").click(function () {
    var selected = []; // initialize array
    $('div#languagesSection2 input[type=checkbox]').each(function () {
        if ($(this).is(":checked")) {
            selected.push($(this).attr("id"));
        }
    });

    $("#Languages").val(selected);
    var studentData = $("#studentInputForm").serialize();

    if (!$('#studentInputForm').valid()) {
        return false;
    }

    $.ajax({
        url: "/Home/SaveStudent",
        type: "POST",
        data: studentData,
        success: function (data) {
            $('#studentInputForm').find(':input').val('');
            $('input[type=checkbox]').prop('checked', false);
        },
        error: function (errormessage) {
            console.log("error message");
        }
    });
});

Handling the AJAX Request in the Controller
In the "HomeController," we've added two action methods, one for saving student data and the other for handling the edit functionality.
public class HomeController : Controller
{
    OperationRepositery repo = null;
    public HomeController()
    {
        repo = new OperationRepositery();
    }

    public ActionResult Index()
        {
            StudentModel model = new StudentModel();
            model.Languages = db.LanguagesTable.Select(lang => new LanguagesModel
            {
                ID = lang.ID,
                LanguageName = lang.LanguagesName,
            }).ToList();
            return View(model);
        }

    // Action method for adding student data
    public ActionResult SaveStudent(StudentModel model)
    {
        var result = repo.AddData(model);
        return Json(new { result = true }, JsonRequestBehavior.AllowGet);
    }

    // Action method for handling the edit functionality
    public ActionResult EditStudent(int ID)
    {
        var result = repo.EditFunction(ID);
        var languageIdList = result.LanguageIds.Split(',').Select(x => Convert.ToInt32(x)).ToList();
        result.Languages = db.LanguagesTable.Select(x => new LanguagesModel
        {
            ID = x.ID,
            LanguageName = x.LanguagesName,
            IsChecked = languageIdList.Contains(x.ID)
        }).ToList();
        return View(result);
    }
}

Happy coding!

We will explore how to implement a dynamic form with multiselect checkboxes in an ASP.NET MVC application. We'll focus on using jQuery AJAX to handle the form submission, retrieve the selected checkboxes, and save the data to the database. The provided code includes a complete example of how to create a user-friendly student data management system with the ability to select multiple languages for each student.

Before proceeding, you should have a basic understanding of ASP.NET MVC, C#, jQuery, and Entity Framework.
How to create the Multiselect Checkbox Form?

In the "Index.chtml" file, we have designed a form to collect student data, including a section to select multiple languages for each student using checkboxes.
<!-- Index.chtml -->
<!-- ... (existing code) ... -->
<div class="text-light text-center my-3">
    <div class="d-flex justify-content-center">
        <h5 class="text-warning">Languages:</h5>
        <div id="languagesSection">
            @for (int i = 0; i < Model.Languages.Count; i++)
            {
                <label>@Model.Languages[i].LanguageName</label>
                @Html.CheckBoxFor(model => model.Languages[i].IsChecked)
                @Html.HiddenFor(model => model.Languages[i].ID)
                @Html.HiddenFor(model => model.Languages[i].LanguageName)
            }
        </div>
    </div>
</div>
<!-- ... (existing code) ... -->

Implementing AJAX for Adding Data to Database
In the JavaScript section, we've implemented an AJAX function to handle the form submission and add student data to the database.
// AJAX for Adding Data to Database
$("#SumbitButton").click(function () {
    var selected = []; // initialize array
    $('div#languagesSection2 input[type=checkbox]').each(function () {
        if ($(this).is(":checked")) {
            selected.push($(this).attr("id"));
        }
    });

    $("#Languages").val(selected);
    var studentData = $("#studentInputForm").serialize();

    if (!$('#studentInputForm').valid()) {
        return false;
    }

    $.ajax({
        url: "/Home/SaveStudent",
        type: "POST",
        data: studentData,
        success: function (data) {
            $('#studentInputForm').find(':input').val('');
            $('input[type=checkbox]').prop('checked', false);
        },
        error: function (errormessage) {
            console.log("error message");
        }
    });
});

Handling the AJAX Request in the Controller
In the "HomeController," we've added two action methods, one for saving student data and the other for handling the edit functionality.
public class HomeController : Controller
{
    OperationRepositery repo = null;
    public HomeController()
    {
        repo = new OperationRepositery();
    }

    public ActionResult Index()
        {
            StudentModel model = new StudentModel();
            model.Languages = db.LanguagesTable.Select(lang => new LanguagesModel
            {
                ID = lang.ID,
                LanguageName = lang.LanguagesName,
            }).ToList();
            return View(model);
        }

    // Action method for adding student data
    public ActionResult SaveStudent(StudentModel model)
    {
        var result = repo.AddData(model);
        return Json(new { result = true }, JsonRequestBehavior.AllowGet);
    }

    // Action method for handling the edit functionality
    public ActionResult EditStudent(int ID)
    {
        var result = repo.EditFunction(ID);
        var languageIdList = result.LanguageIds.Split(',').Select(x => Convert.ToInt32(x)).ToList();
        result.Languages = db.LanguagesTable.Select(x => new LanguagesModel
        {
            ID = x.ID,
            LanguageName = x.LanguagesName,
            IsChecked = languageIdList.Contains(x.ID)
        }).ToList();
        return View(result);
    }
}

Happy coding!

Authentication and Authorization are two major aspects while thinking about securing your application. Security is the main concern of modern applications because anyone can steal your data if it is not secured. So, if you are going to create an application where the data security is a primary concern, then think about Authentication and Authorization.

Authentication is the process to validate an anonymous user based on some credentials and Authorization process happens just after that and grants resources to this validated user. So, we can say, it's two-step validating process before providing the access of the resources or data.

We have many techniques to validate the users, like Windows Authentication, JWT Authentication, and Cookie Authentication etc. Today, we will learn how to implement and make ASP.NET Core MVC applications more secure using Cookie-based authentication and authorization. So, let's start the demonstration and create a fresh ASP.NET Core MVC project. You can refer to the following for the step by step process of creating an ASP.NET Core MVC application.

Be sure that while creating the project, your template should be Web Application (Model-View-Controller) and change the authentication as ‘No Authentication’.
You can download the code from here.

Here, you can choose the inbuilt Authentication functionality instead of ‘No Authentication’ and it will provide the readymade code. But we are choosing ‘No Authentication’ here because we are going to add our own Cookie-based authentication functionality in this demo and you will learn how to implement the Authentication and Authorization system from scratch.

We are choosing MVC template because we would like to see some Login and Logout functionality on UI along with Authentication and Authorization using Cookies. Now, click OK and it will take a few seconds and the project will be ready. Run it for checking if everything is working fine or not. Once everything is OK, you are ready to go.

Let’s move to the starting point of the ASP.NET Core application file which is “Startup.cs” where we configure the setting for the application like configuring the required services and configuring the middleware services etc. So, implementing the Authentication features, first, we have to add the authentication and then use it. So, let’s move to Startup.cs’s ConfigureService method and add the authentication feature using the following line of code, it will be just above services.AddMvc().
services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme).AddCookie();  

Now move to Configure in the startup.cs method and use the authentication features using the following line of code, it will be just above  routing.
app.UseAuthentication();  

Following is the whole code for adding the Authentication and using it.
    using Microsoft.AspNetCore.Authentication.Cookies;  
    using Microsoft.AspNetCore.Builder;  
    using Microsoft.AspNetCore.Hosting;  
    using Microsoft.AspNetCore.Http;  
    using Microsoft.AspNetCore.Mvc;  
    using Microsoft.Extensions.Configuration;  
    using Microsoft.Extensions.DependencyInjection;  
      
    namespace CookieDemo  
    {  
        public class Startup  
        {  
            public Startup(IConfiguration configuration)  
            {  
                Configuration = configuration;  
            }  
      
            public IConfiguration Configuration { get; }  
      
            // This method gets called by the runtime. Use this method to add services to the container.  
            public void ConfigureServices(IServiceCollection services)  
            {  
                services.Configure<CookiePolicyOptions>(options =>  
                {  
                    // This lambda determines whether user consent for non-essential cookies is needed for a given request.  
                    options.CheckConsentNeeded = context => true;  
                    options.MinimumSameSitePolicy = SameSiteMode.None;  
                });  
      
                services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme).AddCookie();  
                services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);  
            }  
      
            // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.  
            public void Configure(IApplicationBuilder app, IHostingEnvironment env)  
            {  
                if (env.IsDevelopment())  
                {  
                    app.UseDeveloperExceptionPage();  
                }  
                else  
                {  
                    app.UseExceptionHandler("/Home/Error");  
                }  
      
                app.UseStaticFiles();  
                app.UseCookiePolicy();  
                app.UseAuthentication();  
                app.UseMvc(routes =>  
                {  
                    routes.MapRoute(  
                        name: "default",  
                        template: "{controller=Home}/{action=Index}/{id?}");  
                });  
            }  
        }  
    }  

We can implement Authentication through Login feature. In most of the applications today, Authorization is decided internally based on your role. So, now we are going to create account login and logout feature, so just create one more controller as ‘AccountController.cs’ inside the controllers folder and add two action methods, one for rendering the Login View and  the other one for posting user credentials data for logging in to the system. Here is the code for AccountController where we have implemented Login functionality.
    using System;  
    using System.Collections.Generic;  
    using System.Linq;  
    using System.Security.Claims;  
    using System.Threading.Tasks;  
    using Microsoft.AspNetCore.Authentication;  
    using Microsoft.AspNetCore.Authentication.Cookies;  
    using Microsoft.AspNetCore.Mvc;  
      
    namespace CookieDemo.Controllers  
    {  
        public class AccountController : Controller  
        {  
            public IActionResult Login()  
            {  
                return View();  
            }  
      
            [HttpPost]  
            public IActionResult Login(string userName, string password)  
            {  
                if(!string.IsNullOrEmpty(userName) && string.IsNullOrEmpty(password))  
                {  
                    return RedirectToAction("Login");  
                }  
      
                //Check the user name and password  
                //Here can be implemented checking logic from the database  
      
                if(userName=="Admin" && password == "password"){  
      
                    //Create the identity for the user  
                    var identity = new ClaimsIdentity(new[] {  
                        new Claim(ClaimTypes.Name, userName)  
                    }, CookieAuthenticationDefaults.AuthenticationScheme);  
      
                    var principal = new ClaimsPrincipal(identity);  
      
                    var login = HttpContext.SignInAsync(CookieAuthenticationDefaults.AuthenticationScheme, principal);  
      
                    return RedirectToAction("Index", "Home");  
                }  
      
                return View();  
            }  
        }  
    }  

The first login action method is rendering the UI for login page and once you fill the data required for Login as username and password then the second action method as Login will work and send the Post request to the server.

In this method, first, we will check whether username and password should not be empty then we will validate the username and password. Here, in this demonstration, we are checking the username and password with some dummy data. You can implement database login instead of this.

After validating the user information, if everything is correct then we create Identity for that user and create the cookie information for it. Based on this principal data, we try to Sign In using a generic function called "SignInAsync" and if everything goes in the right direction then we redirect to the Home page.

Now, let's create the Login view page from where we can give the functionality to the user to enter the username and password. So, right click on the Login action method and add view without a model. It will automatically create the Account folder inside the Views under that will create “login.cshtml” file. Just open it and create a container and add a form tag along with two textboxes for entering the username and password. Apart from this, create two separate buttons as “Submit” and “Reset”. Once you fill the data and click on the submit button, it will call to Login action method defined in Account Controller using POST call. So, modify the code of “login.cshtml” as follows.
    @{  
        ViewData["Title"] = "Login";  
    }  
      
    <div class="container">  
        <div class="row">          
            <div class="col-md-3">  
                <h2><strong>Login Page </strong></h2><br />  
                <form asp-action="login" method="post">  
                    <div class="form-group">  
                        <label>User Name</label>  
                        <input type="text" class="form-control" id="userName" name="userName" placeholder="Enter user name">  
                    </div>  
                    <div class="form-group">  
                        <label>Password</label>  
                        <input type="password" class="form-control" name="password" id="password" placeholder="Password">  
                    </div>  
                    <div class="form-check">  
                        <button class="btn btn-info" type="reset">Reset</button>  
                        <button type="submit" class="btn btn-primary">Submit</button>  
                    </div>  
                </form>  
            </div>  
        </div>  
    </div>  

So far we have implemented the Cookie-based Authentication functionality in Asp.Net Core MVC project. But what about Authorization. Authorization means, providing access to the authenticated user to access a resource based on role.

So, let's first understand how we can implement the Authorization in Asp.Net Core MVC. For now, if you will try to access the HOME page without sign in, you can access it. So, let’s prevent the anonymous user from accessing the HOME page directly, if someone wants to access the HOME page then they should have to go through the Authentication process and then they will be able to access it.

So, to accomplish this, let’s open the Home Controller and put the [Authorize] attribute just above to controller. You can place it at action level but here we would like to block the whole home controller functionality and if we want to access, just go and log in. So, just do something like below.
    using CookieDemo.Models;  
    using Microsoft.AspNetCore.Authorization;  
    using Microsoft.AspNetCore.Mvc;  
    using System.Diagnostics;  
      
    namespace CookieDemo.Controllers  
    {  
      
        [Authorize]  
        public class HomeController : Controller  
        {          
            public IActionResult Index()  
            {  
                return View();  
            }  
      
            public IActionResult About()  
            {  
                ViewData["Message"] = "Your application description page.";  
      
                return View();  
            }  
      
            public IActionResult Contact()  
            {  
                ViewData["Message"] = "Your contact page.";  
      
                return View();  
            }  
      
            public IActionResult Privacy()  
            {  
                return View();  
            }  
      
            [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]  
            public IActionResult Error()  
            {  
                return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });  
            }  
        }  
    }  

Note
Be sure you have cleared all cookies which have been  created based on your previous login. If you will not do this, you will be accessing the HOME page, it is because authenticated user cookie is available in browser memory.

So, let's check how it works. Run the application and try to access the Home page. You will see here that your application automatically redirects to Login page. Now let's try to provide the user information as username = "Admin" and password =" password". Once you will pass the correct credentials and login then you will redirect to HOME page. So, let'sadd the feature that shows the logged in username along with a logout button. If you click to the log out button, your cookie value will be deleted and you will redirect to login page.

So, let's open the Account Controller and add the following logout action method.
    [HttpPost]  
    public IActionResult Logout()  
    {  
          var login = HttpContext.SignOutAsync(CookieAuthenticationDefaults.AuthenticationScheme);  
          return RedirectToAction("Login");  
    }  

And now open the Index.cshtml file from the Home folder inside the Views and modify the code as follows. Here, first of all, we are trying to show the Logged In username using @User.Identity.Name and apart from this adding a link for logout.
    @{  
        ViewData["Title"] = "Home Page";  
    }  
      
    <div class="container">  
        <div class="row">  
            <div class="col-md-12">  
                <h2><strong>Home Page </strong></h2><br /><br />  
                Hello @User.Identity.Name  
                <a asp-action="logout" asp-controller="account">  
                    Logout  
                </a>  
                <br />  
                <br />  
                <h4>Welcome to Asp.Net Core Authentication and Authorization Demo!!</h4>  
            </div>  
        </div>  
    </div>  

So far, we are able to understand how to implement Authentication in Asp.Net Core MVC and how to implement Authorization and give access to validate the users. Now, let's understand how to work with multiple roles. Here we are doing everything manually with some static value, but you can change the logic and connect to the database for validating the user. So, just modify the Login method as follows where we are providing two different kinds of roles; one is Admin role and another is User role. Based on these roles, we will provide access to some of the pages.
    [HttpPost]  
    public IActionResult Login(string userName, string password)  
    {  
        if (!string.IsNullOrEmpty(userName) && string.IsNullOrEmpty(password))  
        {  
            return RedirectToAction("Login");  
        }  
      
        //Check the user name and password  
        //Here can be implemented checking logic from the database  
        ClaimsIdentity identity = null;  
        bool isAuthenticated = false;  
      
        if (userName == "Admin" && password == "password")  
        {  
      
            //Create the identity for the user  
            identity = new ClaimsIdentity(new[] {  
                        new Claim(ClaimTypes.Name, userName),  
                        new Claim(ClaimTypes.Role, "Admin")  
                    }, CookieAuthenticationDefaults.AuthenticationScheme);  
      
            isAuthenticated = true;  
        }  
      
        if (userName == "Peter" && password == "password")  
        {  
            //Create the identity for the user  
            identity = new ClaimsIdentity(new[] {  
                        new Claim(ClaimTypes.Name, userName),  
                        new Claim(ClaimTypes.Role, "User")  
                    }, CookieAuthenticationDefaults.AuthenticationScheme);  
      
            isAuthenticated = true;  
        }  
      
        if (isAuthenticated)  
        {  
            var principal = new ClaimsPrincipal(identity);  
      
            var login = HttpContext.SignInAsync(CookieAuthenticationDefaults.AuthenticationScheme, principal);  
      
            return RedirectToAction("Index", "Home");  
        }  
        return View();  
    }  

Now let's move to HomeController and remove the [Authorize] attribute from the class level and put it in action level as follows. Here we have two different action methods which point to two different views. One is pointing to Index view and another one is pointing to the Setting page. Index page can be accessible to both type of roles, either it is Admin or User but the Setting page can be accessed only by Admin role.
    public class HomeController : Controller  
    {  
            [Authorize(Roles ="Admin, User")]  
            public IActionResult Index()  
            {  
                return View();  
            }  
      
            [Authorize(Roles ="Admin")]  
            public IActionResult Setting()  
            {  
                return View();  
      
            }  

Now modify the Index.cshtml file and add one thing as Role, just modify the code as follows.
    @{  
        ViewData["Title"] = "Setting Page";  
    }  
      
    <div class="container">  
        <div class="row">  
            <div class="col-md-12">  
                <h2><strong>Setting Page </strong></h2><br /><br />  
                Hello @User.Identity.Name !, Role @User.FindFirst(claim=>claim.Type==System.Security.Claims.ClaimTypes.Role)?.Value  
                <a asp-action="logout" asp-controller="account">  
                    Logout  
                </a>  
                <br />  
                <br />  
                <h4>Admin role user can only access this page!!</h4>  
            </div>  
        </div>  
    </div>  

Now, we have added everything and it's time to run the application. So, just press F5 and it will run your application. First, go to "Login" page and login with "User" role.

Once you will log in as a User role, definitely you will be redirected to the home page because the home page is accessible to both types  the roles.

Now, let's try to access the settings page, here you will get some Access Denied error. It is because "User" role member does not allow you to access the settings page. By default, you will get the following error as per the browser. But you can customize your error and page as well. It totally depends on you.

Now, let log out of the application for the "User" role and try to log in for Admin role. As follows, you can see, we are able to access the home page.

But let try to access the setting page for "Admin" role and yes, you will be accessed the setting page.

Lastly, let me show how you can see the cookie information. For this demo, I am using the Microsoft Edge browser, you can use any other as per your choice. But cookie information saves almost in the same place for every browser. So, just go to Network tab and then Cookie tab. Here you can see all the listed Cookies.

As you know there are various types of emulators available for viewing applications. We can use the iPhone and Windows Phone simulators for browsing the application. You can open the website on a phone that is so much more satisfying than a Desktop.

In that context, when you create the MVC 4 application you can use a Mobile template to design the application. Here, I am using Visual Studio 2013 and a MVC 5 project template to design the application. We'll use the jQuery Mobile application for displaying it in the phones and tablets.

Let's create an application on Visual Studio using MVC 5 Project template and perform some CRUD operations and add jQuery Mobile and ViewSwitcher. I am using the iPhone simulator to browse the application.

Creating CRUD Operations
Step 1: Add a model class named Cricketer and add the following code:
    public enum Grade  
    {  
        A,B,C  
    }  
    public class Cricketer  
    {  
        public int ID { get; set; }  
        public string Name { get; set; }  
        public string Team { get; set; }  
        public Grade Grade { get; set; }  
    }  
    public class CricketerDbContext : DbContext  
    {  
        public DbSet<Cricketer> Cricketers { get; set; }  
    }

In the code above, we've created an Enum property and we'll add the Enum support to the View in this article later.

Step 2: Scaffold a New Controller

Step 3: Unfortunately scaffolding does not do the Enums in the Create.cshtml and Edit.cshtml pages. You can see in the following screenshot:

Step 4: So we need to update it using the following highlighted code:
    <div class="form-group">  
        @Html.LabelFor(model => model.Grade, new { @class = "control-label col-md-2" })  
        <div class="col-md-10">  
            @Html.EnumDropDownListFor(model => model.Grade)  
            @Html.ValidationMessageFor(model => model.Grade)  
        </div>  
    </div>  

Step 4: Ok. Now it's time to run the application and perform the CRUD operations.

Adding Mobile Support
You can develop it while creating the MVC 4 application with the Mobile Template but you can add the jQuery Mobile along with the MVC 5 application. You can simply have it from the NuGet Pacakges or entering the following command in the Pacakge Manager Console:

Install-Package jQuery.Mopbile.MVC

This package will add various things such as:
    A ViewSwitcher partial view and supporting Controller
    Basic _Layout.Mobile.cshtml and supporting CSS
    Newly added BundleMobileConfig.cs

Note: You can use jQuery in any mobile framework.

Now you need to modify the Global.asax file with the following highlighted code:
    protected void Application_Start()  
    {  
        AreaRegistration.RegisterAllAreas();  
        FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);  
        RouteConfig.RegisterRoutes(RouteTable.Routes);  
        BundleConfig.RegisterBundles(BundleTable.Bundles);  
        BundleMobileConfig.RegisterBundles(BundleTable.Bundles);  
    }

When you run the application on the iPhone simulator as in the following:

The following screenshot will open:

Now change the table in the Index.cshml page with the following code:
    <ul data-role="listview" data-filter="true" class="my_class_list">  
    @foreach (var item in Model)  
    {  
        <li>  
            <a href="@Url.Action("Details", new {item.ID})">  
                <h3>@Html.DisplayFor(modelItem => item.Name)</h3>  
                <p>@Html.DisplayFor(modelItem => item.Team) - @Html.DisplayFor(modelItem => item.Grade) Grade</p>  
            </a>  
        </li>  
    }  
    </ul>

Now just refresh the page.

In this article, I am introducing the use of Data Annotations in MVC 5 using Microsoft Visual Studio 2013 Preview. As you know I previously deployed a MVC Application in which I used various types of techniques like Adding View, Adding Model, Login, CRUD Operations, Code Migration, Searching. These are very necessary in MVC Applications but when you develop applications, it is necessary to apply validations on that app. So, here you will learn how to validate an app in MVC 5.

In that context, validations are applied in MVC applications by the following assembly:
using System.ComponentModel.DataAnnotations;  

Here I will tell you that I am creating validation logic in my Cricketers Model. When a user creates or edits any cricketer. You can see the validation on my page in the following image:

Don't Repeat Yourself
Whenever you design an ASP.NET MVC application, Don't Repeat Yourself (DRY) is the basic assumption that you need to use. This makes your code clean, reduces the amount of code and easy to maintain because the more code you write with fewer errors the more your code functions better.

In ASP.NET MVC applications, validations are defined in the Model Class and applied all over the application. The Entity Framework Code First approach and MVC are the pillar for the validation.

So, let's begin to take advantage of Data Annotation of MVC in your application with the following criteria.

Use of Data Annotation
You need to add some logic for validation in your MVC application. For adding let's start step-by-step.

Step 1: Open Cricketers.cs from the Solution Explorer.

Step 2: Add the following assembly reference at the top of your Cricketers.cs file:
using System.ComponentModel.DataAnnotations;  

Step 3: Change your code with the following code (depends on your logic):
    using System.ComponentModel.DataAnnotations;  
    using System.Data.Entity;  
    namespace MvcCricket.Models  
    {  
        public class Cricketer  
        {  
            public int ID { get; set; }  
            [Required]  
            [StringLength(50, MinimumLength=4)]  
            public string Name { get; set; }  
            [Required]  
            [Range(1,500)]  
            public int ODI { get; set; }  
            [Required]  
            [Range(1,200)]  
            public int Test { get; set; }  
            [Required]  
            public string Grade { get; set; }  
        }  
    }  

In the code above, you can see that the Required attribute is used in each property. That means that the user needs to enter the value in it. In the Name property the StringLength attribute defines the min and max length of the Name. In the ODI and TEST property the Range attribute is defined to min and max length.

Step 4: Open a Library Package Manager Console and write the following command in it:
add-migration DataAnnotations

After pressing Enter:

Step 5: Again write the following command in the Library Package Manager Console:
update-database

What does Visual Studio do? Visual Studio opens the DataAnnotations.cs file and you will see the DbMigration class is the base class of DataAnnotations. There are two methods in it. In the Up() and Down(), you will see the updated database schema. Check it out with the following code:
    namespace MvcCricket.Migrations  
    {  
        using System;  
        using System.Data.Entity.Migrations;  
        public partial class DataAnnotations : DbMigration  
        {  
            public override void Up()  
            {  
                AlterColumn("dbo.Cricketers", "Name", c => c.String(nullable: false, maxLength: 50));  
                AlterColumn("dbo.Cricketers", "Grade", c => c.String(nullable: false));  
            }  
            public override void Down()  
            {  
                AlterColumn("dbo.Cricketers", "Grade", c => c.String());  
                AlterColumn("dbo.Cricketers", "Name", c => c.String());  
            }  
        }  
    }  

You can see in the code above that the Name and Grade property are no longer nullable. You need to enter values in it. Code First ensures that the validation rules you specify on a model class are enforced before the application saves changes in the database.

Step 6: Debug your application and open the Cricketers folder.

Click on Create New Link to create some new cricketer.

That's It. If you want to know the working process of validation process then you to notice my following paragraph.

Validation Process
    public ActionResult Create()  
    {  
        return View();  
    }  
    //  
    // POST: /Cricketers/Create  
    [HttpPost]  
    [ValidateAntiForgeryToken]  
    public ActionResult Create(Cricketer cricketer)  
    {  
        if (ModelState.IsValid)  
       {  
            db.Cricketers.Add(cricketer);  
            db.SaveChanges();  
            return RedirectToAction("Index");  
        }  
        return View(cricketer);  
    }  

In the code above when the form opens in the browser the HTTP GET method is called and in the Create action method initiates. The second method HttpPost handles the post method. This method checks that the validation errors in the form and if the object finds the errors then the Create method re-creates the form, otherwise the method saves the data in the database. In here, the form is not posted to the server, because the validation error occurs in the client-side. You can also disable your JavaScript to see the error using a breakpoint.

The following is an example of that.

In Internet Explorer

In Google Chrome

Validation Summary
You can also see the changes in your Create.cshtml file when you apply the Validation in your application. Check it out in my file:
    @using (Html.BeginForm())  
    {  
        @Html.AntiForgeryToken()  
        @Html.ValidationSummary(true)  
        <fieldset class="form-horizontal">  
            <legend>Cricketer</legend>  
            <div class="control-group">  
                @Html.LabelFor(model => model.Name, new { @class = "control-label" })  
                         <div class="controls">  
                               @Html.EditorFor(model => model.Name)  
                               @Html.ValidationMessageFor(model => model.Name, null, new { @class = "help-inline" })  
                         </div>  
                  </div>  
            <div class="control-group">  
                @Html.LabelFor(model => model.ODI, new { @class = "control-label" })  
                         <div class="controls">  
                               @Html.EditorFor(model => model.ODI)  
                               @Html.ValidationMessageFor(model => model.ODI, null, new { @class = "help-inline" })  
                         </div>  
                  </div>  
            <div class="control-group">  
                @Html.LabelFor(model => model.Test, new { @class = "control-label" })  
                         <div class="controls">  
                               @Html.EditorFor(model => model.Test)  
                               @Html.ValidationMessageFor(model => model.Test, null, new { @class = "help-inline" })  
                         </div>  
                  </div>  
            <div class="control-group">  
                @Html.LabelFor(model => model.Grade, new { @class = "control-label" })  
                <div class="controls">  
                    @Html.EditorFor(model=>model.Grade)  
                    @Html.ValidationMessageFor(model => model.Grade, null, new { @class = "help-inline" })  
                </div>  
            </div>  
            <div class="form-actions no-color">  
                <input type="submit" value="Create" class="btn" />  
            </div>  
        </fieldset>  
    }   

Summary
So far this article will help you to learn to validate your MVC Application. You can also see the procedure and working procedure of Validation in my app. So just go for it.

Using DALL-E in an ASP.NET Core application involves integrating the OpenAI API into your code. We can generate multiple images based on the given text using DALL-E generate image API endpoint. First, you must develop an OpenAI API key to authorize API use. In this article, I will explain how you can use DALL-E API in the ASP.NET Core MVC application to generate images based on the text.

Agenda for the Article,
    What is OpenAI?
    What is DALL-E?
    How to get OpenAI API Key
    Generating Image In ASP.NET Core MVC

What is OpenAI?
OpenAI is an artificial intelligence research lab that works to develop and grow AI in different fields like medicine, education, sports, information technology, etc. It was founded in 2015. OpenAI conducts research in various areas of AI, including machine learning, natural language processing, robotics, and computer vision. The organization has developed several groundbreaking AI models, including GPT-3, DALL-E, and CLIP. In this article, I will explain the use of the DALL-E. I have also written an article on GPT-3. To know more, please refer to this article.

What is DALL-E?
DALL-E is an artificial intelligence (AI) program developed by OpenAI that generates images from textual descriptions using a transformer-based language model. DALL-E is named after the famous artist Salvador Dali. The program can create highly detailed and complex images of objects, animals, and scenes that do not exist in the real world but also in the real world. It works by learning from a dataset of images and their associated textual descriptions, allowing it to generate fictional and realistic images based on the given textual input. DALL-E is a significant breakthrough in AI image generation and has the potential to revolutionize various industries, including advertising, gaming, and e-commerce.

Generating OpenAI API Key
You need to authorize the API endpoint by passing the API key. To generate an OpenAI API key, follow these steps:

Signup for an OpenAI account. Go to the OpenAI website and create a new account.
Confirm your email address.
Now, Log in to your account and navigate to the 'View API keys' section as given below.

Now, click on 'Create new secret key' as given below.

Store your API key in a secure location, as it will be required to access the OpenAI APIs. You can copy the key and save it for future use. OpenAI has usage and resource limitations for its API, so be sure to check its documentation here for details on usage and pricing.

Generating Image In ASP.NET Core MVC
To generate images in the ASP.NET Core MVC application using DALL-E, you need to follow the below-given steps:
    First, create an ASP.NET Core MVC project. To know more about creating a project, please refer here.
    Add your API key in the appsettings.json file as given below

    //demo key
    "OpenAI_API_KEY": "sk-cF8Dv3n2YtUXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"

Add the below-given code for the UI in your Index.cshtml file inside Views>Home>Index.cshtml
<h1 class="display-4">Image Generator</h1>
<!--Image info-->
<input type="text" class="form-control" id="txt" style="width:400px;" placeholder="Image Description" />
<br />
<!--Image Size-->
<select id="size">
    <option selected>256x256</option>
    <option>512x512</option>
</select>
<!--Images Required-->
<input type="number" value="1" placeholder="Images Required" id="quantity" />
<!--Generate button-->
<button id="generate">
    Generate
</button>
<br />
<!--Display image here-->
<div id="Imagedisplay" class="col-md-14 row">
</div>

In the above-given code, you have added a UI for the home page to enter some basic details required for the image, like the information about the image, the number of images required, and the size of the image.

Now you will add a model class ImageInfo.cs inside the Models folder as given below.
public class ImageInfo {
    public string ? ImageText {
        get;
        set;
    }
}
public class RequiredImage {
    public string ? prompt {
        get;
        set;
    }
    public short ? n {
        get;
        set;
    }
    public string ? size {
        get;
        set;
    }
}
public class ImageUrls {
    public string ? url {
        get;
        set;
    }
}
// response handling
public class ResponseModel {
    public long created {
        get;
        set;
    }
    public List < ImageUrls > ? data {
        get;
        set;
    }
}

In the above-given code, You have added ResponseModel class for handling the response and RequiredImage class for the input data about the required image.

Now you will add a controller method inside HomeController.cs as given below.
[HttpPost]
public async Task < IActionResult > GenerateImage([FromBody] RequiredImage obj) {
    string imglink = string.Empty;
    var response = new ResponseModel();
    using(var client = new HttpClient()) {
        client.DefaultRequestHeaders.Clear();
        client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", APIKEY);
        var Message = await client.PostAsync("https://api.openai.com/v1/images/generations", new StringContent(JsonConvert.SerializeObject(obj), Encoding.UTF8, "application/json"));
        if (Message.IsSuccessStatusCode) {
            var content = await Message.Content.ReadAsStringAsync();
            response = JsonConvert.DeserializeObject < ResponseModel > (content);
            imglink = resp.data[0].url.ToString();
        }
    }
    return Json(response);
}

You have added a post-call with the DALL-E API key in the above given code. You have to pass the API key shown above.

The final step is to display the image on the UI using javascript. So you have to add the below-given code inside wwwroot>js>site.js.
$(document).ready(() => {
    $('#generate').click(function() {
        var info = {};
        info.n = parseInt($('#quantity').val());
        info.prompt = $('#txt').val();
        info.size = $('#size').find(":selected").val();
        $.ajax({
            url: '/Home/GenerateImage',
            method: 'post',
            contentType: 'application/json',
            data: JSON.stringify(info)
        }).done(function(data) {
            $.each(data.data, function() {
                $('#Imagedisplay').append('<div class="col-md-5" style="padding-top:12px">' + '<img class="p-12" src = "' + this.url + '"/>' + '</div>');
            });
        });
    });
});

Output

Conclusion
OpenAI provides us with lots and lots of use for artificial intelligence. AI has become a part of our daily life nowadays. ChatGPT and DALL-E are all advanced and great examples of AI. To generate an image, you need two things. First, the OpenAI APOI key and second DALL-E API endpoint. Pass the API key in the header and freely use that endpoint.

Thank You, and Stay Tuned for More.

Overview on ASP.NET

Let’s differentiate both.

.NET Framework

• Developed and run on Windows platform only.
• Built on the .NET Framework runtime.
• Supported (MVC, Web API & SignalR) Dependency Injection (DI).
• MVC & Web API Controller are separated.

.Net Core

• Open Source.
• Developed & run on Cross Platform.
• Built on the .NET Core runtime & also on .NET Framework.
• Facility of dynamic compilation.
• Built in Dependency Injection (DI).
• MVC & Web API Controller are unified, Inherited from same base class.
• Smart tooling (Bower, NPM, Grunt & Gulp).
• Command-line tools.

Start with .NET Core 1.0
Let’s create a new project with Visual Studio 2015 > File > New > Project.

Choose empty template and click OK.

Visual Studio will create a new project of ASP.NET Core empty project.

We will now explore all initial files one by one.

Explore Initial Template

Those marked from Solution Explorer are going to be explored, one by one.

First of all, we know about program.cs file. Let’s concentrate on it.

Program.cs: Here, we have sample piece of code. Let’s get explanation.
    namespace CoreMVCAngular  
    {  
        public class Program   
        {  
            public static void Main(string[] args) {  
                var host = new WebHostBuilder().UseKestrel().UseContentRoot(Directory.GetCurrentDirectory()).UseIISIntegration().UseStartup < Startup > ().Build();  
                host.Run();  
            }  
        }  
    }  

.UseKestrel() : Define the Web Server. ASP.NET Core supports hosting in IIS and IIS Express.

HTTP servers
    Microsoft.AspNetCore.Server.Kestrel (cross-platform)
    Microsoft.AspNetCore.Server.WebListener (Windows-only)

.UseContentRoot(Directory.GetCurrentDirectory()) : Application base path that specifies the path to the root directory of the Application.
.UseIISIntegration() : For hosting in IIS and IIS Express.
.UseStartup<Startup>() : Specifies the Startup class.
.Build() : Build the IWebHost, which will host the app & manage incoming HTTP requests.

Startup.cs
This is the entry point of every .NET Core Application. It provides services, that the Application required.
    namespace CoreMVCAngular   
    {  
        public class Startup   
        {  
            // This method gets called by the runtime. Use this method to add services to the container.  
            // For more information on how to configure your application, visit http://go.microsoft.com/fwlink/?LinkID=398940  
            public void ConfigureServices(IServiceCollection services) {}  
                // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.  
            public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory) {}  
        }  
    }  

As you can see, there are two methods; one is ConfigureServices & another is Configure. In Configure method, three parameters are specified.

IApplicationBuilder defines a class, which provides the mechanisms to configure an Application's request.

We can add MVC (middleware) to the request pipeline by using “Use” extension method. Later, we will use it.
ConfigureServices is an extension method, which is configured to use the several services.

Project.json: This is where our Application dependencies are listed i.e by name & version. This file also manages runtime, compilation settings.

Dependencies: All Application dependencies can add new dependencies, if required, intellisense will help up to include with the name & version.

After saving changes, it will automatically restore the dependencies from NuGet.

Here, the code snippet is changed.
    "dependencies": {  
    "Microsoft.NETCore.App": {  
    "version": "1.0.0",  
    "type": "platform"  
    },  
    "Microsoft.AspNetCore.Diagnostics": "1.0.0",  
      
    "Microsoft.AspNetCore.Server.IISIntegration": "1.0.0",  
    "Microsoft.AspNetCore.Server.Kestrel": "1.0.0",  
    "Microsoft.Extensions.Logging.Console": "1.0.0",  
    "Microsoft.AspNetCore.Mvc": "1.0.0"  
    },  

To uninstall, go to Solution explorer > right click on package > Uninstall package.

Tools: This section manages and lists command line tools. We can see IISIntegration.Tools is added by default, which is a tool that contains dotnet publish iis command for publishing the Application on IIS.
    "tools": {  
    "Microsoft.AspNetCore.Server.IISIntegration.Tools": "1.0.0-preview2-final"  
    },  

Frameworks: As we can see, initially our app is running on the .NET Core platform by default with the runtime.
    “netcoreapp1 .0”.  
    "frameworks": {  
        "netcoreapp1.0": {  
            "imports": ["dotnet5.6", "portable-net45+win8"]  
        }  
    },  

Build Options: Options, which are passed to the compiler while building the Application.
    "buildOptions": {  
        "emitEntryPoint": true,  
        "preserveCompilationContext": true  
    },  

RuntimeOptions: Manage Server garbage collection at Application runtime.
    "runtimeOptions": {  
        "configProperties": {  
            "System.GC.Server": true  
        }  
    },  

PublishOptions: This defines the file/folder to include/exclude to/from the output folder, while publishing the Application.
    "publishOptions": {  
        "include": ["wwwroot", "web.config"]  
    },  

Scripts: Scripts is an object type, which specifies that scripts run during building or publishing the Application.
    "scripts": {  
        "postpublish": ["dotnet publish-iis --publish-folder %publish:OutputPath% --framework %publish:FullTargetFramework%"]  
    }  

Add MVC6
It’s time to add MVC6. In .NET Core 1.0 MVC & Web API are unified, and become a single class, which inherits from the same base class.

Let’s add MVC Service to our Application. Open project.json to add new dependencies in it. In dependencies section, add two dependencies.
    "Microsoft.AspNetCore.Mvc": "1.0.0",
    "Microsoft.AspNetCore.StaticFiles": "1.0.0"

Click Save.

It will start restoring the packages automatically.

Now let’s add MVC (midleware) to request pipeline in Config method at startup class.
    public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory) {  
        loggerFactory.AddConsole();  
        if (env.IsDevelopment()) {  
            app.UseDeveloperExceptionPage();  
        }  
        //app.UseStaticFiles();  
        app.UseMvc(routes => {  
            routes.MapRoute(name: "default", template: "{controller=Home}/{action=Index}/{id?}");  
        });  
    }  

In ConfigureServices method, we need to add framework Service. We have added services.AddMvc();
    public void ConfigureServices(IServiceCollection services) {  
        services.AddMvc();  
    }  

MVC Folder Structure

Let’s add MVC folder structure to our sample Application. We have added view files in the views folder & MVC controller in Controllers folder like old MVC Application.

Here, you may notice that there is a new file in the views folder “_ViewImports.cshtml”. This file is responsible for setting up the namespaces, which can be accessed by the views in the project, which was previously done by the Web.config file in the views folder.

We are almost done. Let’s modify our view content with welcome message. Now, run the Application. You can see welcome message appears in the home page.

Output

AngularJS2
AngularJS2 is a modern Client end JavaScript Framework for the Application development. This JavaScript framework is totally new & written, based on TypeScript.

We will follow the steps, given below, to learn, how we install it to our Application,
    Manage Client-side Dependencies
    Use Package Manager (NPM).
    Use Task Runner.
    Bootstrapping using Type Script.

Client-side Dependencies: We need to add a JSON config file for Node Package Manager(NPM). Click add > New Item > Client- Side > npm Configuration File and click OK.

Open our newly added npm config file and modify the initial settings.

Package.json
    {  
        "version": "1.0.0",  
        "name": "asp.net",  
        "private": true,  
        "Dependencies": {  
            "angular2": "2.0.0-beta.9",  
            "systemjs": "0.19.24",  
            "es6-shim": "^0.33.3",  
            "rxjs": "5.0.0-beta.2"  
        },  
        "devDependencies": {  
            "gulp": "3.8.11",  
            "gulp-concat": "2.5.2",  
            "gulp-cssmin": "0.1.7",  
            "gulp-uglify": "1.2.0",  
            "rimraf": "2.2.8"  
        }  
    }  

In the dependencies section, we need to add AngularJS2 with other dependencies and they are for:
    Es6-shim is a library, which provides compatibility on old environment.
    Rxjs provides more modular file structure in a variety of formats.
    SystemJS enables System.import TypeScript files directly.

As you can see, there are two different type objects; one is dependencies, which are used for the production purposes & the other one is devDependencies for development related things, like gulp is to run different tasks.

Click save. It will restore automatically. Here, we have all our required packages in the Dependencies section.

In this application we have added another package manager called Bower, Click add > New Item > Client- Side > Bower Configuration File then click Ok.

Comparing with NPM,
Bower:
    Manage html, css, js component
    Load minimal resources
    Load with flat dependencies

NPM:
    Install dependencies recursively
    Load nested dependencies
    Manage NodeJS module

Open the config file then add required dependencies in dependencies secction with specific version.

Save the JSON file after edit, it will automatically restore that package in our project. Here you can see we have added Jquery & Bootstrap package with Bower package manager.

Now, let’s add a gulp configuration file to run the task. Click Add > New Item > Client-Side. Select gulp JSON file to include.

Gulp.json
    /*
    This file in the main entry point for defining Gulp tasks and using Gulp plugins.
    Click here to learn more. http://go.microsoft.com/fwlink/?LinkId=518007
    */  
    "use strict";  
    var gulp = require("gulp");  
    var root_path = {  
        webroot: "./wwwroot/"  
    };  
    //library source  
    root_path.nmSrc = "./node_modules/";  
    //library destination  
    root_path.package_lib = root_path.webroot + "lib-npm/";  
    gulp.task("copy-systemjs", function() {  
        return gulp.src(root_path.nmSrc + '/systemjs/dist/**/*.*', {  
            base: root_path.nmSrc + '/systemjs/dist/'  
        }).pipe(gulp.dest(root_path.package_lib + '/systemjs/'));  
    });  
    gulp.task("copy-angular2", function() {  
        return gulp.src(root_path.nmSrc + '/angular2/bundles/**/*.js', {  
            base: root_path.nmSrc + '/angular2/bundles/'  
        }).pipe(gulp.dest(root_path.package_lib + '/angular2/'));  
    });  
    gulp.task("copy-es6-shim", function() {  
        return gulp.src(root_path.nmSrc + '/es6-shim/es6-sh*', {  
            base: root_path.nmSrc + '/es6-shim/'  
        }).pipe(gulp.dest(root_path.package_lib + '/es6-shim/'));  
    });  
    gulp.task("copy-rxjs", function() {  
        return gulp.src(root_path.nmSrc + '/rxjs/bundles/*.*', {  
            base: root_path.nmSrc + '/rxjs/bundles/'  
        }).pipe(gulp.dest(root_path.package_lib + '/rxjs/'));  
    });  
    gulp.task("copy-all", ["copy-rxjs", 'copy-angular2', 'copy-systemjs', 'copy-es6-shim']);  

To run the task, right click on Gulp.json file to reload.

Right click on copy-all & click run.

Task run & finish.

In Solution Explorer, all the required packages are copied. We also need to put the type definitions for es6-shim(typing folder), without this, it will cause error - "Cannot find name 'Promise'".

Bootstrapping with TypeScript

tsConfig.json
    {  
        "compilerOptions": {  
            "noImplicitAny": false,  
            "noEmitOnError": true,  
            "removeComments": false,  
            "sourceMap": true,  
            "target": "es5",  
            //add this to compile app component  
            "emitDecoratorMetadata": true,  
            "experimentalDecorators": true,  
            "module": "system",  
            "moduleResolution": "node"  
        },  
        "exclude": ["node_modules", "wwwroot/lib"]  
    }  

noImplicitAny : Raise an error on the expressions and declarations with an implied ‘any’ type.
noEmitOnError : Do not emit outputs, if any errors were reported.
Target : Specify ECMAScript target version: ‘es5’ (default), ‘es5’, or ‘es6’.
experimentalDecorators : Enables an experimental support for ES7 decorators.

Create an app folder for .ts file in wwwroot folder.

In Solution Explorer, you may add the files, given below.

In main.ts code snippet, bootstrap AngularJS with importing the component.

    import {bootstrap} from 'angular2/platform/browser';  
    import {AppComponent} from './app.component';  
    import {enableProdMode} from 'angular2/core';  
      
    enableProdMode();  
    bootstrap(AppComponent);  

Component: imports the Component function from Angular 2 library; use of import, app component class can be imported from other component.
import {Component} from 'angular2/core';

    @Component({  
        selector: 'core-app',  
        template: '<h3>Welcome to .NET Core 1.0 + MVC6 + Angular 2</h3>'  
    })  
    export class AppComponent {}  

MVC View: It’s time to update our layout & linkup the library.

Now, we will add the reference to our layout page.
    <!DOCTYPE html>  
    <html>  
      
    <head>  
        <meta name="viewport" content="width=device-width" />  
        <title>@ViewBag.Title</title>  
        <script src="~/lib-npm/es6-shim/es6-shim.js"></script>  
        <script src="~/lib-npm/angular2/angular2-polyfills.js"></script>  
        <script src="~/lib-npm/systemjs/system.src.js"></script>  
        <script src="~/lib-npm/rxjs/Rx.js"></script>  
        <script src="~/lib-npm/angular2/angular2.js"></script>  
    </head>  
      
    <body>  
        <div> @RenderBody() </div> @RenderSection("scripts", required: false) </body>  
      
    </html> Index.cshtml @{ ViewData["Title"] = "Home Page"; }  
    <core-app>  
        <div>  
            <p><img src="~/img/ajax_small.gif" /> Please wait ...</p>  
        </div>  
    </core-app> @section Scripts {  
    <script>  
        System.config({  
            packages: {  
                'app': {  
                    defaultExtension: 'js'  
                }  
            },  
        });  
        System.import('app/main').then(null, console.error.bind(console));  
    </script> }  

One more thing to do is to enable the static file serving. Add this line to startup config method.
app.UseStaticFiles();

Build & run application

Finally, build & run the Application.

Here, we can see our app is working with AngularJS2.

In this article, we are going to create an ASP.Net Core MVC application that generates QR Code for different purposes like Email, Website, Bookmark Websites, SMS, WhatsApp, etc. For this, we are going to use NuGet package called QRCoder.

About QRCoder NuGet Package
QRCoder is a simple library, written in C#.NET, which enables you to create QR codes. It hasn't any dependencies on other libraries and is available as .NET Framework and .NET Core PCL version on NuGet.

QRCoder provides many types of QR Codes but in this article, I will use only the following types.

    URL
    Bookmark Website
    Send SMS
    Send WhatsApp Message
    Compose Email
    Connect To WIFI

Create ASP.Net Core MVC project.

Step 1
Open Visual Studio and click on Create New Project.

Step 2
Select ASP.NET CORE Web App (Model-View-Controller) Template as shown in the below image and click on next button.

Step 3
Configure your project by specifying the name of the project and the location where you want to save your project.

Step 4
Select the version of the .Net Core framework you want to use and click on create button.
Add New Controller

Step 1
Right Click on Controller Folder then click on Add then Controller.

Step 2
Select MVC Empty Controller. And give a name whatever you want here I gave QRCode.

Add NuGet Package
Step 1
Right click on your project and then click on Manage NuGet Packages.

Step 2
Search for QRCoder in browse tab.

Step 3
Click on the install button and it will install in your project.

Create a new Model Class
For transferring data from controller to view and view to controller we have to use model class.

Step 1
For creating a model right click on the Model folder and click on Add then class.

Step 2
Give a suitable name for your class, Here I gave QRCodeModel.

Step 3
Create required properties in your class. As you can see in the below code I have created different properties for different types of QR Codes.
public class QRCodeModel {
    public int QRCodeType {
        get;
        set;
    }
    public string QRImageURL {
        get;
        set;
    }
    //for bookmark qr code
    public string BookmarkTitle {
        get;
        set;
    }
    public string BookmarkURL {
        get;
        set;
    }
    // for email qr codes
    public string ReceiverEmailAddress {
        get;
        set;
    }
    public string EmailSubject {
        get;
        set;
    }
    public string EmailMessage {
        get;
        set;
    }
    //for sms qr codes
    public string SMSPhoneNumber {
        get;
        set;
    }
    public string SMSBody {
        get;
        set;
    }
    //for website
    public string WebsiteURL {
        get;
        set;
    }
    // for whatsapp qr message code
    public string WhatsAppNumber {
        get;
        set;
    }
    public string WhatsAppMessage {
        get;
        set;
    }
    // for wifi qr code
    public string WIFIName {
        get;
        set;
    }
    public string WIFIPassword {
        get;
        set;
    }
}

Design View

Step 1
Create an action method in your controller as you want. Here I used the index action method.

Step 2
Right-click on the action method and click on Add View to add a new view.

Step 3
Return the model from the controller which you have created. If you want to pass some extra data you can pass it. Here as you see in the below code I just created object of model and pass that model to view.
public IActionResult Index() {
    QRCodeModel model = new QRCodeModel();
    return View(model);
}

Step 4
Design your view as per your requirements.
@model QRCodeModel
@{
    ViewData["Title"] = "Generate QR Code";
}

<form asp-action="Index">

    <div class="row mt-2">
        <div class="col-lg-6 col-md-6 col-sm-12">
            <label>Select QR Code Type</label>
            <select asp-for="QRCodeType" id="QRCodeType" class="form-control" onchange="onQRCodeTypeChange()">
                <option value="1">Website</option>
                <option value="2">Bookmark URL</option>
                <option value="3">SMS</option>
                <option value="4">WhatsApp</option>
                <option value="5">Email</option>
                <option value="6">WIFI</option>
            </select>
        </div>
    </div>

    <!--  Website  -->
    <div class="row mt-2 hideDiv" id="DIV1">
        <div class="col-lg-6 col-md-6 col-sm-12">
            <label>Enter your website URL</label>
            <input autocomplete="off" type="url" asp-for="WebsiteURL" class="form-control" />
        </div>
    </div>

    <!-- Book Mark URL   -->
    <div class="row mt-2 hideDiv" id="DIV2">
        <div class="col-lg-6 col-md-6 col-sm-12">
            <label>Enter your URL</label>
            <input type="url" asp-for="BookmarkURL" class="form-control" autocomplete="off" />
        </div>
    </div>

    <!--  SMS  -->
    <div id="DIV3" class="hideDiv">
        <div class="row mt-2">
            <div class="col-lg-6 col-md-6 col-sm-12">
                <label>Enter Phone Number with country code(eg. +91)</label>
                <input type="text" asp-for="SMSPhoneNumber" class="form-control" autocomplete="off" />
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-lg-6 col-md-6 col-sm-12">
                <label>Enter your Message</label>
                <textarea asp-for="SMSBody" class="form-control"></textarea>
            </div>
        </div>
    </div>

    <!--  Whats App Message  -->
    <div id="DIV4" class="hideDiv">
        <div class="row mt-2">
            <div class="col-lg-6 col-md-6 col-sm-12">
                <label>Enter WhatsApp Number with country code(eg. +91)</label>
                <input type="text" asp-for="WhatsAppNumber" class="form-control" autocomplete="off" />
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-lg-6 col-md-6 col-sm-12">
                <label>Enter your Message</label>
                <textarea asp-for="WhatsAppMessage" class="form-control"></textarea>
            </div>
        </div>
    </div>

    <!--  Compose Email  -->
    <div id="DIV5" class="hideDiv">
        <div class="row mt-2">
            <div class="col-lg-6 col-md-6 col-sm-12">
                <label>Enter Receive's Email Address</label>
                <input type="text" asp-for="ReceiverEmailAddress" class="form-control" autocomplete="off" />
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-lg-6 col-md-6 col-sm-12">
                <label>Enter Email Subject</label>
                <input type="text" asp-for="EmailSubject" class="form-control" autocomplete="off" />
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-lg-6 col-md-6 col-sm-12">
                <label>Enter Email Message</label>
                <textarea asp-for="EmailMessage" class="form-control"></textarea>
            </div>
        </div>
    </div>

    <!--   WIFI   -->
    <div id="DIV6" class="hideDiv">
        <div class="row mt-2">
            <div class="col-lg-6 col-md-6 col-sm-12">
                <label>Enter WIFI Name</label>
                <input type="text" asp-for="WIFIName" class="form-control" autocomplete="off" />
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-lg-6 col-md-6 col-sm-12">
                <label>Enter WIFI Password</label>
                <input type="text" asp-for="WIFIPassword" class="form-control" autocomplete="off" />
            </div>
        </div>
    </div>

    <div class="row mt-2">
        <div class="col-lg-6 col-md-6 col-sm-12">
            <button type="submit" class="btn btn-primary">Generate</button>
            <button type="reset" class="btn btn-secondary">Reset</button>
        </div>
    </div>

    @if (!string.IsNullOrEmpty(Model.QRImageURL))
    {
        <div class="row mt-2" id="qrCodeImage">
            <div class="col-lg-6 col-md-6 col-sm-12">
                <img height="250" width="250" src="@Model.QRImageURL" />
            </div>
        </div>
    }

</form>

@section Scripts{

    <script>
        $(document).ready(function () {
            $("#QRCodeType").trigger("change");
        });

        function onQRCodeTypeChange() {
            let qrcodeType = $("#QRCodeType").val();
            $(".hideDiv").hide();
            $("#DIV" + qrcodeType).show();
        }
    </script>
}

Code Explanation
As you can see in the above HTML code I created inputs as per my properties.

Here I add drop-down for QR Code type and based on that type I show and hide DIV of codes.
<div class="row mt-2">
  <div class="col-lg-6 col-md-6 col-sm-12">
    <label>Select QR Code Type</label>
    <select asp-for="QRCodeType" id="QRCodeType" class="form-control" onchange="onQRCodeTypeChange()">
      <option value="1">Website</option>
      <option value="2">Bookmark URL</option>
      <option value="3">SMS</option>
      <option value="4">WhatsApp</option>
      <option value="5">Email</option>
      <option value="6">WIFI</option>
    </select>
  </div>
</div>

For different types of QR Codes, I have created different div and gave an id to that div same as I gave the value in dropdown. Also gave same class name to all div.

At bottom, there are two buttons for submitting and resetting page.

Below button, there is an image that shows QR Code Image when the view return from controller after generating QR Code. Here we directly pass QR Code Image as base64 string instead of saving image and then show it on view side.
@if (!string.IsNullOrEmpty(Model.QRImageURL))
{
    <div class="row mt-2" id="qrCodeImage">
        <div class="col-lg-6 col-md-6 col-sm-12">
            <img height="250" width="250" src="@Model.QRImageURL" />
        </div>
    </div>
}

At last, there is JavaScript code in the Scripts section which contain a function called onQRCodeTypeChange which gets value of QR Code Type drop-down then hide all the divs and only show which has id same as drop down value.
function onQRCodeTypeChange() {
    let qrcodeType = $("#QRCodeType").val();
    $(".hideDiv").hide();
    $("#DIV" + qrcodeType).show();
}

On the document ready event I triggered the change event of QR Code type drop-down.
$(document).ready(function() {
    $("#QRCodeType").trigger("change");
});

Code for Generate QR Code
Create post action method in your controller to post data from form. In this method, we are going to generate QR Code as per its type.
[HttpPost]
public IActionResult Index(QRCodeModel model) {
    Payload payload = null;
    switch (model.QRCodeType) {
        case 1: // website url
            payload = new Url(model.WebsiteURL);
            break;
        case 2: // bookmark url
            payload = new Bookmark(model.BookmarkURL, model.BookmarkURL);
            break;
        case 3: // compose sms
            payload = new SMS(model.SMSPhoneNumber, model.SMSBody);
            break;
        case 4: // compose whatsapp message
            payload = new WhatsAppMessage(model.WhatsAppNumber, model.WhatsAppMessage);
            break;
        case 5: //compose email
            payload = new Mail(model.ReceiverEmailAddress, model.EmailSubject, model.EmailMessage);
            break;
        case 6: // wifi qr code
            payload = new WiFi(model.WIFIName, model.WIFIPassword, WiFi.Authentication.WPA);
            break;
    }
    QRCodeGenerator qrGenerator = new QRCodeGenerator();
    QRCodeData qrCodeData = qrGenerator.CreateQrCode(payload);
    QRCode qrCode = new QRCode(qrCodeData);
    var qrCodeAsBitmap = qrCode.GetGraphic(20);
    // use this when you want to show your logo in middle of QR Code and change color of qr code
    //Bitmap logoImage = new Bitmap(@"wwwroot/img/Virat-Kohli.jpg");
    //var qrCodeAsBitmap = qrCode.GetGraphic(20, Color.Black, Color.Red, logoImage);
    string base64String = Convert.ToBase64String(BitmapToByteArray(qrCodeAsBitmap));
    model.QRImageURL = "data:image/png;base64," + base64String;
    return View("Index", model);
}
private byte[] BitmapToByteArray(Bitmap bitmap) {
    using(MemoryStream ms = new MemoryStream()) {
        bitmap.Save(ms, ImageFormat.Png);
        return ms.ToArray();
    }
}

Step 1
Create a new object of QRCodeGenerator class.
QRCodeGenerator qrGenerator = new QRCodeGenerator();

Step 2
Call the CreateQrCode method using this object and pass payload in its constructor. Payload is an object of PayloadGenerator.Payload type. There are different payload types as per QR Code types. We will discuss different types of payload later in this article.
QRCodeData qrCodeData = qrGenerator.CreateQrCode(payload);

Step 3
Create object of QRCode type and Pass QR Data object to its constructor.
QRCode qrCode = new QRCode(qrCodeData);

Step 4
Call GetGraphic method of this QR Code object which take one integer parameter which define pixels per module.
var qrCodeAsBitmap = qrCode.GetGraphic(20);

There are also some overloaded methods using which you can change the color of QR Code and also set logo in QR Code.
// use this when you want to show your logo in middle of QR Code and change color of qr code
Bitmap logoImage = new Bitmap(@"wwwroot/img/Peter.jpg");
var qrCodeAsBitmap = qrCode.GetGraphic(20, Color.Black, Color.Red, logoImage);

Step 5
GetGraphic method return bitmap image as return type. You can save this image in your local path but here I convert this bitmap image to byte array and then convert this byte array to base64 string which I’m going to bind in QRImageURL property and pass it to the view so user can view this QR Code.
string base64String = Convert.ToBase64String(BitmapToByteArray(qrCodeAsBitmap));
model.QRImageURL = "data:image/png;base64," + base64String;

For converting bitmap to byte first convert it to memory stream and then get byte array from this stream in user define method BitmapToByteArray. As you can see in below code.
private byte[] BitmapToByteArray(Bitmap bitmap) {
    using(MemoryStream ms = new MemoryStream()) {
        bitmap.Save(ms, ImageFormat.Png);
        return ms.ToArray();
    }
}

Step 6
Return view data after generating QR Code so user can see Generated QR Code in their browser.
Followings are different payload type which is used in this article.
Payload payload = null;

URL Payload
To generate QR Code that opens URL or any Website QRCoder provider payload type of URL class.

This class takes one argument in its constructor which is URL of website.
payload = new Url(model.WebsiteURL);

Bookmark Payload
To generate QR Code for bookmark type we have to Use Bookmark payload.
Bookmark class’s constructor takes two parameters first is the URL of the website and second is the title of the bookmark.
payload = new Bookmark(model.BookmarkURL, model.BookmarkURL);

SMS Payload
To generate QR Code for composing SMS we have to pass payload of SMS type. QR Code provider SMS class for this type of payload.

SMS class’s constructor takes two parameters first is phone number to whom you want to send the SMS and the second is the message you want to send. Message parameter s optional you can only pass phone number to it.
payload = new SMS(model.SMSPhoneNumber, model.SMSBody);

WhatsApp Message Payload
To generate QR Code that send WhatsApp message we have to pass WhatsAppMessage payload. QRCoder provides WhatsAppMessage class to generate payload.
WhatsAppMessage provides two overloaded methods one only takes one parameter which is message only and second takes two parameter WhatsApp number and message both.
payload = new WhatsAppMessage(model.WhatsAppNumber, model.WhatsAppMessage);

Mail Payload
To generate QR Code which compose email we have to use MAIL payload.

Mail class’s constructor does not required any parameter. It’s all parameters are by default set to null. But here we are going to pass receiver email address, Subject, and body of mail.
payload = new Mail(model.ReceiverEmailAddress, model.EmailSubject, model.EmailMessage);

WiFi Payload
To generate QR Code which connect to WIFI we have to pass data in WIFI payload.
WiFi class’s constructor takes three required parameter wifi name, wifi password, and authentication mode (WEP, WPA, nopass). You can pass any theme but mostly WPA is used in all wifi so here I by default set it.
payload = new WiFi(model.WIFIName, model.WIFIPassword, WiFi.Authentication.WPA);

In this article, I am going to explain to you, the default folder structure of an ASP.NET Core MVC 6.0 web application and describe the purpose of each folder. In my previous article, we created an empty ASP.NET Core MVC 6.0 Project and the structure of the project as shown in the following image.

Let’s start exploring each folder and file that exists in the Project Structure for easy understanding.

Project Folder Structure Description
The details of the default project structure can be seen in the solution explorer, it displays all the projects related to a single solution.

.csproj File
Double click on the project name in Solution Explorer to open .csproj file in the editor. Right-click on the project and then click on Edit Project File in order to edit the .csproj file. As shown in the following image.

Once clicked on Edit Project File, .csproj file will be opened in Visual Studio as shown below.

As you can see the project’s SDK is Microsoft.NET.Sdk.Web. The target framework is net6.0 indicating that we are using .NET 6. Notice the Nullable and ImplicitUsings elements.
The <Nullable> elements decide the project wide behaviour of Nullable of Nullable reference types. The value of enable indicates that the Nullable reference types are enabled for the project.

The < ImplicitUsings > element can be used to enable or disable. When < ImplicitUsings > is set to enable, certain namespaces are implicitly imported for you.

Connected Services
It contains the details about all the service references added to the project. A new service can be added here, for example, if you want to add access to Cloud Storage of Azure Storage you can add the service here. As shown in the following image.

Dependencies
The Dependencies node contains all the references of the NuGet packages used in the project. Here the Frameworks node contains reference two most important dotnet core runtime and asp.net core runtime libraries. Project contains all the installed server-side NuGet packages, as shown below.

Properties
Properties folder contains a launchSettings.json file, which containing all the information required to lunch the application. Configuration details about what action to perform when the application is executed and contains details like IIS settings, application URLs, authentication, SSL port details, etc.

WWWroot
This is the webroot folder and all the static files required by the project are stored and served from here. The webroot folder contains a sub-folder to categorize the static file types, like all the Cascading Stylesheet files, are stored in the CSS folder, all the javascript files are stored in the js folder and the external libraries like bootstrap, jquery are kept in the library folder.

Generally, there should be separate folders for the different types of static files such as JavaScript, CSS, Images, library scripts, etc. in the wwwroot folder as shown below.

Controllers
Controller handles all the incoming requests. All the controllers needed for the project are stored here. Controllers are responsible for handling end user interaction, manipulating the model and choose a view to display the UI. Each controller class inherits a Controller class or ControllerBase class. Each controller class has “Controller” as a suffix on the class name, for example, the default “HomeController.cs” file can be found here. As shown below.

Models
A Model represents the data of the application and a ViewModel represents data that will be displayed in the UI. The models folder contains all the domain or entity classes. Please note user can add folders of his choice to create logical grouping in the project.

Views
A view represents the user interface that displays ViewModel or Model data and can provide an option to let the user modify them. Mostly a folder in name of the controller is created and all the views related to it are stored in it. Here HomeController related view Index.cshtml and Privacy.cshtml is stored in Home folder and all the shared view across the application is kept in Shared folder. Under this shared folder there are _Layout.cshtml, _ValidationScriptsPartial.cshtml and Error.cshtml view files. There are two more view files, _ViewImports.cshtml and _ViewStart.cshtml under the view folder.

appsettings.json
This file contains the application settings, for example, configuration details like logging details, database connection details.

Program.CS
This class is the entry point of the web application. It builts the host and executes the run method.

I hope the article helped you to understand ASP.NET Core MVC 6.0 Project Structure.

Conclusion
In this article we explained, the folder structure of ASP.NET Core MVC 6.0 application. I hope this article is useful to understand.