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

 

Export Data to Excel with ASP.NET MVC

In creating a system there are times that we need to export data to excel, it could either be for reports or for data examination. This is what this article is all about.

Below are one of those method. To start, we need to create a fresh project of ASP.NET MVC. If this is your first time in creating ASP.NET MVC, you may refer to this article “How to start with ASP.NET MVC“.

Output Preview:

Export data to excel

Final Output

Let’s start:

I assume you have already created a new project with default MVC template.

First, open HomeController. Located inside Controller folder, remove all action result except for index().

It should look like this:

Export data to excel

Home Controller

Second, let’s create a view where we can display sample data into a table.To open your view navigate to Views->Home->index.cshtml or simply right click inside index action result and select Go to View.

Export data to excel

Navigate to View

Replace all code from your index.cshtml with the code below.

Export to excel

Employee Age Address BirthDate BirthPlace

 

 

Third, create a model class inside Models folder. This will be used in creating our sample data and declare all properties shown below.

Code:

Image preview:

Export data to excel

TableModel

Fourth, Create a sample data. Navigate back to your HomeController and create method sample_data. 

Code:

Fifth, fill html table that we created a while ago using Jquery. Navigate back to your controller view.Add the code below.

Code:

Lastly, create exportToExcel method inside your HomeController.

Code:

And we’re done… To run project simply press F5 key from your keyboard. Thank you for reading.. Happy coding!!

To review your work please refer from the full code below… 🙂

Full Code:

TableModel.cs

HomeController.cs

Index.cshtml

Final output:

Export data to excel

Final Output


Post you may like:

[pt_view id=”2384ae03it”]

JQuery Plugin – DataTable with child Table(ASP.NET MVC)

JQuery Plugin

Jquery DataTable is a JQuery plugin that converts or transforms ordinary HTML table into an enhanced table and adds advance interaction controls like table sorting, filtering, and pagination.

Visit this link for Jquery DataTable documentation.

In this thread, we will use Jquery DataTable to create a simple table with child rows.

Note:

  • I am using Visual Studio 2013
  • I’m using the default controller for MVC template which is HomeController and it’s view index.cshtml located at Views-Home folder in your solution explorer. 

To start, create a new ASP.NET MVC Web Application. If this is your first time creating a project in MVC visit this link How to start ASP.NET MVC Application. And if you are not familiar with its file structure you might as well read this thread ASP.NET MVC file structure.

I assume you have already created a project. From your solution explorer navigate to Views->Home and open file index.cshtml.

First, construct your table.

Note:

  • load_child_table() – > JavaScript function that load child row.
  • main_table -> unique class use to determine the closest tr from the selected td

Second, create a JavaScript function use for DataTable conversion

Note: To use Jquery Datatable declare the script below

  • <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>
  • <link rel=”Stylesheet” href=”https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css” />
  • <script type=”text/javascript” src=”https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js”></script>

Third, design your child table in a script

Fourth, create a document.ready function to load our function when our form is ready.

Lastly, you can run your project by pressing F5 from your keyboard or by pressing Ctrl + F5 if to run the project without debugging mode.

Project output:

JQuery Plugin

Main table

      Table with child row

JQuery Plugin

Table with child row

 

Thank you for reading!!

Happy coding !!!

Below is the code summary for my index file.

Code Summary:

 

 

Reporting-Creating ReportViewer Report

Reporting

1. Reporting – Create a new windows application project in your visual studio 2013 then add report viewer to your project.

Reporting

Add ReportViewer

2. Dock report viewer to your form.

Reporting

Dock ReportViewer

3. Add Dataset to your project by simply right clicking on your project name and selecting Add-New Item

Reporting

Add New Item

4. Select data from the left pane and search for Dataset from the middle pane

Reporting

Add Dataset

5. Open Dataset you just added and add DataTable. See image below.

Reporting

Create DataTable

6. Add a column to your table.

Reporting

Add Column

7. Add Report to your project (RDLC file). Right-click again on your project name in your solution explorer and select Add->New Item, then select Reporting from the left pane and choosing Report from the middle pane.

Reporting

Add RDLC Report

8. Open your RDLC report then add List tools from your toolbox located on the left side of your RDLC designer.

Reporting

Add List

9. Choose Dataset for your List Table. In my case it is Dataset1.

Reporting

Choose DataSource

10. Add a column to your list by simply right clicking on any cell and selecting Insert Column.

Reporting

Add Column

11. Manually add column name to your List Table from your DataTable. See image below.

Reporting

Add Column name

12. This is my final view of the design for my RDLC report.

 

Reporting

Final RDLC Design

13. To add Data to our list and display it in our reportviewer from our form. Copy the code below. I write my code inside form load event .

Note:
ReportViewer.Report1.rdlc

• ReportViewer -> Name of my project
• Report1.rdlc -> Name of my rdlc report
• DataSet1 -> Dataset Name

14. Then run your project by simply clicking F5 on your keyboard.

Reporting

Final View

Than you for reading!!

Happy Coding!!

Easy Steps to Implement Partial View in Asp.Net MVC

One of the best ways to implement a dynamic table without loading the whole page is by using Jquery Ajax request. Asp.Net MVC offers Ajax helpers to easily achieve this functionality. Partial View in Asp.Net MVC is one of its strengths. In this tutorial, we are going to use Ajax.Actionlink() to load Partial View in MVC.

Let’s start: 

Desired output: Partial View in Asp.Net

Partial View in Asp.Net

If this is your first time creating an MVC Web Application project refer to the thread below
How to start with ASP.NET MVC Web Application
ASP.NET MVC File structure

First, create a new model class for our model binding in creating a list of our sample data later in this tutorial. In my case, I name it as myModels.cs.

Partial View in Asp.Net

myModel

Declare following properties in your model class

Create a partial view inside View->Shared folder

Partial View in Asp.Net

• To add right-click on the Shared folder under Views and select Add->New Item and a new window will pop-up, select Web from the left pane of the window then select MVC 5 View Page(Razor) in the middle pane. Name your view, in my case I name it as _partialview.

Partial View in Asp.Net

This partial view will contain table design loaded to our main view

Code:

Bind this partial view with our model and receive the list pass from our controller using the code below.

• @model IEnumerable<UsingPartialView_MVC.Models.myModels>

And drop into C# code from the view and use for each loop to populate list to our table.
Full Code:

From your HomeController create a list of sample data

Partial View in Asp.Net

Code:

Then create a method that will pass the sample data above to our partial view and return partial view to our main view.

In your index create your main view declare this script to enable Jquery
• <script src=”//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js” type=”text/javascript”></script>
• <script src=”/Scripts/jquery.unobtrusive-ajax.js” type=”text/javascript”></script>

To install jquery.unobstrusive-ajax.js used NuGet Package manager console. To open NuGet Console navigate to tools->NuGet Package Manager->Package Manager Console.

Partial View in Asp.Net

And then execute command: PM> Install-Package Microsoft.jQuery.Unobtrusive.Ajax

Partial View in Asp.Net

Create Ajax Helper

• HttpMethod = “GET”, -> specify request method
• UpdateTargetId = “partialview”, – > specify which DIV to be updated with the partial view
• InsertionMode = InsertionMode.Replace – > insertion method. Replace all element inside a DIV

Then we will create an empty DIV that will serve as the container for our partial view.

 

Final Output:

Partial View in Asp.Net

Code Summary
myModel:

_partialview:

HomeController:

Index.html:

 

Thank you for reading..

Enjoy coding!!!

 

 


Post you may like:

[pt_view id=”2384ae03it”]

PHP Code for Encryption and Decryption

PHP Code for Encryption and Decryption – We will create one of encryption mechanism in this blog. Below are codes on how to implement triple des encryption.

Let’s Start:

First, Create a php file inside htdocs folder if you are using XAMP or WAMP navigate to C:\xampp\htdocs.

Copy code below:

Encryption:

 

Decryption:

 

To use and try this function

 

Code Summary:

 


Post you may like:

[pt_view id=”2384ae03it”]

Creating ASP.NET Web Service

ASP.NET Web Service – Web service is a software that is used to exchange XML-based information that uses the internet to interact with any other application called its client. This software provides a modular method that could be used by multiple applications through the web.

For detailed information about Web Service visit this thread on WIKIPEDIA

See tutorial below on starting your web service application in ASP.NET.

Let’s start:

Note:

  • I’m using Visual Studio 2013
  • Net Framework 3.5

Step 1. First start by opening your visual studio and create new Web Site project.

ASP.NET Web Service

Create New Project

Step 2. From new web site window choose .Net Framework 3.5 from the drop down just above your middle pane. See image below.

ASP.NET Web Service

.Net Framework 3.5

Step 3. Choose ASP.NET Web Service from the middle pane and rename your project

ASP.NET Web Service

ASP.NET Web Service

Step 4. The image below is the solution explorer of a newly created website project.

ASP.NET Web Service

Solution Explorer

Step 5. Open Service.cs. This file is your main class that contains your web method that is used for your web service method.

Note:

  • [WebMethod] >> this is used as a declaration for the method that should be accessible on the web.
  • This example code returns Hello World string as the output.

This image is the default code generated for a new Web Site project.

ASP.NET Web Service

Service.cs

Step 6. To run project hit F5 on your keyboard to run project in debugging mode or hit CTRL + f5 to run without debugging mode. Your project will display on a browser containing your method HelloWorld().

 

ASP.NET Web Service

Web Service

Step 7. To test how web service work click on your method and click  invoke button.

ASP.NET Web Service

Invoke

It should bring you to a new tab containing your return value Hello World. It should look like the image shown below.

ASP.NET Web Service

HelloWorld return value

You have just created your first ASP.NET Web Service project.

You can start adding your method now and consume it in a client side application.

Thank you for reading. Happy coding!!

 


Post you may like:

[pt_view id=”2384ae03it”]

 

LinQ Tutorial on DataTable – C#

LinQ Tutorial
LinQ Tutorial

This LINQ tutorial will show you some basic codes on implementing LINQ in C#.LINQ is an acronym for Language Integrated Query, which is descriptive for where it’s used and what it does. The Language Integrated part means that LINQ is part of programming language syntax. To have an overall view of the definition of LINQ please refer to this site I find csharp-station.com. Below are basic codes for implementing LINQ on a DataTable.

For more tutorial visit this link ASP.NET MVC Developement.

CopyToDataTable();

Note:

  • Employee -> DataTable Name

Select  All

Note:

  • Employee -> DataTable Name

Select Specific column from DataTable

 

Note:

  • Name -> Table Column Name
  • Address -> Table Column Name
  • Employee -> DataTable Name

Count()

  Note:

  • Name -> Table Column Name
  • Address -> Table Column Name
  • Employee -> DataTable Name

 

Count();

 Note:

  • Name -> Table Column Name
  • Employee -> DataTable Name
  • data -> Variable

 

ToList()

Note:

  • Name -> Table Column Name
  • Address -> Table Column Name

SUM()

Note:

  • NUmberOfEmployee-> Table Column Name
  • data -> variable
  • Employee -> DataTable Name

Group BY & order by

 

 

Populate HTML Table using JQUERY

Populate HTML Table using JQUERY
A simple way to populate HTML table using JQuery

Populate HTML table using JQuery – Working in ASP.NET MVC is sometimes tricky especially if you are creating a single page application. Or if you want to optimize your system to perform much faster way in loading a bunch of data. One of the common problems we encountered is to load a list or any data to  HTML view from the controller to its view. One way to solve this is to use the default model list binding of ASP.NET MVC. But in this article, I would like to share with you a way to implement this using JQuery(Ajax request).

I assume you have a new project in visual studio 2013 or any version should do. If you have created a project with default ASP.NET MVC template HomeController will be the default controller and your view is found inside View >  Home > index.cshtml. 

Copy the code below in your index.cshtml and we should be set. Try running your project by pressing f5 and you can now see how this works.

Html Table:

Thank you for reading !!

Happy coding!!

Javascript Date Method- (MM/dd/yyyy)

Javascript date method

Javascript date methodJavascript Date Method has its own behavior in getting the date. One of the working tricks would be to separate date, month and year and concatenate it into one single string by then you can have full control of what specific format you want to achieve.

 

For ASP.NET MVC topic, you can visit ASP.NET MVC Development.

 

 

 

Javascript Date Method – Date Tricks

Below is a sample Javascript trick.

Note:

  • getMonth() -> January = 0; February = 1 ,March = 2 .
  • getDate() -> Get the day of a date
  • getFullYear() -> Get the year of a date (2017)

Output:

“11/11/2017”

Hope this helps. Thank you for reading! Happy COding!!

1 2 3 4 5