Sammy.Js–simplest steps to create Restful web application (Single Page Applications) SPAs

Dear All,

Today I  am sharing with you one of the best and easy to understand JS which is “Sammy.Js”.

“Sammy.js” is 16 k java script over JQUERY which provide facility to developer to create RESTFUL SPAs (single Page Application).

It is very  clean, simple and easy to adapt java script.rl

You get Restful URL easily with this.

It added “#”  hash in URL. For example see below example

http://Indiandotnet.com/index#/

http://indiandotnet.com/index#/Products/

http://indiandotnet.com/Index#/products/1

Let us understand this with example.

In last post you have seen how to consume web API with JQUERY https://indiandotnet.wordpress.com/2014/03/21/how-to-consume-web-api-using-jquery/

Here I am using the sample source code to move forward with sammy.js.

What we are planning here to create a page with menus and in this page we will call sammy.js on menu to call responsive URL to show states list ,particular state according to id and default page . as shown in below figure

Html_Sammy_Js

Step 1:-  Add “Sammy.js” in the project using Nuget package manager as shown in below figure

sammyJs_Nuget_Package

Step 2:- Once the Sammy.Js added in your project you will find the Js in your project’s script folder

sammyJs_in_project

Step 3:-

Add sammy js reference in the project

   1: <script src="~/Scripts/jquery-2.1.0.min.js"></script>

   2:    <script src="~/Scripts/sammy-0.7.4.min.js"></script>

Step 4:-

Now below screen shot show the html which is designed to achieve our task

Default_Html

Step 5:- Now when Home menu link click by end user we will show  default page which in Index page in our case and its URL will be

http://localhost:43597/Home/index#/ 

And when user click on States link in navigation then it will show URL

http://localhost:43597/Home/index#/States 

And page will show list of states

last but not the least when user click on MP menu in navigation  then it will show URL

http://localhost:43597/Home/index#/States/1 

and page will show state name according to Id which is currently 1 in above url

Step 6:-

Now to achieve this we need to invoke Sammy.js  as shown below in below code

   1: <script type="text/javascript">

   2:  

   3:       $(document).ready(function () {

   4:           var sammySPA = $.sammy("#main", function () { // initializing main div which is base for SPAs application content 

   5:  

   6:               //Default url  

   7:               this.get('#/', function (context) {

   8:                   

   9:                   context.app.swap(''); // clear what ever previously written in main div

  10:                   $("#main").append("<B> Showing default url content by code</b>"); // this code append the content in msin div 

  11:  

  12:               });

  13:               //below code will fire when user click on state link 

  14:               this.get('#/States', function (context) {

  15:                 

  16:                   //calling the Web API to provide State name array 

  17:                   $.get("http://localhost:43597/api/mystate/", function (data, textStatus) {

  18:                       var str = "";

  19:                       // create list with sate name which again referencing to new url

  20:                       for (var i = 0; i < data.length; i++) {

  21:                           str = str + "<li><a href='#/States/" + (i+1).toString() + "'>" + data[i] + "</a></li>";

  22:                       }

  23:  

  24:                       //Clean the main div 

  25:                       context.app.swap('');

  26:                       //Apeend the data in main div

  27:                       $("#main").append("<ul>" + str + "</ul>");

  28:  

  29:                           

  30:                   });

  31:  

  32:               });

  33:  

  34:               //States/stateId url 

  35:               this.get('#/States/:id', function (context) {

  36:                   //calling web api to get particular state by id

  37:                   $.get("http://localhost:43597/api/mystate/"+ context.params.id, function (data, textStatus) {

  38:                     

  39:                       context.app.swap('');

  40:                       $("#main").append("<h1>" + data + "</h1>");

  41:  

  42:  

  43:                   });

  44:               });

  45:  

  46:         

  47:  

  48:           });

  49:           

  50:           sammySPA.run('#/'); //run sammy.js

  51:  

  52:  

  53:  

  54:       });

  55:   </script>

Step 7:-

Let me explain the above code here

We have define $.sammy function which is bounded with the div whose.

$.sammy(‘#main’,function() {}).run(); this is the basic function to invoke sammy.js

Step 8:- Now to which url we need to entertain by which method like  get, put, Post, delete. We need to define our functionality according to our need in current example we have used get function.

this.get(‘#/’,function (context){});

The meaning of above line is when ever a request (default) invoke by end user just execute function as defined. in the function there is context parameter . Which help in accessing method type (get/post) , parameters

Step 9:-  Now when you run and click on States link you will get following screen

stateResult_sammy

Step 10:- you can test it further I have added list of states also with dynamic url  so when you click on MP, RJ, MH etc in above list you will get a new URL according to our need

statewithparticularId

I hope this example will help you to create your own SPA application.

I defiantly say here “Sammy.js” rock. I like this script hope you will also.

Enjoy learning

your Host

Rajat

Start “Knockout.Js” for Beginners

Dear All,

I heard a lot about “Knockout.js”.

So let us understand it first. “knockout.js “ is rich java script mode. It helps you to work on “MVVM” (Model View View Model) architecture pattern.

It helps you to work on “Reactive programming  or push model ". It means you can track your UI changes without much effort what ever changes done on View level (UI) it easily reflected in your viewmodel.

Let up try it and make a sample, but how to start it this is one of the concern.

So here I am with step by step approach how to start it

Step 1:-  Create a  new web project. I have selected empty template. so right now there is no item exists in it

Step 2:- click on nuget package as shown below

NuGetPackage

Step 3: We need to add first Jquery package so search Jquery package and add it as shown in below fig

jqueryPackage

Step 4:- Once JQUERY package is installed on your project now add new package which is knockout.Js package as shown in below fig

knockoutjs

Step 5:- Once both this package installed we will add a new page which is default.html now add reference of both JQUERY & Knockout.js to this page

Now I am adding employee view as shown below

EmployeeViewKO

Let me explain each important line in this.

In our example we have created EmployeeReviewVM function which is basically a view model function for knockout js.In this function we have define Name & Rating two property and one more computed property (dependent on Rating property value).

we have used “ko.observable” it is used for push mode means whatever changed on View should reflect in viewModel also and vice versa.

Now we have used “ko.computed” function it means what ever the value changed of Rating the increment property calculated at runtime.

Step 5:

Now how to use in view part.

htmlKoBinding

So if you see in the above picture we have used data-bind property which basically  bind the EmployeeViewmodel to html. We have used span so internally we have used text if we have used input tag then we can use value property.

Step 6: Now when you run it you will get following  page result.

html

I hope you are good to go with this. you can use different property like array , for each etc to fetch data.

You can use knockout js for SPA creation.

I hope this  tutorial give you basic idea.

Enjoy Knockout js.

Thanks & Best Regards,

Rajat Jaiswal

How to disable Right click on web page ?

Dear All,
Sometime, due to some security reference your application require to stop right click on web page.
In such case you need to write just simple code as shown below.

//
Right click disable

So now when you run your web page and right click you will get following message.

result
So just each code and you are good to go.

Hope you like it.

Thanks & Best Regards,
Rajat Jaiswal

A new milestone 125th post on Indiandotnet.wordpress.com so far so good

Dear Friends,
This post is different post from my regular technical articles and it is my 125th post on Indiandotnet.wordpress.com.

I would like to thank all of my friends, family members, colleges & most valuable the reader of this blog who continuously giving feedback and improving my skill also.
So thank you very very much.
Keep reading, Keep commenting, and keep giving feedback.
I need more improvement and I know you people will help me in sharing my thoughts.
God bless you all.


Happy Holidays.


Merry Christmas.
Thanks
Rajat Jaiswal

Project List on which we will work in future

Dear Friends,

 Merry Christmas!

I Hope you are enjoying  the holidays.

 After seeing the market trend and requirements I am interested in making following projects which will help me and other friends to understand basic project development and use latest technologies with some productive output.

 In coming up sessions i am going to use this project topic and create sample with latest technologies like Silverlight, Windows phone 7, VS 2010 etc.

 So here we go

 1) College Management

 2) School Management

3) Job Portal

 4) Forums

5) Blog

6) Employee Management

7) Bug Tracker

8) Time Sheet

9) Address Book

10) Project Management

11) Survey engine

 12) Stock Manager

13) Property Broker

14) Shop Management

15) Matrimonial

 16) Social Networking

17) Hotel Management

 18) Inventory Management

19) Accounting

20) Transport Management

21) Hospital Management

22) Ecommerce

Etc are the project list on which I will work in future to enhance my knowledge with productive work.

I will share code base and case study also in future

Hope you like it Once again wish you Merry Christmas.

 Thanks

 Rajat Jaiswal



Some useful Terminology (acronyms)

Hello friends,
Cheers!
Here I am with some useful terminology and these acronyms are generally used now days in broad way take a look.
1) ESB : Enterprise Service Bus
2) POX : Plain OLD XML
3) REST: Representational State Transfer
4) SOAP: Simple Object Access Protocol
5) RIA : Rich Internet Application
6) XML : Extensible Markup Language
7) JASON: Java Script Object Notation
8) DOM : Document Object Modeling
9) XAML : Extensible Application Markup Language
10) LINQ : Language Integrated Query
11) RSS: Really Simple Syndication
12) WCF: Windows Communication Foundation
13) WF: Windows Foundation
14) WPF: Windows Presentation Foundation
15) AJAX: Asynchronous Java script and XML
16) XLST: Extensible Style Sheet Language Transformation
17) INDIGO: Code name of Microsoft windows Communication foundation Technology
18) OSLO: Code name of Microsoft Modeling Technology
19) SOA: Service Oriented Architecture
20) ORCAS: dot net 3.5 Version called ORCAS
21) AVALON: code name of Microsoft Windows Presentation foundation Technology
22) Azure: Microsoft new Operation system Related to Cloud computing
23) Astoria : Code name of Ado.net Data services

I hope you people like it.
Enjoy life with dot net.

Your host
Rajat Jaiswal

Nice utilities for Web Developer

Hello friends,

Today I come up with some useful list which help you in web development and good news is that its all free.
1) “FIREBUG” :-
Basically “FIREBUG” is add in for FireFox. It’s a great utility helps a lot to design web pages. As a developer I am mostly intrested in programming not designing.But this utility help me in solving designing issues. With the help of it you can manage designing ,CSS issues.
You can download this from https://addons.mozilla.org/en-US/firefox/addon/1843
2) Web Development Helper:-
This one is another useful utitly for web developer to improve performance. Its basically help you to determine which page taking how much time to response.It also help other area also like script finding. It has dom Inspector also. You can take help of this tool in various way.
You can download this from http://projects.nikhilk.net/WebDevHelper
3) Deep Zoom composer:- If you are working on Silverlight also then you can use Deep Zoom composer.it has very nice feature for images.
You can dowload this from http://www.microsoft.com/downloads/details.aspx?familyid=457b17b7-52bf-4bda-87a3-fa8a4673f8bf&displaylang=en

So just dowload & use this tools and improve your code.

Happy programming!

Thanks …
Your host
Rajat

JQuery a unique thing part- IV

Hello friends,

Today i am with new topic which is Jquery  and ajax. which is most intresting topic of mine  i am here with some basic fuction  so enjoy with this.

Ajax Functionality & JQuery

Ans:

Jquery is giving many function for using ajax which help to use ajax functionality easy. Here we goes with detail

$.ajax (s) :- its first and basic function for using ajax by Jquery.

Where s I can it collection of different properties which is enclosed in curly brackets “{ }”

1) $.ajax( {type : ” GET/POST”,

url : ” any url” ,

data : “data1=rajat& data2=test”, ( any data which you want to pass to the server…)

Success: function () {} , (any operation after successful readystate= 4)

cache : “TRUE/FALSE” ,

});

Ex:- To pass data from client to server we use following example

$.ajax({

type: “POST”,

url: “SaveUser.aspx”,

data: “name=RAJAT&Surname=JAISWAL”,

success: function(msg){

alert( “Data Saved: ” + msg );

}

} );

2)load(url) :- by the name it is clear that it will load html of a remote file and inject in current calling element.

Ex:- $(“#dvResult”).load(“htmlPage1.htm”);

it will load htmlPage1.htm ‘s html in div part

3) $.get(url) :- Simplest form to use http get request is $.get which is jquery.get(). We can send data along with this also which is optional part.

EX:- $(“save.aspx”,{name:”RAJAT”, surname:”JAISWAL”});

suppose if want to take back result from Response. Then it has following format $(“save.aspx”,{name:”RAJAT”, surname: “JAISWAL”} , function(data) { alert(‘do operation’ + data);});

4)$.getJASON(url,data,function) :- To get response in json format we use this fuction its same as $get the diffrence here is only one that its respond in Json.

Ex- suppose from server the data return in json format which is { “info”:[{ “strFirstName” :”Rajat” , “strLastName” : “Jaiswal”}]}

Then we do below code $.getJSON(“default.aspx”, function(data) { alert(data.info[0].strFirstName + data.info[0].strLastName); });

5) $.post(url,data,function):- it same as get method just a diffrence that it use post method to send data.

Ex:- $.post(“save.aspx”);

In next session i will come with simple example related to Ajax & Jquery.

Thanks

Rajat

JQuery a unique thing part- III

Hello friends,

today i am with new topic of jQuery which is events.  after this we will work on   Jquery + AJAX  & Jquery + Asp.net 3.5  so bear with me on events. here we goes.

 Events
Ans: Jquery event system is normalize the event object.Then event object is guranteed to be passed in event handler.

Here is more description

1) event.type :- Determine the nature of event.

Ex:- $(a).click(function(event) { alert(event.type);}); it will return “click”

2) event.target:- Give the refrence of DOM element which raised the event.

EX:- $(a).click(function(event){alert(event.target.href);});

Return the url which is assign to a for href property.

3)event.pageX/pageY: – return the mouse position (cordinate) relative to the document.

Ex:- $(a).click(function (event){ alert(event.PageX); alert(event.PageY); });

4) event.preventDefault() :-

it will stop the default exceution action.

EX:- $(a).click(function(event) { event.preventDefault(); alert(‘test’);}); stop the a href ( transfer to another page)

The above are the basic for event object.

5) ready :- On of the most and basic event for Jquery is ready().

It bind the function to be executed when ever the document is ready for traverse and mainupulate.

Its base of jquery it improve web performance as well.

You many have as many as ready event in your web form. It will execute in the order as you define the events. It’s a solid replacment of window.load()

6) Bind() :- Suppose you have more than one paragraph and you want same event on each paragraph then instead of writing each paragraph event.you can bind paragraph with particular event.

Ex:- $(“p”).bind(“onmouseover”, function (){ $(this).css(“background- color”,”red”);});

7)One() :- suppose we want a event only once on the document then we can bind the event by one.

Then it will run only once on the particular event.

Ex:- suppose we want click event only once on all the div then

$(“div”).one(“click”,function() { ($(this).css(“background-color”, “blue”); });
8) unbind() :- it will just do upposit the bind event.it unbind all the event for match element.

9) blur() :-

trigger blur event on each matched element. Or in other word we can say when focus is lost from the element then this event run.

Ex:- $(“txtName”).blur(function() { $(this).css(“border”,”2px”);});

9) change():- Change event fire when element’s value has been modified.

Ex:- $(“txtName”).change(function() { alert($(“txtName”).text();});

There are many more events which is as follow click(),

dblClick(),error(),focus(),KeyDown(),KeyPress(), keyUp(),Load(),mouseout(),mouseover(),mouseup(),mousedown(),resize(),Scroll(),

select(),Submit(),unload().