How to consume Web API using JQUERY ?

 

Friends,

In last two articles we understood

 what is Web API ? (https://indiandotnet.wordpress.com/2014/02/23/what-is-web-api/)

and How to create it ? (https://indiandotnet.wordpress.com/2014/02/27/how-to-create-web-api/)

Now next is how to consume it ?

So here we will understand this by an example. I am pretty much sure you all  are comfortable with server side code so here in current example we using  client side code to consume web API.

In current example I have created a Web API with name “MyState” . The basic functionality of this Web API is to provide list of all the State with default get method and provide specific state according to provided id.

Let me show you snap shots of created code & running API here

Mystate_Code

Above figure shows default get method which response array of string (name of state)

defaultStateResult

Now to consume this Web API in our project we have added a view with following Java script

in below screen we have used a “get” JQUERY function and as we  know the API URL we wrote that and once the response from API returned we concatenated the response array with <li> tag and show as a innerHTML of stateName div as shown in below fig

consuming_web_Api_JQUERY

Now when we run this program on index.cshtml we got following response

stateResult

In current example we have used  “GET” method we can also consume post operation for INSERT/UPDATE/Delete

I hope you will like this post.

Thanks

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

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().

 

JQuery a unique thing part- II

Hello friends,

Here i am with II part of Jquery which is  effects.

as a web developer we all need that over web application should look best  for that we do lot of stuff like css. animation and pictures. now.

JQuery gives us the  freedom to do more with  our web application to look better and best.

the effects are given by Jquery is simple and easy to use. so here we go

Jquery makes it easy to show effects now we don’t have to write lot of code for some specific animation here are some example.

$(“element”).toggle(function1,function2) :- By the name its clear that it will toggle the event which we can use in showing different effects.

Ex- if we want to do colour change of div on different click then we do following code

$(“#divtest”).toggle(function() { $(“divtest”).css(“background-color”, “red”);}, function (“divtest”).css(“background-color”,”blue”);});

in the simillar manner we can do different thing also.

$(“element”).hover(function):- for hover effect.

$(“element”).FadeIn(intAmount) :- for fade in effect.

$(“element”).FadeOut(intAmount):- for fade out effect.

$(“element”).hide(intAmount) :- for hide effect.

$(“element”).show(intAmount) :- for show effect.

$(“element”).animate() :- for animation effect we have animate function

for example lets see below example $(“#btnFade”).click(function() { $(“#dvTest”).animate({ “left”: “+=50px” }, “slow”); });

It will increase left of div test by 50px with slow speed.

$(“element”).slideToggle() :- it will move up or down according to last action did by element for example.

$(“#btnOpen”).click(function() {

$(“#dvTest”).slideToggle(‘slow’, animate());

function animate() {

}

});

The above button click wiill slide up or down with slow speed.

$(“element”).slideUp(speeed) :- it will slide up the element with desire speed.

$(“element”).slideDown(speed) :- it will slide down the element with desire speed.

$(“element”).fadeTo(speed,opacity):- the extra element is opacity means we can define opacity also with speed for particular element fade effect.

$(“element”).Stop() :- it will stop all the animation running on the element.

i will provide the example of all this things in coming up session.

Thanks

Rajat

enjoy the JQuery.

JQuery a unique thing part- I

Dear all,

from today onward’s i am giving some breif introduction of JQuery how it use, how to work with it. and after the whole session i will provide you best example of whole then Jquery stuff.

so starting from point to point

 

1. What is Jquery ?
Answer: Jquery is JavaScript Library whose main moto is to simplifiy the use of java script for a html document.
It is a light weight JavaScript Library that emphasis intraction between JavaScript & Html.
It simplify  traversing ,event handling , animation and  ajax.

2. How it Works ?
Answer: To Work with Jquery you have to copy the Jquery Js file in your project.
And refrence in your  page like  <script type=”text/javascript” src=”jquery.js”></script>
And you can use it. Second  point is that  you have to start Jquery in  $(document).ready event
And all the event will comes under this ready event.

3. Necessary component to work with Asp.net + Jquery?

Answer: For Jquery in Asp.net you need to have to copy two files in your Project and refrence in your project jquery-1.2.6-vsdoc.js & Jquery1.2.6.js

4. Traversing

Ans:

1) you can find particular element in below type

$(“#elementId) — Suppose there a div box with id dvTest <div id=”dvTest”> then we have to use $(“#dvTest”)

$(“element”), — Suppose there div box in page then if we want to change all the div box background color then we can find all the div with $(“div”)

$(“element”).eq(index) — Now if we want to change the background of of first div only then $(“div”).eq(1) here eq(1) change the background color of index 1 div

$(“element”).find() — Search all the element that match with particular expression like $(“div”).find(“p”) here we find all the p which are in div tag

$(“element”).contnent()- it work same as find

$(“element”).next() – will find next sibling after element.

$(“element”).nextAll() – wiil find all next sibling after element but not there child element.

$(“element”).length() – determine number of element in document
$(“element”).parent.get(0)- will return the parent of element….

$(“element”).prev ;- get the privious sibling of each of element…

 

you can download Jquery files from www.JQuery.com its free.

and  you will find tutorial also over there.

i will back soon with my second part of JQuery.

Thanks