How to create custom 404 error handler in ASP.NET MVC

Custom 404 error handler – 404 Error refer to a not found resource/URL . Here’s how a default 404 Error notification looks in ASP.NET MVC.

custom 404 error handler

ASP.NET MVC has his own custom error handler that can be enable inside Web.Config file from your solution explorer.

Let’s Start:

First, to enable error redirection modify your Web.Config file.Search for <system.web> in your Web.Config and Add the code below inside the <system.web></system.web>.

Second, navigate to your Controller folder and create a controller ErrorController.This will serve as our custom error handler. Inside this controller create an action result method, let’s named it as NotFound this will return our custom view for 404 error.

Third, create a view for NotFound action result method.By default view for controller can be manually created inside View->Error folder.  Or by simply right clicking on your Not Found method inside ErrorController and selecting Add View.

custom 404 error handler

Custom Error Preview:

custom 404 error handler

 

Note: I used Bundle Config inside App_Start folder to call my custom style.css file.

custom 404 error handler

To add bundle you can simply copy the code below into your BundleConfig file where ~/Content/style.css is the location of your stylesheet and ~/Content/Custom/Error  is the name of your bundle.

  • Add(new StyleBundle(“~/Content/Custom/Error”).Include(

“~/Content/style.css”));

To call this bundle you can simply use @Styles.Render(“~/Content/Custom/Error”)

Code:

To add designed to the view we can also add icons. In my case i used the image below. Which i included inside image folder.  And used <img src=”~/images/smile.png” /> to include image in my view.

custom 404 error handler

Fourth, Create styles for your view. In my case I create a file name style.css inside content folder from solution explorer.

custom 404 error handler

Style.css Code:

And we are done. Every time a URL is invalid this error notification will appear instead of the default 404 error notification.

custom 404 error handler

Thank you for reading!! Happy coding!!

 

 

AngularJS CRUD Operation using ASP.NET MVC

I am a .NET Developer and I’m new in AngularJS. I started using AngularJS in about a week ago and I decided to create a full AngularJS CRUD Operation using ASP.NET MVC. This article will show you how I created a project with CRUD functionality using AngularJS.

For an overview of AngularJS, you can visit  AngularJS introduction from this site  https://docs.angularjs.org/guide/introduction.

AgularJS

To start, below are the summary of the steps I have done to fully implement AngularJS CRUD project.

AngularJS CRUD Operation using ASP.NET
  • Create SQL Database
  • Create CRUD Stored Procedure
  • Start a New ASP.NET MVC project
  • Create a separate Class for CRUD functions
  • Create CRUD Action Result in main controller( HomeController)
  • Design a View (Front End Design) with AngularJS App

To make this article much easier I copied all the code I have used in every associated class file in the steps above.

Let’s Start:

1. Create SQL Database:

To execute CRUD operation we need to have data storage. I assume you have already used SQL Database. Create a database and a table. In my case, I created a database named EmployeeDB and a table named EmployeeRecord. Image below.

AngularJS CRUD Operation using ASP.NET

2. Create CRUD Stored Procedure

If this is your first time using a SQL stored procedure you can refer to my previous article How to create a stored procedure.  Below are the Stored Procedures and the associated code I used.

AngularJS CRUD Operation using ASP.NET

 

Code:
DeleteEmployee Procedure

SQL Stored Procedure – InsertEmployee

SelectEmployee Procedure

UpdateEmployee Procedure

3. Start a New ASP.NET MVC project

Now, that we have already prepared our backend, which is the SQL Database and stored procedures. We can now start creating our project. Open your Visual Studio and create a new ASP.NET Web Application using MVC template. If you have no idea how to start a project you can visit my previous article on how to start in ASP.NET MVC.

4. Create a separate Class for CRUD functions

To organize our code I suggest we create a separate class containing all the connection we need to established connectivity to our SQL Stored Procedures.

But first, let’s create a folder inside our solution explorer by simply right-clicking on the project name and selecting Add > New Folder. See image below

AngularJS CRUD Operation using ASP.NET

Inside that folder create a Class. Add  Class by simply right-clicking your project name and select Add > Class. Below are the folder and class I created.

AngularJS CRUD Operation using ASP.NET

As you can see from the image above I named my folder as CRUD_function and my class as CRUD. Now, let’s start adding code. Open CRUD.cs and copy the code snippet below. This is where we put all our connection to the SQL Stored procedures.

Note:  To view your connection string you can refer to my previous article Manual viewing SQL Connection String.

CRUD.cs – Code:

5. Create CRUD Action Result in main controller( HomeController)

In this step, we will create an Action Result method in our main controller. If you are using the default MVC template, your default controller is HomeController. Located inside the folder Controller. Open HomeController. Copy the code snippet below.

HomeController.cs – Codes:

6. Design a View (Front End Design) with AngularJS App

After we have fully created all the necessary CRUD functions that we need, let’s start creating our front-end design with AngularJS framework. Navigate to your default view which is located inside the folder Views > Home > index.cshtml .Open index.cshtml and replace the code with the snippet below.

Project Preview:

AngularJS CRUD Operation using ASP.NET

Add of employee preview

AngularJS CRUD Operation using ASP.NET

Index.cshtml – Code: 

Note: with AngularJS Script

And we are done. Run your project and see if it works. You can comment below for technical questions about this article.

Thank you for reading!!

Happy Coding!!

SignalR Chat Application with ASP.NET MVC

SignalR Chat App With ASP.NET

SignalR Chat App With ASP.NET – This article will show you an actual application using SignalR in ASP.NET MVC. The main goal for this project is to have an idea of how we can use SignalR in a real-time web application.

As stated on this site https://www.asp.net/signalr:

“ASP.NET SignalR is a library for ASP.NET developers that makes developing real-time web functionality easy. SignalR allows bi-directional communication between server and client. Servers can now push content to connected clients instantly as it becomes available.

SignalR allows us to create a real-time application over HTTP. HTTP is a standard protocol used to communicate between a client and a server. Below is sample diagram of HTTP request from a client and a server.

SignalR Chat App With ASP.NET

As you can see from the diagram above their is disconnected state between client and a server. While SignalR is like a tunnel that has a bi-directional connectivity. Please see image below.

SignalR Chat App with ASP.NET

To see how SignalR works in real time. Let’s create a Web Chat Application. This application will show a real-time and stateless manner of SignalR.

SignalR Chat App With ASP.NET

Overview:

Note:  I’m using the default MVC template of ASP.NET

I assume you have already created a project or if not you can refer to this blog post How to start with asp.net MVC.

Let’s start:

First, open Nuget Package Manager. To open go to your solution explorer and right-click on your project name. Once Nuget package manager is opened, search for SignalR and install.

SignalR Chat App with ASP.NET

To verify if the assembly reference is installed. It should look like the image below.

SignalR Chat App with ASP.NET

Second, add SignalR Hub Class. To add, right-click on your project name and select add > add new item then search for hub. Then rename your hub. In my case, I name it as ChatHub.

SignalR Chat App With ASP.NET

Open your hub class and copy the code below.

Code:

Third, open your default controller which is HomeController and create a new action result. This will return our ChatView design that we are about to create in our next steps.

Code:

Fourth,create ChatView.cshtml. Go to your solution explorer and navigate to Views >Home folder then create a new view. Right-click on Home Folder and then select add > MVC 5 View Page with Razor. Choose Layout.cshml as your layout page for your view.

SignalR Chat App With ASP.NET

Copy code below to your ChatView.cshtml

Code:

Fifth, establish a connection with your SignalR library using Jquery. Copy code below to your ChatView.cshtml.

Lastly, redesign your default view which is index.cshtml inside your Views>Home Folder. Open the file and replace content with the code below.

Code:

And we are good to go. To see the final output of this project. Run your project by pressing F5. Then register two new users for testing purposes. Then open this project in Mozilla and google chrome to see a real-time chat application. See image below.

SignalR Chat App With ASP.NET

Thank you for reading!!

Happy coding!!

Code Summary:

ChatHub.cs > Hub Class

Code:

HomeController.cs > Controller

Code:

ChatView.cshtml > View

Code:

 

Index.cshtml > Home Page View

Code:

Submit Forms using AgularJS with ASP.NET MVC

AgularJS
Ways on how to submit forms using AngularJS:

I’m new to AngularJS and I was trying to create a CRUD application. While I was working on this project I run into some problem:

“How to submit a form using AngularJS with ASP.NET MVC model binding”

In this article, I would like to share with you a method I found on the internet. To start, you need to create a new MVC Project. If this is your first time in creating a project you can visit this article for a guide on how to create MVC Project in ASP.NET How to start with ASP.NET MVC.

I assume you have already created a project. To have an overview of what view we are about to create, below is the image of my final form view.

Output Preview: – Submit Forms using AgularJS

Submit Forms using AgularJS

Let’s Start:

First, create a model class. To put every file in place it is best to put your model class in your Model folder. Then declare all properties you need for your inputs in your forms.

Submit Forms using AgularJS

Model Properties:

Second, create your view. If you are using the default template of ASP.NET MVC you default controller would probably be HomeController and your default view is found under View Folder Home > index.chtml. Open the file and replace code using the snippet below.

  • Declare @using AngularCrudOperation.Models > to make model class we created a while ago accessible from the view.

There are two ways of implementing input in ASP.NET MVC view, you can either use Html Helper or proceed using a plain HTML input.

Inputs > HTML Helper

  • @Html.EditorFor(m => m.Email, new { @placeholder = “Enter email”, @class = “form-control”, required = “required”, ng_model = “model.Email” })

Code:

Third, create AngularJS script for your application. There are two scopes or function we need to create base on the view we created a while ago.

  • model > binding models with AngularJS
  • AddEmployee > function used to submit our form input using post request.
Code:

Fourth, create a POST method in your HomeController where we direct our POST request from our AngularJS App. For presentation I created an empty method with no functionality at all just to show you if the data from the input is successfully pass to the method we created. Copy the code below and test if it works.

Code:

And that is all you need to do to submit a form using angularJS. This is just a part of the CRUD application I was about to create. Stay connected with this blog and check for my latest post to be updated. Thank you for reading happy coding.

Share this post if this helps you!

Code Summary:
Model Class

HomeController

Index.cshtml

 

How: Creating Self Signed Certificate

Self Signed Certificate

As defined in sslshopper.com. A self-signed certificate is a certificate that is signed by the person creating it rather than a trusted certificate authority.

In my present job, I was given a task to integrate Third party API that uses token-based authentication and a Self-signed certificate. After days of searching, I found a way of generating an x509 certificate using OpenSSL application. To share with you how I generate an x509 certificate, below are the steps to generate a Self-signed certificate using OpenSSL.

Requirements:

Download OpenSSL for windows from the link below.

Self Signed Certificate

After you have downloaded the EXE file proceed with Installing the application. I prefer installing it in C Drive root directory. See image below.

Self Signed Certificate

After the installation navigates to your installation folder in my case it is C:\OpenSSL-Win64\bin. Copy the full path and paste it in your Environment Variable.  See Image below.

Self Signed Certificate

Environment Variable:

To open environment variables right click on My Computer or This PC for Windows 10 and choose properties.

Self Signed Certificate

System window will appear click change settings.

Self Signed Certificate

Then select the advanced tab and open Environment Variables located at the bottom right of the advance tab.

Self Signed Certificate

Now you can open Environment Variables. Copy and paste your installation directory (C:\OpenSSL-Win64\bin) to your Environment Variables path separating it with a semicolon. Now you can directly access OpenSSL using cmd.

Self Signed Certificate

Let’s start creating a Self Signed Certificate:

Step 1. Open command prompt or cmd to start creating a self-signed certificate. Create a folder from anywhere on your PC. In my case, I created a folder inside D:\sample cert. Please refer to the image below to change cmd directory to the folder you created.Type OpenSSL to start the application.

Self Signed Certificate

Step 2. Create a key and a certificate using the command below. Fill additional details for your Self-Signed certificate. Refer to the image shown below.

  • openssl req -x509 -days 365 -newkey rsa:2048 -keyout mykey.pem -out mycert.pem

Self Signed Certificate

This will create a key and certificate.

Self Signed Certificate

Step 3.  Put your key and certificate in one file using a pfx file. Self Signed CertificateUse the command below

  • openssl pkcs12 -export -in mycert.pem -inkey mykey.pem -out mycert.pfx

This will create a pfx file.

Self Signed Certificate

Step 4. Extract a public certificate from your pfx. Use the command below.

  • openssl pkcs12 -in mycert.pfx -clcerts -nokeys -out public_cert.pem

This will generate a public_cert.pem file.

Self Signed Certificate

See image below to see the files created using this steps.

Self Signed Certificate

And now your Self Signed certificate is now ready for live action. Thank you for reading. Happy Coding!!.

AngularJS with Asp.Net MVC

AngularJS
What is Angular?

AngularJS is a JavaScript framework that extends HTML attribute to help develop a dynamic Web application.

AngularJS with Asp.Net MVC

Definition of Angular JS from its Official Page:

AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. AngularJS’s data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology.

To help us understand how this framework works I create a simple asp.net MVC application that uses Angular JS framework to populate HTML table.

Output Preview:

AngularJS with Asp.Net MVC

Let’s Start:
Sample Angular JS project with asp.net MVC

First, create a fresh copy of asp.net MVC Application using Visual Studio. If this is first time creating one visit this blog post  How To Start with ASP.NET MVC Web Application.

AngularJS with Asp.Net MVC

AngularJS with Asp.Net MVC

Second, include AngularJS file inside your view (index.cshtml) to use Angular Framework

  • https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js

AngularJS with Asp.Net MVC

Third, create your HTML table view. If you are using default MVC template of ASP.NET MVC your default controller is HomeController and your default view is located at Home > index.cshtml. Open index file and replace code inside the file using the code below.

Code:

Third,  Create new action result in your controller. This will be used for the sample JSON data use to populate to our HTML table.  Refer to the code below. I used model binding for my sample JSON data.

Model – NameModel
  • Create class inside Model folder this will serve as our model properties for our sample data.

From your HomeController copy and paste code below.

Sample JSON

Fourth, From your view(Index.cshtml) create a script to call this action result (sample_JSON).

Code:

For a successful request your call response will look like this:

To get the value of the actual data we pass, you can call it using response.data  and stringtify( ex. JSON.stringtify(response.data  ))  to convert into string and output “[{\”Name\”:\”Regie\”,\”LastName\”:\”Baquero\”}]”.

And we’re done. Thank you for reading! Happy Coding!!

You can review your code using the Full Code summary below.

Model:

Home Controller

Index.cshmtl

 

Importing Excel with ASP.NET MVC

Importing excel, In my previous article, I demonstrated how to perform simple way of downloading data into excels. Now, this time I’m going to create a simple way of uploading data from excels.

Let’s Start
Output preview
Importing excel

Import Excel

First, create a new MVC project. You can name it whatever you want, In my case, I name it ImportExcel.

If this is your first time creating  MVC project please refer to this article How to start with ASP.Net MVC.

Second, add reference Excel Data reader using your NuGet Package Manager. To add right click on your project name, from your solution explorer. Like shown below.

Importing excel

Manage NuGet Packages

Then select Manage NuGet Packages and search for ExcelDataReader. Install ExcelDataReader and ExcelDataReader.Dataset.  When a green check is shown like the image below it means that the package is  already installed.

Importing excel

Add Excel Data Reader

Third, create a view for your application. In this topic, the view will look like the image shown below.

Importing excel

Navigate to your default view. If you are using default template of MVC your default controller name is HomeController that makes Home -> index.cshtml as your default view. Navigate to this file and replace all code inside this file with the code below.

Fourth, create post action result in your HomeController, this will be used to read excel file.

Note : We have created two index action result in our HomeController . First index handle HttpGet request and the other one handle HttpPost request.

HttpGet index:
  • This loads default view.

HttpPost index:
  • This received post request from the view.Which is the excel data.

Lastly, run your project by pressing F5 from you keyboard and try exporting sample excel file. Excel file should be in table format.

Sample Excel file:

Importing excel

Excel Format

Click on choose button in importing excel and select your excel file.

Importing excel

Import Excel File

Then click upload. Your final view should look like this.

Importing excel

And we are all set. Thank you for reading… Happy Coding!!

Code Summary:

Home Controller

View > Index.cshtml