Skip to main content

· 4 min read

In this post I'll walk through the process of adding localization to an ASP.NET Core application. Localization in ASP.NET Core is almost similar to the way it works in the ASP.NET 4.X. You have to define a number of .resx resource files in your application, one for each culture you support. You then reference resources via a key, and depending on the current culture, the appropriate value is selected from the closest matching resource file.

As I stated above, concept of a .resx file per culture remains in ASP.NET Core, the way resources are used has changed quite a lot. In the previous version, when you added a .resx file to your solution, a designer file would be created, providing static strongly typed access to your resources through calls such as Resources.LoginString. In ASP.NET Core, resources are accessed through two abstractions, IStringLocalizer and IStringLocalizer, which are injected where needed via dependency injection. These interfaces have an indexer, that allows you to access resources by a string key. If no resource exists for the key (i.e. you haven't created an appropriate .resx file containing the key), then the key itself is used as the resource. ASP.NET Core introduced two interfaces namely IStringLocalizer and IStringLocalizer for implementing or developing localized applications. IStringLocalizer interface uses the ResourceManager and ResourceReader to provide user defined culture-specific resources at run time. This simple interface contains an indexer and an IEnumerable for returning localized strings to the application. IStringLocalizer doesn't require we to store the default language strings in a resource file.

Lets see how to add localization to your application step by step.

Step 1: As first step, add the Microsoft.AspNetCore.Localization NuGet package.  

  • Microsoft.AspNetCore.Localization.Routing: Localization with routes, e.g. mysite.com/en-us/Home
  • Microsoft.AspNetCore.Mvc.Localization: MVC Core Localization components, e.g. view localization, data annotation localization (Included in Microsoft.AspNetCore.Mvc)

Step 2: Lets configure the Startup.cs

public void ConfigureServices(IServiceCollection services)
{
services.AddLocalization(o =>;
{
o.ResourcesPath = "Resources";
});
services.AddMvc();
}

The above configuration adds the necessary services for localization to the service container. It also specifies that we will use a folder called Resources to put our translation resources in.

Step 3: Let's add the request localization middleware to Configure in Startup:

 

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
app.UseStaticFiles();

IList<CultureInfo> supportedCultures = new List<CultureInfo>;
{
new CultureInfo("en-US"),
new CultureInfo("no"),
};
app.UseRequestLocalization(new RequestLocalizationOptions
{
DefaultRequestCulture = new RequestCulture("en-US"),
SupportedCultures = supportedCultures,
SupportedUICultures = supportedCultures
});

app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
});
}

The three options we specify for the middleware are all important:The above step is necessary so that the culture for the request is set correctly. Note that it must be before any middleware that depends on the culture, such as MVC.

  • DefaultRequestCulture: This is the fallback that is used if we can't figure out which one should be used
  • SupportedCultures & SupportedUICultures: The cultures we wish to support

The above  middleware adds 3 providers for the request culture by default:

  • QueryStringRequestCultureProvider: Gets the culture from query string values
  • CookieRequestCultureProvider: Gets the culture from a cookie
  • AcceptLanguageHeaderRequestCultureProvider: Gets the culture from the Accept-Language request header

Most browsers send the Accept-Language header by default to all pages. 

Step 4: Adding the resource file

Last thing we need before we get to actually using the localization is a resource file.All we need to do is:

  • Create a folder called Resources(Can be any name) in the project.
  •      Add a Resources file called SharedResources.en.resx .
  •      Add a line in the resource file with the Name set to Login and the Value to "Login To My System"

Step 5: Create a file named SharedResources.cs to configure the type of Resource 

namespace SharedResourcesExample
{
public class SharedResources
{
}
}

Step 6: Modify the constuctor of your controller say "HomeController" give us an IStringLocalizer

Step 7: To make the localization reflects on the HTML , you need to add the following  on the view

private IStringLocalizer<SharedResources> _sharedLocalizer;

public HomeController(IStringLocalizer<SharedResources> sharedLocalizer)
{
_sharedLocalizer = sharedLocalizer;
}

NOTE: I was stuck in an issue that localization worked on controller but not on the view. The fix is to check the namespace of SharedResource in the view, it should be the one that corresponds to the class we added.

If you are stuck with any of the steps, find the code in the sample project. That's all about setting up localization on an ASP.NET CORE project.

References :

https://docs.microsoft.com/en-us/aspnet/core/fundamentals/localization

https://github.com/aspnet/Localization

https://stackoverflow.com/questions/49424452/aspnetcore2-0-localization-not-working-on-html

· 4 min read

Recently I started experimenting with Azure's CosmosDB and developed few applications using the same. To start with it this blog will help all the Azure/CosmosDB developers out there to easily setup with visual studio code. I will be sharing how to connect to Azure CosmosDB without using the portal in local machine.

To start with it, You should have visual studio code installed on your machine. If not download it from here.

We need to setup an extension with visual studio code as a initial step. Azure CosmosDB extension for visual studio code gives developers set of cool commands to work with CosmosDB. With the help of Azure CosmosDB extension developers can easily do the actions which could be done on the azure portal such as Create,delete,modify databases,Collections,views and documents. Also the hierarchical representation will provide a better way to understand the structure of database.

Step 1:

To start with, you must install the Azure CosmosDB from the market place. So, search for Azure Cosmos DB extension in the market place and click on install

Go to View - > Extensions or press Ctrl + Shift + X

Once the extension is installed, you can find Azure CosmosDB in explore section of visual studio code.

Step 2:

To explore the different types of commands with Azure Cosmos DB, open show all command palate and search for Cosmos. It will list down a different set of commands that you can play with,

Go to View - > Extensions or press Ctrl + Shift + P              

Step 3:

Now the extension is installed successfully. Lets see how to connect to Azure CosmosDB  in local machine. Move back to Azure CosmosDB extension section in the explorer panel. Sign in to Azure account to view the CosmosDB accounts inside the visual studio code alternatively you can select “Attach Database Account”

Select the specific Database Account API, in this case it is DocumentDB and enter the connection string copied from the portal

To get the connection string from the Azure Portal, navigate to the respective CosmosDB  Resource, and from the left side panel Settings –> Keys -> Connection String Copy the Primary Connection String.

Now you can see the database displayed with the account provided in the azure CosmosDB explorer pane.

That’s it Now you can Add, Modify Database, collection, and documents within Visual Studio Code. Play around with all the commands and features of the extension.

Step 4: Installing Azure Cosmos DB Emulator

Azure Cosmos DB Emulator provides a local environment that emulates the Azure CosmosDB service for your development. With the Azure Cosmos DB Emulator, you can develop and test your application locally, without creating an Azure subscription and without internet connection. With the extension we installed already you can connect with Local Emulator as well.

Download Azure CosmosDB emulator:

You can download emulator from Microsoft Download Center.

  1. Extract setup and run emulator exe.
  2. Once you completed the setup, type Azure Cosmos DB Emulator in Start menu.

Start the local Azure CosmosDB Emulator, and make sure it’s running.

Verify the access by exploring the local emulator on this address.

https://localhost:8081/_explorer/index.html and you should see a screen as follows.

Step 5:

Once you verify your Azure Cosmos DB Emulator is running, you can go back to Visual Studio Code and try to attach the emulator by selecting Connected with Azure Cosmos DB Emulator option

After 1 or 2 minutes, you can find your local Cosmos DB data also mapped in Visual Studio Code.

As a developer I found this extension is very powerful and if you are developing Azure based solution with Visual Studio code, you must start exploring this.

Start building application with cosmosdb today 😊 Cheers!

· 2 min read

In this blog i will start with an introduction to .NET Core CLI tools with an example of how to create a web API using the CLI tools provided with .NET Core. At the end we will set up a solution grouping an API project and a test project. Let's dive into the steps,

Step 1 :  Installing the tools

Need to install .NET Core and Visual Studio Code that are supported on Mac, Unix and Windows. You can read more on how it works on multi-platform/framework.

Step 2 :  Creating the solution

Let's open the terminal/Powershell as a administrator to create our solution. Lets create a solution named DotNetCoreDemoApi

  dotnet new sln -o DotNetCoreDemoApi  

The above command will create a new folder and DotNetCoreDemoApi a solution file with the  name DotNetCoreDemoApi sln .

Lets get into that folder.

Step 3: Creating the web API project

Run the following command,

 cd DotNetCoreDemoApi 

Now that the solution is here, we can create our API project. Lets name the web API as DotNetCoreDemoApi. Run the following command to create the project.

dotnet new webapi -o DotNetCoreDemoApi  

That command will create a sub folder named DotNetCoreDemoApi  inside the solution DotNetCoreDemoApi and the ouput is as follows.

The web API folder should contain a few files generated as above  but what we require right now is DotNetCoreDemoApi.csproj. We will add a reference to it in our solution. To do so, run the following command:

 dotnet sln add ./DotNetCoreDemoApi/DotNetCoreDemoApi.csproj

 

 

Step 4: Run the Web API After getting a confirmation message as above , lets start the API by running that command:

 dotnet run --project DotNetCoreDemoApi  

 

After a few seconds, it should display a message  that the API is now running locally as above. You may access it at http://localhost:5000/api/values which is the Values API default endpoint.

That's all , API is ready and it is up and running locally. I will continue setting up the TestProject in the same solution in the upcoming blog. With the DotNet core it is very feasible to get your web api setup and running in 5 minutes.

· 4 min read

My first post for the year 2018 and i wanted to write something about a technology in which i have vast experience and passionate about. This blog will be very useful for those who want to start with angular for developing web applications.In this blog i am going to set up Angular 5 app using Visual Studio Code. I will be using Angular CLI for our sample application. The following are the steps needed to create your first angular application using angular5.

Steps

  • Install Node.js.
  • Install Angular CLI.
  • Design our  Angular App.
  • Launch  App in the browser.
  • Displaying our custom information on a page.

1. Install Node.js

In this approach, the first step is to install Node.js. If you have not installed nodejs in your machine visit the website and download according to your OS. You will see the following display.

Download and install the latest LTS version as per the configuration of your machine. The current version of Node LTS is 8.9.3. Installing node.js will also install npm (node package manager) on your system.

Next step is to make sure everything related to node is installed, To check the version of node and npm installed on your machine, run the following command in command prompt.

  • node -v 
  • npm -v

which will be as follows,

2. Install Angular CLI

We are done with the step1, next is to install angular cli. For those who are very new to angular , angular cli is a command line interface for angular applications. After installing node and npm, the next step is to install Angular CLI. Run the following command in a command window.

  • npm install -g @angular/cli

The above command will start Angular CLI installation on your machine. This might take bit of time  based on the internet connectivity.

 

 

 3. Design our  Angular App.

That's all folks, we have setup the necessary environment to start coding. Lets create our application in a folder named Angular5Demo. Run the following command to create a folder for our application.

  • mkdir Angular5Demo

lets navigate to our created folder, so run the following command.

  • cd Angular5Demo

we are in the same folder where our application resides, so lets create our template/structure for our application using angular cli. run the following command

  • ng new myFirstApp

if you have missed anything the following screen shows the steps and the output.

Lets see the code in visual studio code editor. Type code. in the command prompt.

  • code .  

Which will open up the code in the visual studio code. And that’s it.  You can see the following file structure in Solution Explorer. We have created our first Angular app using VS Code and Angular CLI.

4. Launch  App in the browser

 To launch the application and to start the web server run the following command 

  • ng serve 

After running this command, you can see that it is asking to open http://localhost:4200 in your browser. So, open any browser on your machine and navigate to this URL. Now, you can see the following page.

We'll leave the web server as it is while we look into the code of this application. Again open the code inside the path by typing the foolwoing command.

      code .

  1. D****isplaying our custom information on a page.

Now, Let's display a message saying "" using JSON data on the page instead of the message “Welcome to app!”. To achieve this, open /src/app/app.component.ts file. Change it as follows or according to the data you want to see on the page.

and HTML template as,

Change the value of title property to a JSON object as shown above.  You can see the updated web page as shown below.

With angular cli If the web server is running and you make any changes in the Angular application, then you don’t need to refresh the web page. It will automatically update itself as you save the application code file. You can now play with the appellation by using various JSON objects also by making requests.

That's it folks, we have learned about creating our first Angular 5 app using VS Code and Angular CLI. Please post your valuable feedback in comments section.

· One min read

Even though there are several answers on stackoverflow, nothing helped me to solve this issue and found the solution as follows,

1. Update Visual studio if you have older version to 15.5.4 (Optional)

2. Remove all binding redirects from web.config

3. Add this to the csproj file:

4. Build.

5. In the bin folder, there should be a `(WebAppName).dll.config` file.

6. It should have redirects in it. Copy these to the web.config

7. Remove the above snipped from the csproj file again

8. It should work