JQuery – Sibeesh Passion

Writing JavaScript Tests Using Jasmine Framework

SibeeshVenu — Mon, 10 Oct 2016 00:00:33 +0000

[toc]

Introduction

In this post we will see how we can write unit test cases in JavaScript. Here we are going to use a framework called Jasmine to write and test our unit test cases. Jasmine is a behavior driven development framework to test our JavaScript codes. The interesting things about Jasmine framework are, it doesn’t even require a DOM, independent on any framework, clean and easy. Here I will show you how we can create and run our JavaScript tests. I am going to use Visual Studio 2015 for the development. I hope you will like this article.

Download source code

JavaScript Tests With Jasmine

Background

As a developer, we all writes JavaScript codes for our client side developments. Am I right? It is more important to check whether the codes we have written works well. So for that we developer usually do unit testing, few developers are doing a manual testing to just check whether the functionality is working or not. But most of the MNC’s has set of rules to be followed while developing any functionalities, one of them is writing test cases, once the test cases passes, then only you will be allowed to move your codes to other environments. Here I will show you how we can write client side test cases with the help of a framework called Jasmine.

Setting up the project

To get started, please create an empty project in your Visual Studio.

empty_project

Now, we will install jQuery, jQueryUI from Nuget package manager.

nuget_package_manager

We are all set to start our coding now.

Creating page and needed JS file

Next, we are going to create a page as preceding, with two text boxes and needed references.

[html]

Writing JavaScript test cases with Jasmine framework – Sibeesh Passion

Start Date:
End Date:

[/html]

Now we can start writing our JavaScript codes in the file Index.js. We will start with a document ready function as preceding.

[js]
$(function () {
$(“#dtStartDate”).datepicker();
$(“#dtEndDate”).datepicker();
$(“#dtEndDate”).on(“change leave”, function () {
});
});
[/js]

Shall we create our validation functions? We will be creating a namespace indexPage and functions. You can see the validations below.

[js]
var indexPage = {};
indexPage.validationFunctions = (function () {
return {
getStartDateSelectedValue: function () {
return $(“#dtStartDate”).val();
},
getEndDateSelectedValue: function () {
return $(“#dtEndDate”).val();
},
isNullValue: function (selVal) {
if (selVal.trim() == “”) {
return true;
}
else {
return false;
}
},
isNullValueWithUIElements: function () {
if (indexPage.validationFunctions.isNullValue(indexPage.validationFunctions.getStartDateSelectedValue())
&& indexPage.validationFunctions.isNullValue(indexPage.validationFunctions.getEndDateSelectedValue())) {
alert(“The values can’t be null!.”);
}
},
isEndDateGreaterStart: function () {
var startDate = new Date(indexPage.validationFunctions.getStartDateSelectedValue());
var endDate = new Date(indexPage.validationFunctions.getEndDateSelectedValue());
if (startDate < endDate) {
return true;
}
else {
alert(“End date must be greater than start date!.”)
return false;
}
}
}
}(jQuery));
[/js]

Hope you are able t understand the codes written. We are wrote some validations like Null value check, end date greater than start date etc…

Now please run your application and check whether the validations are working fine.

null_validation_check

date_validation_check

Now, here comes the real part.

Setting up Jasmine Framework

To set Jasmine, we will add a new project to our solution.

add_new_project

Now install Jasmine from Nuget Package manager.

jasmine_nuget_package

Once you are done, the required files would be added to your project. We will be discussing about Jasmine once everything is set. So no worries.

Now please add a new HTML file on your Jasmine project, this is the page where we can see the test cases in actions, and add all the references as follows.

[html]

Jasmine Spec Runner – Sibeesh Passion

[/html]

Please do not forget to include the js files where we actually written the validations, jquery, jqueryui (if needed). Here indextests.js is the file where we are going to write the test cases.

Normally this page is called as Spec Runner, Now you may be thinking what is a Spec? Before going further, there are some terms you must be aware of, there are listed below.

Suites

A suit is the starting point of a Jasmine test cases, it actually calls the global jasmine function describe. It can have two parameters, a string value which describes the suit, and a function which implements the suit.

Spec

Like suites, a spec starts with a string which can be the title of the suit and a function where we write the tests. A spec can contain one or more expectation that test the state of our code.

Expectation

Value of an expectation is either true or false, an expectation starts with the function expect. It takes a value and call the actual one.

You can always read more here. Now please run your SpecRunner.html page. If everything is fine you can see a page as below.

jasmine_spec_runner_page

So are you all set? Shall we go and write our test cases? Please go to your IndexTest.js file and create a suit and spec as preceding.

[js]
describe(“Includes validations for index page”, function () {
var indexPage;
beforeEach(function () {
indexPage = window.indexPage.validationFunctions;
});

it(“Check for null values”, function () {
// We are going to pass “” (null) value to the function
var retVal = indexPage.isNullValue(“”);
expect(retVal).toBeTruthy();
});

});
[/js]

Here the expectation is true and we give toBeTruthy(), now lets go and find whether the test is passed or not. Please run the SpecRunner.html page again.

test_jasmine_specs

Now we will write test case for our function isEndDateGreaterStart, if you have noticed the function isEndDateGreaterStart, you can see that there are dependencies (UI elements). Inside of the function, we are getting the values from the UI elements.

[js]
var startDate = new Date(indexPage.validationFunctions.getStartDateSelectedValue());
var endDate = new Date(indexPage.validationFunctions.getEndDateSelectedValue());
[/js]

So in this case, we need to mock this values. It is known as ‘Spy’ in Jasmine. We can use a function called SpyOn for this.

[js]
it(“Spy call for datepicker date validation”, function () {
//Start date as 2015-03-25
spyOn(indexPage, “getStartDateSelectedValue”).and.returnValue(“2015-03-25”);
//End date as 2015-03-24
spyOn(indexPage, “getEndDateSelectedValue”).and.returnValue(“2015-03-24”);
var retVal = indexPage.isEndDateGreaterStart();
expect(retVal).toBeFalsy();
});
[/js]

Here we are giving start date as 2015-03-25 and end date as 2015-03-24 and we know 2015-03-25 < 2015-03-24 is false, so here we are giving expectation as false (toBeFalsy()). Now you are getting an alert as follows right?

alert_in_spyon_jasmine

But in testing framework we don’t need any alerts right? To get rid of this, you must create a spy for window.alert function and add it to the beforeEach so that it can be used for each specs. You can do that as follows.

[js]
window.alert = jasmine.createSpy(“alert”).and.callFake(function () { });
[/js]

Once after you add this code, alert message won’t be thrown. Now please add an another spec with true values (Start date – 2015-03-25, End date – 2015-03-26), so that it will return true.

[js]
it(“Spy call for datepicker date validation toBeTruthy”, function () {
//Start date as 2015-03-25
spyOn(indexPage, “getStartDateSelectedValue”).and.returnValue(“2015-03-25”);
//End date as 2015-03-26
spyOn(indexPage, “getEndDateSelectedValue”).and.returnValue(“2015-03-26”);
var retVal = indexPage.isEndDateGreaterStart();
expect(retVal).toBeTruthy();
});
[/js]

Now you can see all of your specs are passed.

run_all_specs_in_jasmine

Happy coding!.

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu

Upload Images To Azure Media Service From Client Side

SibeeshVenu — Thu, 30 Jun 2016 00:00:31 +0000

In this article we are going to see how we can upload images or any files to Media Service Account in Azure. If you are new to Azure media service account, I strongly recommend you to read my previous post related to media service account. Once we create a media service account, we will create an asset and get the SAS token related to the asset we created, we will discuss more about asset and SAS token. I hope you will like this.

Download the source code

You can always download the source code here: Azure Media Service From Client Side

Background

For the past few weeks I am working in Azure . Recently I got a requirement of storing images to Azure. Thus I decided to create a media service account for this requirement. The tricky part was I needed to upload the files from client side itself. Here we are going to see how we can create an Azure media service account and how to use the same.

What is media service account?

A media service account is a Azure based account which gives you access to cloud based media services in Azure.

Stores metadata of the media files you create, instead saving the actual media content.

To work with media service account, you must have an associated storage account.

While creating a media service account, you can either select the storage account you already have or you can create a new one.

Since the media service account and storage account is treated separately, the content will be available in your storage account even if you delete your media service account

Please be noted that your storage account region must be same as your media service account region.

Prerequisites

Visual Studio

Azure account with active subscription

If you are a start up company or you are in thinking to start a one, you can always go for BizSpark(Software and services made for the start ups), to join please check here: How to join bizspark. Or you can always create a free account here.

Things we are going to do

The following are the tasks we are going to do.

Creating an Azure media service account.

If you don’t have an Azure account with active subscription, you must creates it first before going to do this task.

Create an Asset in Media service account

Get the SAS token for an Asset

Client side upload process

Retrieves the uploaded items

Now we will go and create our media service account.

Create an Azure media service account

To create an azure media service account, please see the link given below. I have explained the steps there.

Working With Azure Media Service Account

Hope you have got the storage account and media service account with you.

Create an Asset in Media service account

You can always create an Asset either via code or manually in https://portal.azure.com.

Blob Service In Portal

New Container

If you want to create the Asset via code, you can create as below.

[csharp]
public static string CreateBLOBContainer(string containerName)
{
try
{
string result = string.Empty;
CloudMediaContext mediaContext;
mediaContext = new CloudMediaContext(mediaServicesAccountName, mediaServicesAccountKey);
IAsset asset = mediaContext.Assets.Create(containerName, AssetCreationOptions.None);
return asset.Uri.ToString();
}
catch (Exception ex)
{
return ex.Message;
}
}
[/csharp]

You can always get the sample codes for creating the assets from here: Azure Media Service Account

Get the SAS token for an Asset

Before going to generate SAS, we want to know what is a SAS right?

What is SAS?

SAS stands for shared access signature, it is the mechanism used for giving limited access to the objects in your storage account to your clients, in the way that you do not need to share your account key. In SAS, you can set how long the given access must be active and you can always set the read/write access too. If you want to know more about the SAS, I recommend you to read here.

Once you downloaded the application from here, you can add a function to generate the SAS token dynamically

[csharp]
private static string GenerateSASToken(string assetId)
{
CloudStorageAccount backupStorageAccount = CloudStorageAccount.Parse(myAzureCon);
CloudBlobClient client = backupStorageAccount.CreateCloudBlobClient();
CloudBlobContainer container = client.GetContainerReference(assetId);
BlobContainerPermissions permissions = container.GetPermissions();

permissions.SharedAccessPolicies.Add(string.Concat(assetId, "AccessPolicy"), new SharedAccessBlobPolicy
{
Permissions = SharedAccessBlobPermissions.Read | SharedAccessBlobPermissions.Write,
SharedAccessExpiryTime = DateTime.UtcNow.AddDays(365)
});
permissions.PublicAccess = BlobContainerPublicAccessType.Container;
container.SetPermissions(permissions);

ServiceProperties sp = client.GetServiceProperties();
sp.DefaultServiceVersion = "2013-08-15";
CorsRule cr = new CorsRule(); cr.AllowedHeaders.Add("*");
cr.AllowedMethods = CorsHttpMethods.Get | CorsHttpMethods.Put | CorsHttpMethods.Post;
cr.AllowedOrigins.Add("*");
cr.ExposedHeaders.Add("x-ms-*");
sp.Cors.CorsRules.Clear();
sp.Cors.CorsRules.Add(cr);
client.SetServiceProperties(sp);
var sas = container.GetSharedAccessSignature(new SharedAccessBlobPolicy(), string.Concat(assetId, "AccessPolicy"));
return container.Uri + sas;
}
[/csharp]

Here we are giving the asset id of the asset we just created. And the function will give you the SAS token we need. Hope you understood. Now we can start our client side coding for uploading.

Client side upload process

Create an index page with an input file and other needed UI as follows.

[html]

[/html]

Now create a JS file Index.js. And create a file change function as follows. Sounds good?

[js]
$(document).ready(function () {
$(‘#fiesInfo’).html(”);
$(‘#divOutput’).html(”);
upldCount = 0;
totSize = 0;

$(‘#file’).change(function () {
selectedFile = [];
if (this.files.length > 0) {
$.each(this.files, function (i, v) {
totalFileSize = totalFileSize + v.size;
selectedFile.push({ size: v.size, name: v.name, file: v });
});
}
});
});
[/js]

Here we are pushing the selected files to an array in a needed format. Now we will add the upload click event.

[js]

$("#buttonUploadFile").click(function (e) {
upload();
});
[/js]

And following is the code for the function upload.

[js]
function upload() {
$(‘#fiesInfo’).html(”);
$(‘#divOutput’).html(”);
upldCount = 0;
totSize = 0;
startDateTime = new Date();
$(‘#fiesInfo’).append(‘ Uploading starts at ’ + startDateTime);
if (selectedFile == null) {
alert("Please select a file first.");
}
else {
for (var i = 0; i < selectedFile.length; i++) {
fileUploader(selectedFile[i]);
upldCount = upldCount + 1;;
totSize = totSize + selectedFile[i].size;
}
}
};
[/js]

Did you notice that we are calling a function inside a loop which accepts file content as parameter?

[js]
function fileUploader(selectedFileContent) {
reader = new FileReader();
var fileContent = selectedFileContent.file.slice(0, selectedFileContent.size – 1);
reader.readAsArrayBuffer(fileContent);
reader.onloadend = function (evt) {
if (evt.target.readyState == FileReader.DONE) {
var currentAzureStorageUrl = baseUrl;
var indexOfQueryStart = currentAzureStorageUrl.indexOf("?");
var uuid = generateUUID();
var fileExtension = selectedFileContent.name.split(‘.’).pop();
var azureFileName = uuid + ‘.’ + fileExtension;
submitUri = currentAzureStorageUrl.substring(0, indexOfQueryStart) + ‘/’ + azureFileName + currentAzureStorageUrl.substring(indexOfQueryStart);
var requestData = new Uint8Array(evt.target.result);
ajaxUploadCall(submitUri, requestData);
}
};
}
[/js]

Here baseUrl is the SAS you just created for an asset. The example of SAS is https://myaccount.blob.core.windows.net/sascontainer/sasblob.txt?sv=2015-04-05&st=2015-04-29T22%3A18%3A26Z&se=2015-04-30T02%3A23%3A26Z&sr=b&sp=rw&sip=168.1.5.60-168.1.5.70&spr=https&sig=Z%2FRHIX5Xcg0Mq2rqI3OlWTjEg2tYkboXr1P9ZUXDtkk%3D

Once the reader onloadend event is finished we are passing the uri and data in the format of array. Can we see the AJAX call now?

[js]
function ajaxUploadCall(submitUri, selectedFileContent) {
$.ajax({
url: submitUri,
type: "PUT",
data: selectedFileContent,
processData: false,
async: false,
beforeSend: function (xhr) {
xhr.setRequestHeader(‘x-ms-blob-type’, ‘BlockBlob’);
},
success: function (data, status) {

},
complete: function (event, xhr, settings) {
compCount = compCount + 1;
if (selectedFile.length == compCount) {
RptDisplay();
}
},
error: function (xhr, desc, err) {
}
});
}
[/js]

In your ajax call please do not forget to add the header as below.

[js]
beforeSend: function (xhr) {
xhr.setRequestHeader(‘x-ms-blob-type’, ‘BlockBlob’);
}
[/js]

If every selected files are uploaded we are calling a function RptDisplay() right?

[js]
function RptDisplay() {
$(‘#divOutput’).hide();
$(‘#fiesInfo’).append(‘

’);
$(‘#fiesInfo table’).append(‘No of files uploaded: ’ + upldCount + ‘’);
$(‘#fiesInfo table’).append(‘Total size uploaded: ’ + formatSizeUnits(totSize) + ‘’);
var endDateTime = new Date();
$(‘#fiesInfo table’).append(‘Uploading ends at ’ + endDateTime + ‘’);
$(‘#fiesInfo table’).append(‘The time taken is ’ + findDateDiff(startDateTime, endDateTime) + ‘’);
$(‘#divOutput’).show();
};
[/js]

You can get all the other needed functions like findDateDiff(), formatSizeUnits(), generateUUID() and the CSS from the source code attached. Please download the same. Now please run your page and you can find an input file there, select few files and try upload, if you have configured everything fine, I am sure you will get a report. Let us see that now.

Upload File

Upload File Output

Retrieves the uploaded items

To retrieve the items you can always create a function as follows, which accepts asset id as parameter.

[csharp]
public string getEventImage(string assetID)
{
CloudStorageAccount backupStorageAccount = CloudStorageAccount.Parse(myAzureCon);
CloudBlobClient client = backupStorageAccount.CreateCloudBlobClient();
CloudBlobContainer container = client.GetContainerReference(assetID.Replace("nb:cid:UUID:", "asset-"));
List results = new List();
foreach (IListBlobItem item in container.ListBlobs(null, false))
{
results.Add(item.Uri.ToString());
}
return JsonConvert.SerializeObject(results);
}
[/csharp]

Now if you login to your azure portal and click on the asset you created, you can see the contents are uploaded there.

Uploaded Contents

Conclusion

Did I miss anything that you may think which is needed? Have you ever tried Azure media service account? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

Style Or Format JSON Data In JQuery

SibeeshVenu — Tue, 31 May 2016 00:00:34 +0000

In this post we will discuss how we can format or style the JSON you get from the server. Sometimes you may need to show the exact JSON you get from your API or from server in your web page. Normally if you just bind this JSON to any pre tag, it will look like just a straight line. Isn’t it? To overcome this we have an option in jQuery . I hope you will like this.

Background

For the past few months I am working with some Web API projects. As you all know the preferred output of an API is JSON, I am returning JSON from my API. I wanted to show this JSON in a Pre tag as a result, but in a formatted way or stylish way. Here I am going to explain how we can do this.

Using the code

Before getting started, please make sure that you have added the jQuery reference to your page.

[html]

[/html]

Now let us say we are getting a JSON as follows from our API.

[js]
[{"AreaCode":"B697-31","Revenue":12747128.190000001},{"AreaCode":"B697-92","Revenue":7922559.1600000048},{"AreaCode":"B697-76","Revenue":7541039.540000001},{"AreaCode":"B697-46","Revenue":7076495.5800000066},{"AreaCode":"B553-131","Revenue":5738816.5099999979},{"AreaCode":"B553-193","Revenue":4608556.52},{"AreaCode":"B697-74","Revenue":3895194.1099999994},{"AreaCode":"D158-233","Revenue":3572808.989999996},{"AreaCode":"B697-78","Revenue":3512657.6999999937},{"AreaCode":"B672-31","Revenue":2955916.9800000032},{"AreaCode":"B553-46","Revenue":2806813.7100000042}]
[/js]

It will obviously looks like preceding when you just append it to a pre tag.

JSON in Pre Tag

Now we will format this JSON string with JQuery Parse and JQuery stringify method as follows.

[js]
var tmpData = JSON.parse(data);
var formattedData = JSON.stringify(tmpData, null, ‘\t’);
$(‘#output’).text(formattedData);
[/js]

Here output is the id of our pre tag which we defined as follows.

[html]

[/html]

Now if you bind the data after the formatting to pre tag, you will get an out put as follows.

JSON in Pre Tag Output

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

TagIt Control With Data From Database Using Angular JS In MVC Web API

SibeeshVenu — Thu, 25 Feb 2016 00:00:46 +0000

In this article we will learn how to load the tags from database in MVC Web API using Angular JS. Here we are going to use a pretty control called tagIt which does the tag part easier with a lot of configuration options. This article use a normal MVC application which includes the Web API control in it, in addition to it, we uses Angular JS for our client side operations. You can always get the tips/tricks/blogs about these mentioned technologies from the links given below.

AngularJS Tips, Tricks, Blogs

MVC Tips, Tricks, Blogs

Web API Tips, Tricks, Blogs

As the article title implies, we are actually going to load the tags from a table called tblTags from SQL Server database. So now we will go and create our application. I hope you will like this.

Download the source code

You can always download the source code here: Load Tags From Database Using Angular JS In MVC Web API

Background

Few days back I was trying to use the tagIt widget in one of my application. I could do that with some pre defined tags as a variable. Then I thought why don’t we try some thing like loading these tags from database. Hence my application uses MVC architecture, I selected Web API for retrieving the data from database. I hope someone can find this useful.

Create a MVC application

Click File-> New-> Project then select MVC application. Before going to start the coding part, make sure that all the required extensions/references are installed. Below are the required things to start with.

Angular JS

TagIt Plugin

jQuery

You can all the items mentioned above from NuGet. Right click on your project name and select Manage NuGet packages.

Manage NuGet Package Window

Once you have installed those items, please make sure that all the items(jQuery, Angular JS files, Tag It JS files like tag-it.js) are loaded in your scripts folder.

Using the code

Before going to load the tags from a database we will try to load our tagit control with some predefined array values. No worries, later we will change this array values to the values we get from database.

Include the references in your _Layout.cshtml

As we have already installed all the packages we need, now we need to add the references, right?

[html]
@RenderBody()

@Scripts.Render("~/bundles/jquery")

@RenderSection("scripts", required: false)
[/html]

Here TagScripts.js is the JavaScript file where we are going to write our own scripts.

Set the changes in View

So we have added the references, now we will make the changes in our view. As we uses Angular JS, we will set our ng-app and ng-controller as follows.

[html]

Nothing found!

[/html]

You can give a style as follows if you want.

[css]

[/css]

Oops!, I forgot to mention, please do not forget to include the CSS style sheets.

[html]

[/html]

Now we can write the scripts in our TagScripts.js file.

Create Angular App

You can create an Angular module as follows.

[js]
var app;
//Angular App
app = angular.module(‘tagApp’, []);
[/js]

Here the module name must be same as we have given in ng-app in our view.

Create Angular Controller

You can create an Angular Controller as follows.

[js]
app.controller(‘tagController’, function ($scope) {
$("#tags").tagit({
availableTags: availableTags,
autocomplete: { delay: 0, minLength: 1 },
beforeTagAdded: function (event, ui) {
if ($.inArray(ui.tagLabel, availableTags) < 0) {
$(‘#error’).show();
return false;
} else {
$(‘#error’).hide();
}
}
});
});
[/js]

As you can see we have called tagit() function to initialize the tagit control. Below are the explanations to the options we have given.

availableTags

availableTags are the source we need to apply to the control so that the given items can be shown on user actions.

autocomplelte

autocomplete is a property which enables the auto complete option, when it is true user will get the items listed accordingly for each key press

beforeTagAdded

beforeTagAdded is a callback function which gets fired before we add the new tags to the control. This function can be used to do all the needed tasks before adding the given item to the control. For example, if we need to load only the values from the database and if we need to restrict creating the new tags by the user, means user will be allowed to use only the available tags which is in the available tag array. The preceding code block does what has been explained above.

[js]
if ($.inArray(ui.tagLabel, availableTags) < 0) {
$(‘#error’).show();
return false;
} else {
$(‘#error’).hide();
}
[/js]

If user tries to add a new tag, we will show the alert div which we already set in our view.

Now it is time to see the control in our view, let us see whether it works fine, if not, we may need to go back and checks again.

Tag_It_Control_Defined_Array

Tag_It_Control_Defined_Array_If_Nothing_Found

It seems everything is fine, thank god we don’t need any debugging 🙂

Now we will create a Web API controller. Oh yeah, we are going to start our real coding. Right click on your controller folder and click new.

Web_API_controller

So our Web API controller is ready, then it is time to go to do some Angular JS scripts, don’t worry we will come back here.

We need to make changes to our Angular JS controller tagController as follows.

[js]
//Angular Controller
app.controller(‘tagController’, function ($scope, tagService) {
//Angular service call
var tgs = tagService.getTags();
if (tgs != undefined) {
tgs.then(function (d) {
availableTags = [];
for (var i = 0; i < d.data.length; i++) {
availableTags.push(d.data[i].tagName);
}

$("#tags").tagit({
availableTags: availableTags,
autocomplete: { delay: 0, minLength: 1 },
beforeTagAdded: function (event, ui) {
if ($.inArray(ui.tagLabel, availableTags) < 0) {
$(‘#error’).show();
return false;
} else {
$(‘#error’).hide();
}
}
});
console.log(JSON.stringify(availableTags));
}, function (error) {
console.log(‘Oops! Something went wrong while fetching the data.’);
});
}
});
[/js]

As you have noticed, we are calling an Angular JS service here. Once we get the data from the service, we are assigning it to the array which we have initialized with the predefined values, so that the data from the database will be available in the tagit control. So can we create our Angular JS service?

[js]
//Angular Service
app.service(‘tagService’, function ($http) {
//call the web api controller
this.getTags = function () {
return $http({
method: ‘get’,
url: ‘api/tag’
});
}
});
[/js]

This will fire our Web API controller and action GET api/tag. And the Web API controller will give you the results which we will format again and give to the available tag array. Sounds cool? Wait, we can do all these stuffs without Angular JS, means we can simply call a jQuery Ajax Get. Do you want to see how? Here it is.

[js]
/* Using jQuery */

$(function () {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
//Load the available tags from database start
$.ajax({
type: ‘GET’,
dataType: ‘json’,
contentType: ‘application/json;charset=utf-8’,
url: ‘http://localhost:56076/api/Tag’,
success: function (data) {
try {
if (data.length > 0) {
availableTags = data;
}
} catch (e) {
console.log(‘Error while formatting the data : ‘ + e.message)
}
},
error: function (xhrequest, error, thrownError) {
console.log(‘Error while ajax call: ‘ + error)
}
});
//Load the available tags from database end

Now only thing pending is to get the data from our API controller, we will see that part now. For that first you must create a database and a table in it right?

Create a database

The following query can be used to create a database in your SQL Server.

[sql]
USE [master]
GO

/****** Object: Database [TrialsDB] Script Date: 17-Feb-16 10:21:17 PM ******/
CREATE DATABASE [TrialsDB]
CONTAINMENT = NONE
ON PRIMARY
( NAME = N’TrialsDB’, FILENAME = N’C:\Program Files\Microsoft SQL Server\MSSQL11.MSSQLSERVER\MSSQL\DATA\TrialsDB.mdf’ , SIZE = 3072KB , MAXSIZE = UNLIMITED, FILEGROWTH = 1024KB )
LOG ON
( NAME = N’TrialsDB_log’, FILENAME = N’C:\Program Files\Microsoft SQL Server\MSSQL11.MSSQLSERVER\MSSQL\DATA\TrialsDB_log.ldf’ , SIZE = 1024KB , MAXSIZE = 2048GB , FILEGROWTH = 10%)
GO

ALTER DATABASE [TrialsDB] SET COMPATIBILITY_LEVEL = 110
GO

IF (1 = FULLTEXTSERVICEPROPERTY(‘IsFullTextInstalled’))
begin
EXEC [TrialsDB].[dbo].[sp_fulltext_database] @action = ‘enable’
end
GO

ALTER DATABASE [TrialsDB] SET ANSI_NULL_DEFAULT OFF
GO

ALTER DATABASE [TrialsDB] SET ANSI_NULLS OFF
GO

ALTER DATABASE [TrialsDB] SET ANSI_PADDING OFF
GO

ALTER DATABASE [TrialsDB] SET ANSI_WARNINGS OFF
GO

ALTER DATABASE [TrialsDB] SET ARITHABORT OFF
GO

ALTER DATABASE [TrialsDB] SET AUTO_CLOSE OFF
GO

ALTER DATABASE [TrialsDB] SET AUTO_CREATE_STATISTICS ON
GO

ALTER DATABASE [TrialsDB] SET AUTO_SHRINK OFF
GO

ALTER DATABASE [TrialsDB] SET AUTO_UPDATE_STATISTICS ON
GO

ALTER DATABASE [TrialsDB] SET CURSOR_CLOSE_ON_COMMIT OFF
GO

ALTER DATABASE [TrialsDB] SET CURSOR_DEFAULT GLOBAL
GO

ALTER DATABASE [TrialsDB] SET CONCAT_NULL_YIELDS_NULL OFF
GO

ALTER DATABASE [TrialsDB] SET NUMERIC_ROUNDABORT OFF
GO

ALTER DATABASE [TrialsDB] SET QUOTED_IDENTIFIER OFF
GO

ALTER DATABASE [TrialsDB] SET RECURSIVE_TRIGGERS OFF
GO

ALTER DATABASE [TrialsDB] SET DISABLE_BROKER
GO

ALTER DATABASE [TrialsDB] SET AUTO_UPDATE_STATISTICS_ASYNC OFF
GO

ALTER DATABASE [TrialsDB] SET DATE_CORRELATION_OPTIMIZATION OFF
GO

ALTER DATABASE [TrialsDB] SET TRUSTWORTHY OFF
GO

ALTER DATABASE [TrialsDB] SET ALLOW_SNAPSHOT_ISOLATION OFF
GO

ALTER DATABASE [TrialsDB] SET PARAMETERIZATION SIMPLE
GO

ALTER DATABASE [TrialsDB] SET READ_COMMITTED_SNAPSHOT OFF
GO

ALTER DATABASE [TrialsDB] SET HONOR_BROKER_PRIORITY OFF
GO

ALTER DATABASE [TrialsDB] SET RECOVERY FULL
GO

ALTER DATABASE [TrialsDB] SET MULTI_USER
GO

ALTER DATABASE [TrialsDB] SET PAGE_VERIFY CHECKSUM
GO

ALTER DATABASE [TrialsDB] SET DB_CHAINING OFF
GO

ALTER DATABASE [TrialsDB] SET FILESTREAM( NON_TRANSACTED_ACCESS = OFF )
GO

ALTER DATABASE [TrialsDB] SET TARGET_RECOVERY_TIME = 0 SECONDS
GO

ALTER DATABASE [TrialsDB] SET READ_WRITE
GO
[/sql]

Now we will create a table 🙂

Create table in database

Below is the query to create table in database.

[sql]
USE [TrialsDB]
GO

/****** Object: Table [dbo].[tblTags] Script Date: 17-Feb-16 10:22:00 PM ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

CREATE TABLE [dbo].[tblTags](
[tagId] [int] IDENTITY(1,1) NOT NULL,
[tagName] [nvarchar](50) NOT NULL,
[tagDescription] [nvarchar](max) NULL,
CONSTRAINT [PK_tblTags] PRIMARY KEY CLUSTERED
(
[tagId] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]

GO
[/sql]

Can we insert some data to the table now?

Insert data to table

You can use the below query to insert the data.

[sql]
USE [TrialsDB]
GO

INSERT INTO [dbo].[tblTags]
([tagName]
,[tagDescription])
VALUES
(
,)
GO
[/sql]

So let us say, we have inserted the data as follows.

Insertion_In_Table

Next thing we are going to do is creating a ADO.NET Entity Data Model.

Create Entity Data Model

Right click on your model folder and click new, select ADO.NET Entity Data Model. Follow the steps given. Once you have done the processes, you can see the edmx file and other files in your model folder.

ADO_NET_Model_Entity

Then it is time to go back our Web API controller. Please change the code as below.

[csharp]
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Data.Entity.Infrastructure;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web;
using System.Web.Http;
using Load_Tags_From_DB_Using_Angular_JS_In_MVC.Models;

namespace Load_Tags_From_DB_Using_Angular_JS_In_MVC.Controllers
{
public class TagController : ApiController
{
private DBEntities db = new DBEntities();

// GET api/Tag
public IEnumerable Get()
{
return db.tblTags.AsEnumerable();
}
}
}
[/csharp]

Once this is done, we can say that we are finished with all steps. That’s fantastic right? Now we will see the output.

Output

Load_Tags_From_Database_Output

Have a happy coding.

Conclusion

Did I miss anything that you may think which is needed? Did you try Web API yet? Have you ever wanted to do this requirement? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

jQuery Datatable With Server Side Data

SibeeshVenu — Thu, 25 Feb 2016 00:00:43 +0000

Introduction

In this article, we will learn how we can work with jQuery Datatables with server-side data. Here we are going to use an MVC application with jQuery and other required packages installed in it. If you are new to MVC, You can always get the tips/tricks/blogs about that here MVC Tips, Tricks, Blogs. jQuery Datatables is a client-side grid control that is lightweight and easy to use. But when it comes to grid control, it must be usable when it supports the server-side loading of data. This control is perfect for that. I guess, it is enough for the introduction. Now we will start using our grid. I hope you will like this.

Download the source code

You can always download the source code here:

Datatable With Server-Side Data

Create a MVC application

Datatables Package
jQuery

You can all the items mentioned above from NuGet. Right-click on your project name and select Manage NuGet packages.

Manage NuGet Package Window

Once you have installed those items, please make sure that all the items(jQuery, Datatables JS files) are loaded in your scripts folder.

Using the code

Now let us add the needed references.

Include the references in your _Layout.cshtml

As we have already installed all the packages we need, now we need to add the references, right? After adding the reference, your _Layout.cshtml will looks like below.

Here MyScripts.js is the JavaScript file where we are going to write our own scripts.

Add a normal MVC controller

Now we will add a normal MVC controller in our app. Once you add that you can see an ActionResult is created for us.

public ActionResult Index() { return View(); }

Right-click on the controller, and click add view, that will create a View for you. Now we will change the view as follows.

So we have set the headers and footer for our grid, where we are going to load the grid control in the table myGrid. So far the UI part is done, now it is time to set up our database and entity model. Are you ready?

Create a database

The following query can be used to create a database in your SQL Server.

Now we will create a table 🙂

Create table in database

Below is the query to create table in database.

Insert data to table

To insert the data, I will attach a database script file along with the download file, you can either run that or insert some data by using the below query. By the way, if you would like to know how to generate scripts with data in SQL Server, you can check here.

Along with this, we can create a new stored procedure that will fetch the data. Following is the query to create the stored procedure.

Next thing we are going to do is creating a ADO.NET Entity Data Model.

Create Entity Data Model

Right-click on your model folder and click new, select ADO.NET Entity Data Model. Follow the steps given. Once you have done the processes, you can see the edmx file and other files in your model folder.

Now we will go back to our controller and add a new JsonResult which can be called via a new jQuery Ajax request. No worries, we will create that Ajax requests later. Once you add the Jsonresult action, I hope your controller will look like this.

Here TrialsDBEntities is our entity class. Please be noted that to use the model classes in your controller, you must add the reference as follows.

using jQuery_Datatable_With_Server_Side_Data.Models;

I know all you are familiar with this, I am just saying!. Now can we create a function GetSales in our model class Sales ?.

We uses normal LINQ queries here, and we take only 100 records to load for now. If you don’t want to use this method you can call our stored procedure which we have created while creating our database. You can call this as explained in the below function.

Now the only thing pending is to call our controller JsonResult action right? We will do some code in our MyScript.js file.

Here “dataSrc”: “” should be used if you have a plain JSON data. The sample data can be find below.

We have done everything!. Can we see the output now?

Output

jQuery Datatable With Server Side Data

jQuery Datatable With Server Side Data Search

Have a happy coding.

Conclusion

Did I miss anything that you may think which is needed? Did you use jQuery Datatables in your application? Have you ever wanted to do this requirement? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

Change Page Layout Dynamically Using jQuery Layout Plug in

SibeeshVenu — Mon, 22 Feb 2016 09:32:31 +0000

In this post we are going to see how we can change the layout a page dynamically, with out writing any CSS styles for the page. Sounds cool right? Are you afraid of writing the CSS styles which will suit for all the screens like Mobiles, Tabs, Monitors, High resolution? As I am not a good designer, I was worried all the time about the resolution issues whenever I use any custom styles. Here we will be using a jQuery plugin called jQuery Layout and we do have options to set our Footer, Side bar, Header and many more. Personally I liked this plug in , That is why I am sharing some information about this plugin. I hope you will like this.

Download the source code

You can always download the source code here:

Change Page Layout Dynamically

Background

I came to know about this plugin when I was searching for some page layout for my application. Then I just installed it and started using. It is pretty simple to use. You can always download the files from the plug in page here.

Using the code

To start with this plug in, the first thing you are required to do is adding the necessary references. We are going to use three references, jQuery, jquery.layout-latest.js, layout-default-latest.css.

[html]

[/html]

The next thing we need is some div elements, we can set it as follows.

[html]

Content area

Header

Footer

Sidebar

[/html]

Now we will add the scripts.

[js]

[/js]

Here we uses applyDefaultStyles:true, this is for ensuring all the required default conditions/options are being applied automatically. Now if you run your page you will be seeing a layout as follows.

Change Page Layout Dynamically

And this is how your page will look like when you toggle every panes.

Change Page Layout Dynamically WHen Toggling

Following are the key features offered by the development team as they have mentioned in their plug in home page here.

simple to use: powerful but simple syntax is easy to learn

unlimited layout capabilities: 5 regions per layout – unlimited nesting

dozens of options: every aspect is customizable, globally and by region

total CSS control: dozens of auto-generated classes create ANY UI look

extensible: callbacks, methods, and special utilities provide total control

custom buttons: integrates with your own buttons for a custom UI look

collapsable: each pane can be closed, using any UI animation you want

hidable: panes can be completely hidden, either on startup or at any time

resizable: each pane can be resized, within automatic or specified limits

slidable: panes can also ‘slide open’ for temporary access

headers & footers: each region has unlimited headers or footers

hotkeys: can use the cursor-keys and/or define custom hotkeys

use any elements: use divs, iframes or any elements you want as a ‘pane’

compatible with UI widgets: integrates with jQuery widgets and plug-ins

demo mode: set applyDefaultStyles option for a fully functional layout

The developers have provided so many demo of how we can use this plugin, you can always check those here.

That is all, now you can start using this plugin. See the complete code below.

Complete code

[html]

Change Page Layout Dynamically Using jQuery Layout Plug in

Content area

Header

Footer

Sidebar

[/html]

Conclusion

Did I miss anything that you may think which is needed? Have you ever wanted to do this requirement? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

Disable Dates In Datepicker

SibeeshVenu — Thu, 12 Nov 2015 06:28:23 +0000

In this post we will see how we can disable some dates in a jQuery datepicker control. We all worked in datepicker controls right? But in some situations we may need to add some validations like to restrict some dates in the picker so that user can not select those and move further. Here we are going to disable all the future Saturdays. I hope you will like this.

Using the code

The first thing you need to do is including the needed files.

jQuery

jQuery UI

jQuery UI CSS

Once you are done adding the files, you need to add a text box in which we are going to implement the picker.

[html]

[/html]

Now we will create an array which contains the list of dates we need to disable.

[js]
var disabledDates = ["2015-11-28","2015-11-14","2015-11-21"]
[/js]

Next we will load the datepicker to our text box.

[js]
$(‘input’).datepicker({
beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate(‘yy-mm-dd’, date);
return [ disabledDates.indexOf(string) == -1 ]
}
});
[/js]

Have you noticed that we are calling a function beforeShowDay, this is used to disable the dates. It will return false if the date exists in the disabledDates.

That’s all we have done it.

Please see the jsfiddle here: Disable Date In DatePicker

Output

Disable Dates In Datepicker

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

Hoisting In JavaScript

SibeeshVenu — Fri, 06 Nov 2015 12:19:21 +0000

In this post we will discuss the importance and limitations of Hoisting in JavaScript. We all writes client side codes. Right? But few of you might not be aware of the term Hoisting. Hoisting is one of the default behaviour of JavaScript, it is the process of moving all the declarations of the variables to the top of the current function or scope. In this post we will explain this Hoisting in detail with some examples. I hope you will like this.

Background

I used to spend more time with the client side codes rather than server side codes. In my thought is is always good if you do the formation of your data in client side instead doing it in the server side. Client side loops are always faster than the server side ones. As a client side code developer, you must understand the word Hoisting in JavaScript. Here we will discuss that.

Using the code

Before going through we need to know some facts in JavaScript.

Do you know?

In JavaScript we can use any variable before it is declared or a variable can be declared after it is used.

For Example:

The below two scripts will return same output.

[js]

[/js]

And

[js]

[/js]

Limitations of Hoisting

Even though the process of Hosting will move the declarations to the top, there is some limitations too. We will discuss it here now.

Initializing a variable can not be Hoisted or In simple JavaScript Hoists declarations not initializations.

For Example:

The below scripts will give different outputs.

[js]

[/js]

This will give you an output of 6.

And

[js]

[/js]

This will give you an output of NaN. Since we are initializing the value of y, the JavaScript Hoisting is not happening, so the y value will be undefined. The JavaScript will consider that y is not yet declared.

So the second example is same as of below.

[js]

[/js]

This will give you an output of NaN.

Hoisting In JavaScript

Conclusion

Since we are all developers, it is always makes things simple. So much complexity in software comes from trying to make one thing do two things. So always declare your variables on top of your function or scope. Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

Regex to remove a word from a string

SibeeshVenu — Mon, 02 Nov 2015 10:13:52 +0000

In this post we will see how we can remove a particular word from a string entirely in jQuery.

[js]
var newString= oldString.replace(/Unspecified/g, ”);
[/js]

Here I am removing the word Unspecified from my variable oldString.

Please see my other posts related to JQuery here: JQuery Posts

Kindest Regards
Sibeesh Venu

Custom Pager Using prev and next In jQuery

SibeeshVenu — Wed, 21 Oct 2015 10:44:24 +0000

In this post we will create a custom pager using prev and next functions in jQuery. You can treat this post as a simple demo of using prev and next functions. We will be using some html UI elements and we will apply the paging functionality by using native jQuery codes. In this way you can get the information about on which page is requested by the user, once you get it, you can create an jQuery ajax call and fetch the data from the database and show. You need to know the basic of jQuery and CSS before going further. I hope you will like this.

Background

We can find so many pager in on-line. Here in this post I am just trying to populate my own pager. Please be noted that this is just a demo, so that you can not find more functionalities here.

Using the code

First thing you need to do is create a page.

[html]

Prev Next In jQuery – Sibeesh Passion

-6

-5

-4

-3

-2

-1

<<<

>>>

[/html]

Then we will apply some CSS, so that it will look nice.

[css]

[/css]

Now add jQuery reference.

[js]

[/js]

Run your page and make sure that our custom pager design is fine.

Custom Pager Using prev and next In jQuery

Now it is time to add our scripts.

[js]

[/js]

If you notice in the code block, you can see that we are checking $(‘#outer div’).length / 2 < i in each click. This will get true when the user clicked after the selection goes to end. We are just making the iteration to first when this occurs.

We are doing the above mentioned scenario both in prev click and next click. Now it is time for demo right?

Please see the demo here: Custom Pager

That is all. We did it.

Complete Code

[html]

Prev Next In jQuery – Sibeesh Passion

-6

-5

-4

-3

-2

-1

<<<

>>>

[/html]

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

Kindest Regards
Sibeesh Venu