A2H

This user hasn't shared any biographical information

Homepage: https://aspdotnetcodehelp.wordpress.com

How to read config settings in Asp.Net Core

Introduction

In this article I will explain the details of how to read config settings in Asp.Net Core.

Description

In Asp.Net webforms we used web.config file to store the config values like a connection string, appsettings etc.However, in Asp.Net core, the config file doesn’t exist anymore.  Instead, we have a slightly different approach where the configuration API provides a way of configuring an app based on a list of name-value pairs that can be read at runtime from multiple sources. You can read the config values from multiple sources like JSON, XML etc.

In this article we will examine how to implement config files based on JSON formats in Asp.Net Core application.

Add the Required references

To read the values from appsettings.json, we need to add the below references to project

Add appsettings.json file to store config values

We will store the config items as Name:Value pair in this json file.  You can also add hierarchical list in json file where each items will be separated by comma.

Sample value

Create ConfigurationBuilder in Startup.cs class

We use AddJsonFile” method in JsonConfigurationExtensions class to provide the Json File path. To reload the configuration file if the file changes we can set the reloadOnChange property.  You can find details of AddJsonFile method here.

Read the value from appsetttings.json file

Using the GetSection method we can access the values from appsettings.json file

Complete Code

You can find the complete source code for this article here

, , ,

Leave a comment

Implementing delete functionality in UIGrid

Introduction

This is continuation to my previous two articles in which I demonstrated the steps to

In this article I am going to demonstrate how to implement row delete functionality in UIGrid.  The series will contain continuation articles to cover the topic in detail.

Prerequisites:

I have used icons from FontAwesome Library, which is a great source for  icons. You can download Fontawesome icons from here.

Also to display message after every operation we used UIBootstrap

Implementation:

You would already have the Model configured by following my previous article on loading UIGrid with data. We will directly look into the details of deleting records in UIGrid.

Sample Demo of Delete functionality is given below

Demo

UIGrid Updates:

We will update cellTemplate in “Actions” column to add Delete button. We will reuse the editRow flag to hide and display delete buttons.  To delete the record,, we call deleteRow function from Delete button

Delete function:

Delete function will take the selected row object as input parameter; we will find the rowindex using input parameter. Using row index we will find CustomerID of selected row and delete the record. Additionally before deleting the record we will ask for user confirmation. Finally we will call the DeleteCustomer method in Factory service to delete the record in database.

Updated Angular code with Delete functionality

HTML

Delete Customer Method(WEBAPI)

 

, , , ,

Leave a comment

How to implement row edit functionality in Angular UIGrid

Introduction

In this article I will explain the procedures to implement row level editing functionality in Angular UIGrid. This is a continuation of my previous article in which I showed the procedures to populate a UIGrid.

Prerequisites:

I have used icons from FontAwesome Library, which is a great source for  icons. You can download Fontawesome icons from here.

Also to display message after every operation we used UIBootstrap

Implementation:

You would already have the Model configured by following my previous article on loading UIGrid with data. We will directly look into the details of Editing in UIGrid.

UIGrid by design supports the inline edit functionality by double clicking on a particular cell. In this article we will implement editing all columns in a row using button click and save the details to database on Save Button click.

You can see a sample demo of editing functionality below

Demo

UIGrid Updates

We will use the cellTempalate, to make the cell editable. We are using a flag to make the row editable. When user click on the Edit button, we will set the EditRow flag as true. Later in the UIGrid, we check if the flag has been set to true or false. Based on the flag value the row will be editable or readonly.

We will update cellTemplate in “Actions” column to add Edit, Update, Cancel button. We will reuse the editRow flag to hide and display Edit and update buttons.  Also we call edit, saveRow, CancelEdit functions from Edit, Update and Cancel buttons respectively.

Edit function:

Edit function will take the selected row object as input parameter, we will find the rowindex using input parameter and set the editRow flag for selected row to true. This will make the UIGrid row editable.

cancelEdit function:

cancelEdit function will take the selected row object as input parameter, we will find the rowindex using input parameter and set the editRow flag for selected row to false. This will make the UIGrid row read only.

saveRow function:

saveRow function will take the selected row object as input parameter, we will find the rowindex using input parameter and set the editRow flag for selected row to false. This will make the UIGrid row read only.  Next line of code will read the values from edited row and assign it to customer class in scope. Finally we will call the SaveCustomer method in Factory service to update the record in database.

Updated Angular JS Script:

HTML

UpdateCustomer Method(WebAPI)

 

, , , , , ,

Leave a comment

How to access WCF Service in Asp.Net Core Application

Introduction

How to access WCF Service in Asp.Net Core Application

Description:

In this article I will explain how to consume WCF Service in Asp.Net Core Web Application. In previous .Net Framework we have multiple options to consume a WCF service.  We have the options like Add Service Reference, SvcUtil,  ChannelFactory etc. However in Asp.Net Core there is a slight difference in Consuming WCF Service. In Asp.Net core you will notice that, we don’t have the option “Add Service Reference like in the older .Net Framework.  The solution for this is WCFConectedService.

WCFConnectedService:

Asp.net Core team has come up with an extension called WCFConnectedService, This is a Visual Studio extension for generating SOAP service references in the Asp.Net Core application. This extension can be used with any project types in asp.net core.

We use ConnectedService to access a WCF Service in Asp.Net Core Web Application.

Installing WCF Connected Service Extension:

Below are the steps to install WCF Connected Service Extension in Asp.Net Core WebApplication

  • Right Click on the Connected Services Option

ConnectedService7

If the Extension is not installed then you will see the below window. User need to click on Find more Services link

ConnectedServices1

Extension and Updates window will be displayed and from this window you can find the Visual Studio WCF Connected Service extension option

ConnectedServices2

Click on Download button to install the extension. You may need to close the VisualStudio instances to complete the VSIX installation.

Simple WCF Service

For this example, we have created a WCF Service. In our service we have a sample method called “GetData(int id)”.  This method will take integer input values and return a string “You entered:1”

ISimpleService Interface

SimpleService  Method Implementation

Above service is for demo purpose, you can use connected service approach with any service as per your design.

Accessing WCF Service in Asp.Net Core Web Application

In your Asp.Net Core web application, you will see a Connected Service Option like below

ConnectedService7

Follow the below steps to Add Service Reference

  • Right Click on the Connected Services Option
  • Select Add Connected Service and Add Connected Services wizard will be displayed and Select the WCF -Service Preview option

ConnectedService4

  • Click on the Configure button. This will bring up Configure WCF Service Reference dialog box. Enter your Service url and Click on Go or Discover, it will discover the ServiceConnectedServices5
  • Click on Next and select appropriate options

ConnectedServices6

  • Click on Finish to generate proxy for WCF Service.

Once after this you will be able to see Service Reference Folder added in our project.

ConnectedService3

Now all you need to is to Create the Client and access the service like below

Result

You can download sample application for this article from here

, , , , ,

Leave a comment

How to populate Angular UIGrid in MVC using AngularJS

Description

In this article I will explain the steps for populating UI-Grid in angularjs from database using WebAPI. UI-grid is a powerfull tool which provides a table like representation. Apart from table like structure Ui-Grid also provides functionality like filtering, sorting, exporting etc.  You can find more details about UI-Grid from here

PreRequisites:

Ui-Grid is dependant on AngularJS.Hence ensure that you have added reference of Angular js on page.

Implementation:

Model:

To load the data from database, we are using EntityFramework and its related method. In this example I have used the DatabaseFirstApporach.  DatabaseFirstApporach lets the EnityData Model to generate classes, dbcontext etc from the database automatically. All other functionalities like database and model sync exists as is.

Follow the below procedures to generate Model for Customer database in Northwind database

  • Right click on the Model folder
  • Select Add option
  • And then select the New Item option
  • Choose Data from Installed Templates group
  • Select the ADO.NET Entity Data Model option and Provide a name for it
  • In the Entity Data Model Wizard, Select EF Designer from database and click on Next
  • Choose the Connection string options
    • If you already have connection string configured then you can select that from the available list.
    • If you don’t have the connection string configured then use the New Connection option and create the connection
  • Expand the Table option and then select the tables which you want
  • Click on Finish

You will have necessary class files generated in your solution now

Northwind

You can get more details about how to use DatabaseFirst approach from this link.

Controller (WebAPI)

In this example we are using WebAPI to load the data. The next procedure is to write code to fetch records from database using WebAPI.  For this demo I have used a basic select operation. You can modify this as per your need.

Another point to note here is UI-grid read data which is in Json format, Hence we need to ensure that the data which we return from controller is of Json format. We will use the JsonResult method for this.

View:

On View we will have the codes for UI-Grid and its related files. If you look at the design of UI-Grid it’s a div which will be styled to look like a table at runtime.

We need to add div with an attribute as ui-grid=”gridOptions”.  We add all the details from angular js code to gridOptions and UI-Grid at runtime uses this div to populate the grid.

RouteConfig Changes:

I have changed the Action Name from “Get” to “GetCustomer” to be more specific with what the method do. In order for api to identify the proper method add the below route setting to web api route config

Angular JS Script

Below are the code to fetch the data from database and populate it to UI-Grid. I have used a factory to call the Get Customer method and used that in the main method.

 

, , , , ,

1 Comment

String or binary data would be truncated error from an Integer Field in SQL Server Database

Introduction

In this article I am going to explain an interesting problem in SQL Server.

Usually we will see the exception “String or binary data would be truncated” with string datatype columns.

For ex: If you have a column with Datatype Varchar (50) in the table and if you try to insert an entry with more than 50 characters you will get this exception.

To my surprise I faced the same error with an integer column and I tried multiple options to find out from where the exception is thrown. All my changes went in vain and I couldn’t fix with the changes I made in an integer column.

Solution:

After some time I started looking at the Triggers in the table and Bingo, that’s where the problem was and I was able to fix the issue.

In my case when I do an insert to Integer column, I was creating a larger string in trigger and for a particular combination it crossed the allowed 50 character limit which resulted in Error.

Note:

If you face exception during an insert to integer data type column, then First Check the Trigger for your table, the root cause of exception might be in trigger.

, , ,

Leave a comment

How to read Excel files in Javascript/Jquery and convert the value to Json

Introduction

We have multiple ways to read excel file in C# and then convert it to JSON or insert the data in to database etc. However there are not much options available when it comes to reading the Excel file using javascript. In this article I will explain an option using a Jquery Plugin called SheetJS.

SheetJS is Excel parser which supports multiple formats of excel files like 2007, 2010, 2013 office versions etc.

Implementation

To use the SheetJS user need to add the reference files first. You can do this either by downloading files from here and then refer these js files to project. Another option is to use the online CDN available.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.7.7/xlsx.core.min.js"></script>

Reading the Excel File

To read the excel file we use the read method in SheetJs like below

var workbook = XLSX.read(data, { type: 'binary' });

Converting Excel value to Json
To convert the values to Json will use “sheet_to_json” method

          var sheet_name_list = workbook.SheetNames;
           sheet_name_list.forEach(function (y) { /* iterate through sheets */
                    //Convert the cell value to Json
                    var roa = XLSX.utils.sheet_to_json(workbook.Sheets[y]);
                    if (roa.length > 0) {
                        result = roa;
                    }
                });

Complete Code

Sample Excel I used for this Demo

ujcrvsc

 

, , , ,

1 Comment