Sunday, 18 February 2018

ASP.NET MVC Implement Autocomplete TextBox using jQuery

In this tutorial, I am going to explain you how to implement autocomplete textbox in asp.net mvc using jquery ajax. We will be using Visual Studio 2013.

Creating ASP.NET MVC Empty Application

Now the next step is to create ASP.NET MVC empty application as shown below.
Go to FileNewProject. A new window will be open as shown below.
Now go to Web and select .NET Framework 4.5 and give project name and click on OK .

Creating asp.net mvc 5 application

Now new window will open as shown below.
Now Select Empty Template, check on MVC checkbox and click on OK.

Selecting asp.net mvc 5 empty template

Now, a new project will be created as shown below.

Asp.net mvc 5 empty folder structure

Adding Models

Go to Models folder and add new class file Country.cs. Now replace all code with below code.

Share:

Saturday, 3 February 2018

Read Excel file in C# without Microsoft Office Interop Excel

In this tutorial, I am going to explain you how to read excel file in C# without using Microsoft Office Interop Excel Provider. We will be using NPOI which is .NET version of POI Java project at http://poi.apache.org/. POI is an open source project which can help you read/write xls, doc, ppt files. It has a wide application. I will be using Visual Studio 2013. Below is step by step tutorial.

Creating ASP.NET Empty Application

First step is to create ASP.NET Empty WebForm project.
Go to FileNewProject. A new window will be open as shown below.
Now go to WebVisual Studio 2012 → select .NET Framework 4.5 → select ASP.NET Empty Web Application and give project name and click on OK.

Creating asp.net 4.5 empty project

Now, an asp.net empty project will be created.

Installing NPOI using Nuget

Next step is to install NPOI. Right click on References of application and go to Manage NuGet Packages and after that a new window will open as shown below. Search for NPOI and install it as shown below.

Installing NPOI in ASP.Net

Adding WebForm

Now add a new webform i.e WebForm1.aspx file to the application. Create a gridview control as shown below.

WebForm1.aspx Code:
Share:

ASP.NET MVC file upload using Ajax jQuery in MVC

In this tutorial, I am going to explain you how to upload file in ASP.NET MVC using jQuery Ajax method. I will be using Visual Studio 2013. Below is step by step tutorial.

Creating ASP.NET MVC Empty Application

Now the next step is to create ASP.NET MVC empty application as shown below.
Go to FileNewProject. A new window will be open as shown below.
Now go to Web and select .NET Framework 4.5 and give project name and click on OK .

Creating asp.net mvc 5 application

Now new window will open as shown below.
Now Select Empty Template, check on MVC checkbox and click on OK.

Selecting asp.net mvc 5 empty template

Now, a new project will be created as shown below.

Asp.net mvc 5 empty folder structure

Adding Upload Folder

Now add a new folder named UploadFiles to the root directory of the application in which the file will be uploaded or you can use specific location at hard-drive to upload files.

Adding Controller

Next step is to add controller to application. Go to controller folder and add new empty controller named as Home controller. Replace all code with below code. Here first method is Index which returns view that contains markup for file upload. Second index method is post method which is used to save the posted file from view to the hard drive.

Post index method returns result in JSON format with two custom variables success and responseMessage. success variable contains true or false and responseMessage contains different response messgaes.

Share:

Friday, 26 January 2018

ASP.NET MVC Generate and Print PDF using Rotativa MVC

In this tutorial, I am going to explain you how to print PDF of webpage in ASP.NET MVC using Rotativa MVC. Rotativa MVC is framework to convert your view into pdf file. Rotativa can be install using nuget package manager. I will be using Visual Studio 2013. Below is step by step tutorial.

Creating ASP.NET MVC Empty Application

Now the next step is to create ASP.NET MVC empty application as shown below.
Go to FileNewProject. A new window will be open as shown below.
Now go to Web and select .NET Framework 4.5 and give project name and click on OK .

Creating asp.net mvc 5 application

Now new window will open as shown below.
Now Select Empty Template, check on MVC checkbox and click on OK.

Selecting asp.net mvc 5 empty template

Now, a new project will be created as shown below.

Asp.net mvc 5 empty folder structure

Installing Rotativa in Mvc

Next step is to install Rotativa. Right click on References and go to Manage NuGet Packages as shown below.

Manage NuGet Packages in ASP.NET MVC

After that a new window will open as shown below. Search for Rotativa and you can see different framework available. I tried first option Rotativa, but it was not installed properly for some reason then I installed Rotativa.MVC which worked. So install Rotativa.MVC in ASP.Net MVC projects.

Installing Rotativa MVC in ASP.Net Mvc

Adding Models

Go to Models folder and add new class file Employee.cs. Now replace all code with below code.

Share:

Sunday, 31 December 2017

Convert ASP.NET MVC dropdownlist into multi select textbox using Chosen JS plugin

In this article, I am going to explain you how to convert asp.net mvc dropdownlist into multi select textbox using Chosen JS plugin. You can see in below figure how the dropdown will look like after converting into multi select textbox.

Convert ASP.NET MVC dropdownlist into multi select textbox using Chosen JS plugin

Creating ASP.NET MVC Empty Application

Now the next step is to create ASP.NET MVC empty application as shown below.
Go to FileNewProject. A new window will be open as shown below.
Now go to Web and select .NET Framework 4.5 and give project name and click on OK .

Creating asp.net mvc 5 application

Now new window will open as shown below.
Now Select Empty Template, check on MVC checkbox and click on OK.

Selecting asp.net mvc 5 empty template

Now, a new project will be created as shown below.

Asp.net mvc 5 empty folder structure

Adding Models

Go to Models folder and add new class file CountryData.cs. Now replace all code with below code. Here we have one list property CountryList which is type of SelectListItem for holding list of country data. Four string property for holding Id of 4 different dropdowns which we will see in article.

Share:

Sunday, 24 December 2017

Creating WCF Service with wsHttpBinding and webHttpBinding together

In this tutorial, I am going to explain you how to create .NET WCF Service with wsHttpBinding and webHttpBinding together in single WCF application. Below topics will be covered in this tutorial.

  • Creating new WCF Service application project
  • Creating simple calculator service
  • Creating complex / CompositeType calculator service
  • Configuring service with wsHttpBinding and webHttpBinding
  • Calling simple and complex service using .NET application by creating Proxy Class (wsHttpBinding)
  • Calling simple and complex service using REST client like POSTMAN (webHttpBinding)
  • Calling simple and complex service using jQuery (webHttpBinding)

Creating new WCF Service application project

I will be using visual studio 2013 and .NET framework 4.5.
Go to FileNewProject. A new window will be open as shown below.
Now go to Visual C# and search for WCF Service Application and give project name and click on OK .

Creating WCF Service application

Now a wcf service will be created with default template as shown below.

WCF Service folder structure

1) Now rename IService1.cs to ICalc.cs and Service1.svc to Calc.svc.
2) Now right click on Calc.svc, go to View Markup and change service from Service="WcfService1.Service1" to Service="WcfService1.Calc".

Creating simple and Complex calculator service

Now open ICalc.cs file, delete all the default code generated and replace its with new code as shown below. Here we have declared two method Calculator1 and Calculator2 inside inteface, both are decorated with POST verb and returns Json data. Calculator1 method accepts two integer parameter where as Calculator2 method accepts a complex class objects and both returns addition of two numbers.

ICalc.cs Code
Share:

Saturday, 23 December 2017

Dropdown with Multi Select (Multiple selection) with checkbox using jQuery, Bootstrap and Multiselect JS

In this tutorial, I am going to explain you how to implement multiple selection (MultiSelect) with dropdown (select option in html) using CheckBox with help of jQuery, Bootstrap and MultiSelect JS.

In HTML File

In html file, create a select list (dropdown) with multiple="multiple" and bind with some dummy data as shown below.
Here in script JS files, First file is jQuery file Second, Third is bootstrap JS, CSS files and Fourth, Fifth file is MultiSelect JS and CSS Files.
Make sure all files is loaded when application runs.

Share:

Friday, 22 December 2017

DatePicker or Calendar Control in ASP.NET MVC using jQuery UI

In this tutorial, I am going to explain you how to attach DatePicker or Calendar control in ASP.NET MVC using jQuery UI. I will be using Visual Studio 2013. Below is step by step tutorial.

Creating ASP.NET MVC Empty Application

Now the next step is to create ASP.NET MVC empty application as shown below.
Go to FileNewProject. A new window will be open as shown below.
Now go to Web and select .NET Framework 4.5 and give project name and click on OK .

Creating asp.net mvc 5 application

Now new window will open as shown below.
Now Select Empty Template, check on MVC checkbox and click on OK.

Selecting asp.net mvc 5 empty template

Now, a new project will be created as shown below.

Asp.net mvc 5 empty folder structure

Installing jQuery UI using Nuget (Compulsory)

Next step is to install jQuery.UI. Right click on References and go to Manage NuGet Packages as shown below.

Manage NuGet Packages in ASP.NET MVC

After that a new window will open as shown below. Search for jQuery.UI and install it.

Installing jQuery.UI in ASP.Net Mvc

After successful installation, you can see all css files related to datepicker are installed inside Content folder and and jquery-ui file is installed inside Scripts folder.

After successfull installation of jQuery.UI in ASP.Net Mvc

Installing Bootstrap and Unobtrusive jQuery (Optional)

If bootstrap js,css and Unobtrusive jQuery is not install in your application then you can install using nuget package manager.
Bootstrap: It is used for CSS and responsive design.
Unobtrusive jQuery: It is to make data annotation work at client machine.

Installing Bootstrap and Unobtrusive jQuery in ASP.Net Mvc

Adding Models

Go to Models folder and add new class file Employee.cs. Now replace all code with below code.

Share:

Sunday, 10 December 2017

Grid.MVC with MultiSelect DropDownList with CheckBox auto selected from database in MVC

In this tutorial, I am going to explain you bind how to bind multiple selection (MultiSelect) DropDownList with CheckBox in Grid.MVC in ASP.Net MVC from database using jQuery, Bootstrap and MultiSelect JS. I will be using Visual Studio 2013 and ADO.Net code to get data from SQL-Server Database.

As you can see in below screen-shot, multi-select dropdownlist is auto-selected. Here in Subject column , subject value is concatenated with comma from database, while binding to MVCGrid subject is auto selected in last column as shown below.

Grid.MVC with MultiSelect DropDownList with CheckBox auto selected from database in MVC

Creating Table and Procedure

Use below script to create a Student Table and procedure to fetch data from database.

Share:

Sunday, 3 December 2017

SQL Server Instead Of Insert Trigger Example

In this tutorial, I am going to explain you INSTEAD OF INSERT Trigger in SQL-Server with example. In the previous tutorials, I had explained introduction to triggers in SQL-Server. Please go through the links provided below.

Related Links

There are two main types of DML trigger.1. After Triggers (also called as FOR trigger)2. Instead of Triggers

After Trigger (using FOR/AFTER CLAUSE)

This trigger fires after SQL Server completes the execution of the action successfully that fired it. Example: If you insert record/row in a table then the trigger associated with the insert event on this table will fire only after the row passes all the checks, such as primary key, rules, and constraints. If the record/row insertion fails, SQL Server will not fire the After Trigger.

Instead of Trigger (using INSTEAD OF CLAUSE)

This trigger fires before SQL Server starts the execution of the action that fired it. This is much more different from the AFTER trigger, which fires after the action that caused it to fire. We can have an INSTEAD OF insert/update/delete trigger on a table that successfully executed but does not include the actual insert/update/delete to the table. Example: If you insert record/row in a table then the trigger associated with the insert event on this table will fire before the row passes all the checks, such as primary key, rules, and constraints. If the record/row insertion fails, SQL Server will fire the Instead of Trigger.

Instead of Insert Trigger Example

When we try to insert a record into a table then instead of insert trigger is fired if trigger is associated with that table. Insert of trigger is mostly used with Views in SQL, but in this tutorial we are going to implement instead of trigger with single table. In article, we will use instead of trigger with Views. Now let's implement the trigger.

Create a table Employee with 3 columns EmployeeId, Name and Age. EmployeeId will be auto generated. Below is the code to create Employee table and insert some dummy records.

Share:

Email Subscription

Subscribe to our newsletter to get the latest articles directly into your inbox

Blog Archive

BUY FROM AMAZON

Ads By Chitika