This article provides an idea of some more directives like ng-include, ng-click and ng-repeat in AngularJs.
This article is just a continuation of my previous article about Quick Start Of AngularJS. So, please read that to get the initial/basic idea of AngularJS.
ng-include
This is an AngularJS directive, it is very helpful to include the various files in a main page using the ng-include attribute.
For
example, you have one page layout that contains a header, body, footer
and so on. In that scenario, you can create various HTML files for a
header and footer then you can include those in the main HTML file.
Because of this implementation the page looks cleaner and the
code/design is also separated.
Sample Application
The header.html file contains the following.
Header of the site
The footer HTML file contains the following.
Copyright Ramchand @2014
The main index.html file contains the following.
The previous index.html contains the ng-include attributes for header
and footer divs with the respective HTML file path values that should be
specified in single quotes.
Now, when you run the index.html file, the output looks as in the following.
You can run the application using Plunker tool at AngularJS include.
ng-click
This
is also one of the directives, you can use this in one of the scenarios
like when you click on a button if you do any operation then this would
be useful.
Scenario:
The form contains an input text box and Search button, whenever the
user enters a value into a text box and clicks on the search button you
need to display the user-entered value, if the user clicks on the search
button without entering anything then we need to display a message.
The index.html file looks as in the following.
The DemoClick.js file contains the following lines of JavaScript code.
(function() {
var app = angular.module("DemoClickApp", []);
var DemoController = function($scope) {
$scope.Search = function(empname) {
if (empname)
$scope.result = "You have searched for " + empname;
else
$scope.result = "Please enter employee name";
};
};
app.controller("DemoController", DemoController);
})();
Now, when you run the index.html file by default it looks as in the following.
If you click on the Search button without
entering any value in the text box then the output screen displays an
alert kind of message as "Please enter employee name" that looks as in
the following.
Now, you can enter some value into a text box and click on the search box and then the displayed screen is as follows.
You can run the previous discussed example using the Plunker tool at AngularJS click.
ng-repeat
This
directive is like a foreach loop in C#. By using this directive you can
display a collection of items in a view (HTML page).
Scenario: You can display a list of employees using the ng-repeat directive in AngularJS.
List of Emplooyees
The previous HTML file is self explanatory since it contains
point-by-point details in comments format. The fifth point is that you
have added something as a ng-repeat attribute with the value of "emp in
employees". Here "employees" is the collection value that is obtained
from the Employee.JS controller.
The Employee.js contains the following lines of JavaScript code.
Angular
JS is the one of the finest JavaScript frameworks to create dynamic web
applications by writing less code with an easy syntax in HTML files.
RoadMap
In this article you will get an idea of the following concepts.
Introduction
Prerequisites
Download Angular Js
Angular Js Editors
Angular Js Architecture
About ng-app and Binding Expressions
ng-controller
ng-model
ng-show and ng-hide
Introduction
Angular
JS is the one of the best frontend frameworks for implementing any kind
of dynamic web application using JavaScript and HTML for the following
reasons.
It helps you to organize your JavaScript code by creating controllers, modules and so on.
The website creation is very fast, as fast as adding attributes to the controls.
It is compatible with jQuery as well.
It's suitable for testing the application since the way of writing JavaScript is organized.
Angular
JS started as a Google project but now it is an open-source project. So
it's available in GitHub and anyone can contribute to it.
Until now, there are many applications developed using Angular JS. You can get a list of all those applications from the URL Buit With AngularJS.
In Angular JS web applications, using Directives you can tell HTML to trigger your JavaScript functions.
Angular
JS provides many directives, even though most of the directives are
understandable by the name itself. The directives start with “ng-”. Here ng refers to and is pronounced as Angular.
Angular JS has no other dependencies. So you just need to include the JavaScript file whereever required.
Prerequisites
To
implement web applications using the frontend application framework,
you just need to have some idea of the following concepts:
HTML
CSS
JavaScript
Download AngularJS
The Angular js files you can download from AngularJS. You can even use the CDN URL to access the JavaScript file.
The CDN URL is: https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js
AngularJS Editors
There
are many suitable editors available (online/offline) to implement or
practice Angular JS applications. They are the following:
AngualrJS
should be categorized as pinny needed MV* framework and it also
supports Unit tests and both integrated end to end tests.
Model: the Model is used to restore the data and state of your application.
View: Where you actually render to the user the information they want.
It
stands like any other Controller / Presenter / ViewModel and so on.
Even though in most of the cases we will use the controller.
So,
Controllers are the main components in Angular applications, Angular JS
supports two-way binding. That means that whenever the user enters into
the form fields they are instantly updated in Angular models.
So, let's start a sample application using Angular JS to get a brief idea of it.
Note:
in these examples, I am using Angular Js 1.3.8, the latest version,
since this version contains many features and at the same time, some of
the features that are supported in 1.2.x would not be supported in the
1.3.8 version (for example, Global controller functions are not
supported in 1.3.x by default).
ng-app and Binding Expressions
In this example, you will implement a basic application using Angular JS.
Welcome to Angular Application
This div is controlled by Angular JS: {{ 1 + 2 }}
To Display Constants / Static ones in Angular JS: {{ '1 + 2' }}
Normal div doesn't handled by Angular JS: {{ 1 + 2 }}
The previously described HTML file contains five notified points as specified in the comments section of HTML.
The Angular JS script CDN reference added at the head of HTML file.
ng-app:
The directive ng-app is added as an attribute to one of the div with an
Id of AngularDiv. It is a special directive since whenever it is found
inside a HTML page it starts the action of managing the page.
{{ }}: This format or notation is called Binding Expressions in Angular JS.
So,
whenever you have defined some expression inside the Binding
Expressions ({{ }}) that is controlled by AngularJS directive (ng-app)
automatically it evaluates and displays the results in an HTML page.
If
you want to display an expression within binding expressions ( {{ }} )
without evaluation then you need to enclose it with single quotes as
described in the 4th point of the HTML file.
The
other div with the Id NormalDiv does not have an assigned attribute
(ng-app). So it displays data normally without evaluating the data
within the binding expressions.
Now, you can save the HTML file and run it in a browser and the output will be displayed as follows.
You can run the sample application using the Plnkr tool at AngularJs Starter .
Until
now, you got an idea of the special directive named “ng-app” and how
you can use the binding expressions to evaluate the data. Now, you can
move to the next step of writing JavaScript code and trigger that code
in the HTML file using Angular JS directives.
ng-controller
The
primary responsibility of the controller is to create the scope object
and that scope can communicate with the view in both directions. You can
bind the properties and functions to the scope object.
{{ angularjs }}
The HTML file contains mainly the following 3 points:
Angular Js script file CDN path reference.
Demo.js file reference containing a few lines of JavaScript code.
ng-app
refers to the module name (DemoApp), it refers to any controllers
created under it that is part of that module. Ng-controller refers to
the controller name (DemoController).
The Demo.js file contains the following lines of JavaScript code.
var WelcomeAngular = function($scope) {
$scope.angularjs = "Welcome to Angular Js";
};
var app = angular.module("DemoApp", [])
app.controller('DemoController', WelcomeAngular);
The
first step of JavaScript file contains one variable named
WelcomeAngular. It refers to one function with the scope object. The
scope object contains one property named angualrjs.
In
the second step you are creating an Angular module named “DemoApp” to
the variable “app” and then assigning a controller named
“DemoController” to that app.
You
can now run the HTML file and then you will see the output as “Welcome
to Angular Js” that was specified in the JavaScript file to the property
named angularjs in the scope object.
You can run the sample application using the Plnkr tool at AngularJs Controller.
ng-model
ng-model
is also one of the directives, it can bind to the input, select or
custom form controls using the property named ng-model.
Employee Search
Added the Angular JS CDN path.
ng-app directive was included in the body field. So the HTML body is under Angular JS.
ng-model is added to the input field with the value empname.
In
this example, as you notified the only new one is ng-model with the
value in the input field. So, whenever you have added the ng-model
property with the value (empname) and where you are using that value
(empname) automatically it populates by entering the text into the
respective input field.
Initially, when you run the HTML file, it is displayed like the following.
Now, whenever you have entered some value into the TextBox those values
are automatically shown in the screen as output asynchronously.
You can run the sample application using the Plnkr tool at AngularJs Model.
ng-show and ng-hide
ng-show
and ng-hide are also directives. These are very helpful when you want
to hide or show something based on a property or object that either
contains a value or does not.
As you seen in the
aforesaid model example, the string is always displaying like "you
entered employee name is:". You can change it so it will only display
whenever the user has entered a value into a text box field.
For
example, when you search for employee details, you need to display some
message when the user begins searching by entering some employee name.
Employee Search
The previously described HTML file contains the following two pre tags:
The
first one contains the ng-show directive with the value empname. So,
The pre tag will be displayed whenever you have entered some text into
the input filed that has applied the ng-mode is empname.
The
second one contains the ng-hide directive with the value !empname (here
! Indicates not). So, The pre tag will be hidden when the empname is
empty.
Note: in both of the preceding
cases you can use any one of the directives (ng-show or ng-hide) for
simplicity. But for the purpose of understanding, I have used both
directives.
Now, you can run the HTML file and by default it displays like the following.
Now, you can enter any of the text in that text box field and then the screen will have the results shown as follows.
You can download the aforesaid all examples from this link AngularJS Examples.
Conclusion
I
hope this article provides you an idea of the history and architecture
of AngularJS, Binding Expressions and some of the directives like
ng-app, ng-controller, ng-model, ng-show and ng-hide.
Scenario
This article explains how to display the user Skype status in the user profile in a MVC application. The administrator in a site wants to
view the list of users with his/her Skype status and also wants to
chat/call by clicking on the Skype status in the user profile.
Prerequisites
To
display the Skype status in a public site, the Skype user must check
(select) the privacy setting "Allow my online status to be shown on the
Web". You can go to the settings by navigating from the Skype menu
Privacy settings and check the "Allow my online status to be shown on
the Web" as shown in the following screenshot.
Implementation
Step 1
Create a new project named UsersSkypeStatusInMVC and choose the template MVC. It then creates an MVC template project.
Step 2
Add a Controller named AdminController with the following procedure.
Right-click on the "Controllers" folder and select the Add option and click on the "Controller" link.
It opens a pop-up and then select the option MVC 5 Controller – Empty and then click on the "Add" button.
Again, it opens a popup and then provide the name as AdminController and click on the "Add" button.
Now, the controller is created with a default code.
Step 3
In this step, Add a Model named "UserModel" using the following procedure.
Right-click on the "Models" folder and select the "Add" option and click on the "Class...".
It opens a pop-up and then enter the name as "UserModel.cs" and click on the Add button.
After adding the model, replace the existing code in the file "UserModel.cs" with the following code.
namespace UsersSkypeStatusInMVC.Models
{
///
/// User Model
///
public class UserModel
{
public int UserId { get; set; }
public string Name { get; set; }
public string Email { get; set; }
public string SkypeId { get; set; }
public string ProfileImagePath { get; set; }
}
}
Step 4
This step, replace the existing code in the "AdminController.cs" file with the following code.
using System.Collections.Generic;
using System.Web.Mvc;
using UsersSkypeStatusInMVC.Models;
namespace UsersSkypeStatusInMVC.Controllers
{
public class AdminController : Controller
{
// GET: UsersProfile
public ActionResult UserProfiles()
{
List usersList = GetUsers();
return View(usersList);
}
///
/// Get the list of sample users
///
/// User List
private List GetUsers()
{
var usersList = new List
{
new UserModel
{
UserId = 1,
Name="Ramchand",
Email = "ram@abc.com",
SkypeId = "ramchand.repalle", // Skype Id
ProfileImagePath = "Ramchand.jpg"
},
new UserModel
{
UserId = 2,
Name="Abc",
Email = "chand@abc.com",
SkypeId = "abctest",// Skype Id
ProfileImagePath = "abc.jpg"
},
new UserModel
{
UserId = 3,
Name="def",
Email = "def@abc.com",
SkypeId = "ram",// Skype Id
ProfileImagePath = "def.jpg"
}
};
return usersList;
}
}
}
About Code
The GetUsers() method will provide a sample list of users.
You will call that method in the UserProfiles Action Result method and then send that list of users to the view.
Step 5
This step, add a view for the UserProfiles Action controller method by the following procedure:
Right-click on the View() method in the UsersProfile Action method and click on "Add View".
Enter the view name as "UserProfiles" and then click on the "Add" button.
Step 6
This step replaces the existing code in the "UserProfiles.csthtml" file design with the following code.
A foreach loop helps to display the list of users with respective details.
Skype:
{SKYPE ID}?chat: This is the href tag, you can use to chat the Skype by
clicking on that. For example: skype:ramchand.repalle?chat
Skype:
{SKYPE ID}?call: This is the href tag, you can use to call the Skype by
clicking on that. For example: skype:ramchand.repalle?call
JavaScript function SkypeUserStatus helps to assign the Skype status image.
SetInterVal has been used to call the SkypeUserStatus function periodically to get the current Skype status of a user.
Step 7
This
step helps you about Skype Status URL information and other details. To
display the Skype status of any user, you have to request the URL
format as follows.
The format of the URL is: http://mystatus.skype.com/{SIZE OF ICON}/{SKYPE ID}
{SIZE OF ICON}: It indicates to display the size of the icon based on user Skype status.
For example: smallicon, mediumicon
{SKYPE ID}: It indicates the Skype Id of the user.
For example: ramchand.repalle
So, the example of the Skype status URL is http://mystatus.skype.com/mediumicon/ramchand.repalle.
You can get the status of the user by just clicking on the previously shown URL.
Step 8
Add a new folder named “Images” with sample images to the “UsersSkypeStatusInMVC” project. It helps display the sample image for the profile picture as mentioned in the "GetUsers()" method in AdminController.
Step 9
Now, build the application (F6), then run (hit F5) an application and navigate to the following URL: (http://localhost:57882/Admin/UserProfiles).
As in the preceding screenshots by clicking on the (Skype) icon it
displays a popup to launch the application in Skype. You just click on
that then it would open a Skype user window.
The Skype status images are displayed as described below.
The discussed project source code can be downloaded from the link Source Code.
Conclusion
I hope this article helps you to display the Skype user status with the user profile details in a MVC application.
This article shows how to create multilingual MVC applications with JS bundles based on various languages. Here,
you will learn about multilingual MVC application implementation flow,
the creation of customized JavaScript bundles with translated alert
messages based on user language, custom HTML helper classes, how to set
user language in a cookie based on his login, displaying resource
translation values in a form and how to maintain names and values in
resource files.
Scenario
You
will implement an MVC application to be displayed in various languages
based on the user selected language. The form content is being displayed
from the resource file based on the name and respective language and it
would need to display the alert kind of information from customized bundled JavaScript based on user language whenever the user has done a form submission or input validation and so on.
RoadMap
When implementing the previous sample MVC application, you will learn the following concepts.
Resource File creation with key, value pair combination for required language.
Resource Key value display in a form based on user language.
Cookie implementation in MVC.
Bundling and Minification.
Custom HTML helper class.
Customized Bundle creation.
Translate the JavaScript alert messages into user selected language.
Localized JavaScripts minified and bundled, It helps to increase the performance of form.
Step 1
Create a new project named “MultilingualMVCApp” and choose the template “MVC” then it creates an MVC template project.
Step 2
Add a new application folder named “App_GlobalResources” to maintain the resource files with key/value pair combinations for various languages.
Right-click on the Project “MultiLingualMVCApp” and select on “Add” and
then select “Add ASP.NET Folder” and then click on
“App_GlobalResources” like the following.
Step 3
Create
a resource file named “Notifications.resx” for the default language
English by following the following screenshots. Right-click on the
“App_GlobalResources” folder, select “Add” and then click on “Resource
file” and specify the name as “Notifications” and then click on the “Ok”
button.
Click on "Resources File" and provide the name as "Notifications" as shown in the following screenshot.
In the similar way, create another resource file named
“Notifications.fr.resx” under the App_GlobalResources file. After
completion of these aforesaid procedure, the Solution Explorer looks
like the following.
Step 4
In
this step, you will add sample resource keys with translation values
for English and French languages. For that double click on the
“Notifications.resx” file, then the displayed file has three columns
named Name, Value and Comments.
Name: This name field is treated as the Resource Key value and it should be unique in the file and not be empty.
You can now enter the sample key and respective values as shown in the following screenshot for the default language (English).
In the same way, you can add the same key values, whichever were
specified in the “Notifications.resx” with respective translated values
for the French language in the “Notifications.fr.resx” file is as
follows.
Note: Here, I have used the Google translator to translate the sample English content to French content.
In
the same way, you can add various resource files for different
languages as said and you can add multiple resource types to the resx
files (like strings, images, icons and so on) based on your needs.
Step 5
You
can now create one controller named “DemoController” with the following
procedure. Right-click on the “Controllers” folder and select the
“Add” option and click on the “Controller” link.
Click on the "Controller.." link and select the option “MVC 5 Controller – Empty” and then click on the “Add” button. Then, specify the name as “DemoController” then click on the “Add” button.
Now, the controller is created with the default action named “Index” like the following.
Step 6
Add
a view to the Index action method by right-clicking on the View
function and click on “Add View” and then click on the Ok button. The
following screenshots help you do that.
Click on "Add View..." then it opens a popup like the following.
Now, click on the "Add" button and then it will create an Index.cshtml file.
Step 7
Replace
the existing design with the following design format that contains a
sample form to enter the user name, select the user preferred language
and the submit button.
Now, build the application (F6) and run the application (F5) with the following URL (http://localhost:49624/Demo/Index) then the displayed form looks like the following.
Step 8
In
this step, write a piece of code for the post action of the submit
button to set the user language code in the cookie, the user name in the
TempData object (that helps to send data from one controller request to another) and then redirects to the home page.
[HttpPost]
public ActionResult Index(FormCollection collection)
{
TempData.Add("LoggedInUser", collection["txtName"]);
string language = collection["ddlLanguage"];
SetCulture(language);
return RedirectToAction("Home");
}
///
/// Set the culture based on culture code and set the
/// value in cookie
///
///
private void SetCulture(string cultureCode)
{
var cookieCultureLanguage = new HttpCookie("UserLanguage")
{
Value = cultureCode
};
Response.Cookies.Set(cookieCultureLanguage);
//Sets Culture for Current thread
Thread.CurrentThread.CurrentCulture =
System.Globalization.CultureInfo.CreateSpecificCulture("en");
//Ui Culture for Localized text in the UI
Thread.CurrentThread.CurrentUICulture =
new System.Globalization.CultureInfo(cultureCode);
}
The cookie that you have set in the previous code using the method “SetCulture” helps to display the respective user-selected language translated values in a form from the resource file.
Step 9
In this step, add one controller action method named “Home” to the "DemoController.cs" file with the respective view named “Home.cshtml” file.
///
/// Home Action Controller Method
///
///
public ActionResult Home()
{
return View();
}
Then, right-click on the View() method
in the Home action and then click on "Add View..". After clicking on
“Add View” it opens a template then click on the “Add” button then it
creates a “Home.cshtml” page with default design. You can leave the
design as it is, in later steps you can add the respective design
changes.
Step 10
Add a method named “Application_AcquireRequestState” to the Global.asax.cs
file that helps to set the culture based on the user-selected language
if the cookie exists else it sets the default culture to English.
///
/// Application AcquireRequestState
///
///
///
protected void Application_AcquireRequestState(object sender,
EventArgs e)
{
string culture;
HttpCookie cookie = Request.Cookies["UserLanguage"];
if (cookie != null && cookie.Value != null
&& cookie.Value.Trim() != string.Empty)
culture = cookie.Value;
else
culture = "en";
//Default Language/Culture for all number, Date format
System.Threading.Thread.CurrentThread.CurrentCulture =
System.Globalization.CultureInfo.CreateSpecificCulture("en");
//Ui Culture for Localized text in the UI
System.Threading.Thread.CurrentThread.CurrentUICulture =
new System.Globalization.CultureInfo(culture);
}
Step 11
In
this step, you will implement a customized JavaScript bundle translator
class. It helps to bundle the JavaScript with the respective
user-selected language translated messages if any exists in the
JavaScript file like alert, input validation messages and so on.
So,
first create a new folder named “ResourceHandler”. For that right-click
on the project “MultiLingualMVCApp” then select “Add” and click on “Add
New Folder” and provide the name as “ResourceHandler” and then add a
class file “JSTranslator” under the newly created folder
"ResourceHandler".
Replace the “JSTranslator.cs” file code with the following code.
using System.Text.RegularExpressions;
using System.Web;
using System.Web.Optimization;
namespace MultiLingualMVCApp.ResourceHandler
{
public class JSTranslator : IBundleTransform
{
#region IBundleTransform
///
/// IBundleTransform Process method
///
/// Bundle Context
/// Bundle Response
public void Process(BundleContext context, BundleResponse response)
{
string translated = ScriptTranslator(response.Content);
response.Content = translated;
}
#endregion
#region Localization Of Js Bundle Flow
private static readonly Regex Regex =
new Regex(@"GetResourceValue\(([^\))]*)\)",
RegexOptions.Singleline | RegexOptions.Compiled);
///
/// Translated script based on JavaScript content
///
///
///
private string ScriptTranslator(string text)
{
MatchCollection matches = Regex.Matches(text);
foreach (Match match in matches)
{
object obj = HttpContext.GetGlobalResourceObject("Notifications",
match.Groups[1].Value);
if (obj != null)
text = text.Replace(match.Value, CleanText(obj.ToString()));
}
return text;
}
///
/// Format the text as Clean while displaying
/// in JavaScript notifications
///
///
///
private static string CleanText(string text)
{
text = text.Replace("'", "");
return text;
}
#endregion
}
}
About JSTranslator.cs code
The JsTranslator class is inherited from the “IbundleTransform”.
The
Process method is implemented, as it just gets the BundleResponse
content and translates the JavaScript with user-selected language
alerts, if any, using the ScriptTranslator method and will be assigned
back to that content to the BundleResonse.
The Regex expression is the key term we used in script files, based on that formatted the regex expression.
The Regex Key Term example, you used in scripts is: GetResourceValue(ResourceKeyName)
The
ScriptTranslator method first gets the MatchCollection object based on
regex expression and then based on the Match collection key name get the
translated value using the method “GetGlobalResourceObject”
The GetGlobalResourceObject takes the parameters of Resource file name and Resource Key name.
The CleanText method helps to clean if any characters that creates a problem when displaying in JavaScript.
So, you have now successfully added a custom JavaScript bundle class.
Step 12
In this step, you will add two JavaScript files with sample functions under the “Scripts” folder.
The first JavaScript file named “UserNotifications” file. It contains the following function.
function UserTermsNotification() {
alert('GetResourceValue(UserTermsDisplayNotification)');
}
The second JavaScript file is named “UserOperations”. It contains the following functions.
function AddUserMessage() {
alert('GetResourceValue(UserAdded)');
}
function DeleteUserMessage() {
alert('GetResourceValue(UserDeleted)');
}
Step 13
In this step, you will bundle the previously created JavaScript files in BundleConfig.cs (that exists in the App_Start
folder) using a custom JavaScript bundle that you have created in the
JSTranslator.cs file. So, add the following code block to the RegisterBundles method and also add the required namespaces; those are:
using System.Collections.Generic;
using MultiLingualMVCApp.ResourceHandler;
using System.Web;
namespace MultiLingualMVCApp
{
public class HtmlHelpers
{
///
/// Localized JavaScript bundle
///
///
///
public static HtmlString LocalizedJsBundle(string fileName)
{
string culture;
var cookie = HttpContext.Current.Request.Cookies["UserLanguage"];
if (cookie != null && cookie.Value != null
&& cookie.Value.Trim() != string.Empty)
culture = cookie.Value;
else
culture = "en";
fileName = string.Concat(fileName, "-", culture);
var output = (HtmlString)System.Web.Optimization.Scripts
.Render(fileName);
return output;
}
}
}
Step 14
In
this step, you will implement the custom HTML helper class that helps
to create a custom JavaScript bundle based on your needs. So, add a new
class file named HtmlHelpers under the App_Start folder and then replace that with the following code.
using System.Web;
namespace MultiLingualMVCApp
{
public class HtmlHelpers
{
///
/// Localized JavaScript bundle
///
///
///
public static HtmlString LocalizedJsBundle(string fileName)
{
string culture;
var cookie = HttpContext.Current.Request.Cookies["UserLanguage"];
if (cookie != null && cookie.Value != null
&& cookie.Value.Trim() != string.Empty)
culture = cookie.Value;
else
culture = "en";
fileName = string.Concat(fileName, "-", culture);
var output = (HtmlString)System.Web.Optimization.Scripts
.Render(fileName);
return output;
}
}
}
In the aforesaid Steps 13 and 14, you have included the custom JavaScript bundle in the BundleConfig.cs file and created a custom HTML helper class to use that specified language bundle based on the user-selected language.
The
Bundling and Minification concept is very helpful to reduce the network
traffic and file size while loading the form since it minifies the
multiple JavaScript files into one file and the file is being cached. If
you change the file content then it automatically gets the fresh
content with a new version number. So it helps to increase the page
performance in all aspects.
Step 15
In this step, you update the “Home.cshtml” form design with the following design.
You are done with the multi-language MVC application implementation
process with user language-specific JavaScript bundled minified files. So, build the application (F6) and hit the (F5) key to run the application with the following URL (http://localhost:49624/Demo/Index).
Enter the user name and select the preferred language as English then the form will be displayed like the following.
Now, click on the Submit button then it navigates to the home page like the following.
The preceding page is self-explanatory about the implemented
functionality. In the similar way when you click on the "Add User" and
"Delete User" buttons then it displays the alerts in the English
language.
Step 16
In this step, again you navigate to this URL (http://localhost:49624/Demo/Index) and select the user language as French and check the respective outputs as shown below.
Now, click on the "Submit" button, then it navigates to the home page.
The preceding page is self-explanatory
about the implemented functionality. In the similar way when you click
on the "Add User" and "Delete User" buttons then it displays the alerts
in the French language.
You can download the preceding discussed sample project at Source Code.
Conclusion
I
hope this article provides an idea of the implementation of
multilingual MVC application flow, creation of customized JavaScript
bundles with translated alert messages based on user language, custom
HTML helper classes, how to set user language in a cookie based on his
login, Displaying Resource translation values in a form and how to
maintain names and values in resource files.
