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" --
>
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...
5. Effects :-
Ans:
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.
7. 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().
9. Ajax Functionality
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");
for more information just visit
http://indiandotnet.wordpress.com/tag/jquery/
Thanks
Rajat Jaiswal
Sunday, March 01, 2009
Asp.net with Ajax Basic
------------
1. What is Ajax ?
Answer: Ajax Stands for Asynchronous JavaScript And XML. It’s a way to make web application like windows application, give use rich Interface.
2. How it Works ?
By working as a extra layer between user browser and server it handle server communication in background submit server request take response from server, the response data integrated in page seamlessly without post back of page. This layer often refers as AJAX engine or AJAx framework.
When ever you click on link or submit form by pressing button then you make a http request. So the page is post back.
XMLHttpRequest is object that can be handle with JavaScript and we can achive goal to take http request without postback.
When we using AJAX layer then we do asynchronous post back which means request to server made in background
The flow is as follows
Web page Request --> Make xml Http Request object -->
Send rquest to server -->
Monitor the request Status -->
Ready state Status -->
respond to client -->
get response-->
Process Return data
For any AJAX work you need to create a object of XMLHttpRequest for many browser you can create objects as follows
var request = new XMLHTTPRequest();
To achive same result in microsoft browser you have to do following thing
var request = new ActiveXObject("Microsoft.XMLHTTP");
But some different version use below definition
Var request = new ActiveXObject("Msxml2.XMLHTTP");
Or you can write as below
< script language ="JavaScript" type="text/script"
>
var request ;
function defineRequest(){
try {
request = new XMLHTTPRequest();
}
catch ( ex) {
try{
request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (ex1){
try{
request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(ex2){
}
}
}
}
XMLHttpRequest object will have following property :
1) onreadystatechange :- Determine which event handler will called when object ready state property changed
2) readyState :- there are following values for this
0 - un initialize
1 - loading
2 - loaded
3 - intractive
4 - completed
3)responseText :- Data return by Server in text format
4) responseXML :- Data return by server in XML format
5) status : - Http Status code
6) statusText :- Http Status Text
And it has following methods
Abort() :- Stop the current Request.
getAllResponseHeaders() :- Return all headers as string
getResponseHeader(x) :- get the x header value in string
Open('Method',url, a) :- specify the Method post /get
url for request
a= true/false determine whether the request handle asynchronously or not.
Send(content) : send a request ( default post data method)
3. Basic Example
As part of AJAX basic I just come with below example in this we create two page one is with server coding & another with client coding.
My main aim here to get result by ajax with out post back so we just try to get current time as result.
For this we write code in default.aspx page as below
<
script language ="javascript" type="text/javascript"
>
var myServerRequest;
function callAjax() {
try {
myServerRequest = new XMLHttpRequest();
myServerRequest.status
}
catch (ex) {
try {
myServerRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (ax) {
try {
myServerRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (ax1) {
return false;
}
}
}
}
function Callserver() {
callAjax();
if (myServerRequest != null) {
myServerRequest.open('GET', "serverCode.aspx", true);
myServerRequest.onreadystatechange = myServerResponse;
myServerRequest.send();
}
return false;
}
function myServerResponse() {
if (myServerRequest.readyState == 4) {
if (myServerRequest.status == 200) {
document.getElementById('dvResult').innerHTML = myServerRequest.responseText;
} else {
document.getElementById('dvResult').innerHTML = 'Oops Error';
}
}
return false;
}
script
>
Here we have 3 main function
1. CallAjax :- it is responsible for Assigning XMLHttpRequest Object.
2. myserverResponse :- by the name it is clear that it use for holding the result what ever pass by server.
3. callServer :- This function is call on any event on button and it sum up the above 2 events.
On server Page at page load we do following code
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Response.Write(Now.ToString)
Response.End()
End Sub
Here we just write time as response then we end response.
If you do not do response.end() then html of server page also comes.
5. What is JASON ?
Ans: JASON is JavaScript Object Notation. It’s a light weight Data interchange format which is independent from language. Its easy to read & Write by human & easy to parse & genrate by language. The attributes is seprated with "," (comma) and value of attributes are define after colon symbol(":") .
Ex:- {Data:[{"fname" : "RAJAT", "Lname" : "JAISWAL" }]}
The above is JASON example in which there are two attributes fname, Lname and the are seprated by "," (comma) symbol.
And there value is "RAJAT" & JAISWAL" which are define after ":" (colon)symbol.
for more information just copy paste "http://indiandotnet.wordpress.com/category/aspnet/ajax/"
Thanks
Rajat Jaiswal
1. What is Ajax ?
Answer: Ajax Stands for Asynchronous JavaScript And XML. It’s a way to make web application like windows application, give use rich Interface.
2. How it Works ?
By working as a extra layer between user browser and server it handle server communication in background submit server request take response from server, the response data integrated in page seamlessly without post back of page. This layer often refers as AJAX engine or AJAx framework.
When ever you click on link or submit form by pressing button then you make a http request. So the page is post back.
XMLHttpRequest is object that can be handle with JavaScript and we can achive goal to take http request without postback.
When we using AJAX layer then we do asynchronous post back which means request to server made in background
The flow is as follows
Web page Request --> Make xml Http Request object -->
Send rquest to server -->
Monitor the request Status -->
Ready state Status -->
respond to client -->
get response-->
Process Return data
For any AJAX work you need to create a object of XMLHttpRequest for many browser you can create objects as follows
var request = new XMLHTTPRequest();
To achive same result in microsoft browser you have to do following thing
var request = new ActiveXObject("Microsoft.XMLHTTP");
But some different version use below definition
Var request = new ActiveXObject("Msxml2.XMLHTTP");
Or you can write as below
< script language ="JavaScript" type="text/script"
>
var request ;
function defineRequest(){
try {
request = new XMLHTTPRequest();
}
catch ( ex) {
try{
request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (ex1){
try{
request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(ex2){
}
}
}
}
XMLHttpRequest object will have following property :
1) onreadystatechange :- Determine which event handler will called when object ready state property changed
2) readyState :- there are following values for this
0 - un initialize
1 - loading
2 - loaded
3 - intractive
4 - completed
3)responseText :- Data return by Server in text format
4) responseXML :- Data return by server in XML format
5) status : - Http Status code
6) statusText :- Http Status Text
And it has following methods
Abort() :- Stop the current Request.
getAllResponseHeaders() :- Return all headers as string
getResponseHeader(x) :- get the x header value in string
Open('Method',url, a) :- specify the Method post /get
url for request
a= true/false determine whether the request handle asynchronously or not.
Send(content) : send a request ( default post data method)
3. Basic Example
As part of AJAX basic I just come with below example in this we create two page one is with server coding & another with client coding.
My main aim here to get result by ajax with out post back so we just try to get current time as result.
For this we write code in default.aspx page as below
<
script language ="javascript" type="text/javascript"
>
var myServerRequest;
function callAjax() {
try {
myServerRequest = new XMLHttpRequest();
myServerRequest.status
}
catch (ex) {
try {
myServerRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (ax) {
try {
myServerRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (ax1) {
return false;
}
}
}
}
function Callserver() {
callAjax();
if (myServerRequest != null) {
myServerRequest.open('GET', "serverCode.aspx", true);
myServerRequest.onreadystatechange = myServerResponse;
myServerRequest.send();
}
return false;
}
function myServerResponse() {
if (myServerRequest.readyState == 4) {
if (myServerRequest.status == 200) {
document.getElementById('dvResult').innerHTML = myServerRequest.responseText;
} else {
document.getElementById('dvResult').innerHTML = 'Oops Error';
}
}
return false;
}
script
>
Here we have 3 main function
1. CallAjax :- it is responsible for Assigning XMLHttpRequest Object.
2. myserverResponse :- by the name it is clear that it use for holding the result what ever pass by server.
3. callServer :- This function is call on any event on button and it sum up the above 2 events.
On server Page at page load we do following code
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Response.Write(Now.ToString)
Response.End()
End Sub
Here we just write time as response then we end response.
If you do not do response.end() then html of server page also comes.
5. What is JASON ?
Ans: JASON is JavaScript Object Notation. It’s a light weight Data interchange format which is independent from language. Its easy to read & Write by human & easy to parse & genrate by language. The attributes is seprated with "," (comma) and value of attributes are define after colon symbol(":") .
Ex:- {Data:[{"fname" : "RAJAT", "Lname" : "JAISWAL" }]}
The above is JASON example in which there are two attributes fname, Lname and the are seprated by "," (comma) symbol.
And there value is "RAJAT" & JAISWAL" which are define after ":" (colon)symbol.
for more information just copy paste "http://indiandotnet.wordpress.com/category/aspnet/ajax/"
Thanks
Rajat Jaiswal
How to show image logo of your site?
Hello friends,
You have seen this website the like www.google.com, www.Yahoo.com, www.rediff.com,www.asp.net and many more provide a logo in the address bar or we can say website logo.
If you don't know how to use it you are much excited how this thing is done. First I will tell you that particular icon is called "Favicon" in technology term.
A favicon is an icon image which you can create from many Site or your own also.
Many sites provide favicon generator for example: - http://tools.dynamicdrive.com/favicon/
On this website just upload your image files and creates your favicon.
Once you done with favicon, then next thing is how to use that favicon so not to worry in that case also it is very simple just copy paste below lines and replace with your favicon icon path.
<
link id="Link1" runat="server" rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
< link id="Link2" runat="server" rel="icon" href="favicon.ico" type="image/ico"
/>
In the above line just replace the path and include this in your header same like CSS.
So enjoy with your site icon.
Thanks
Rajat Jaiswal
You have seen this website the like www.google.com, www.Yahoo.com, www.rediff.com,www.asp.net and many more provide a logo in the address bar or we can say website logo.
If you don't know how to use it you are much excited how this thing is done. First I will tell you that particular icon is called "Favicon" in technology term.
A favicon is an icon image which you can create from many Site or your own also.
Many sites provide favicon generator for example: - http://tools.dynamicdrive.com/favicon/
On this website just upload your image files and creates your favicon.
Once you done with favicon, then next thing is how to use that favicon so not to worry in that case also it is very simple just copy paste below lines and replace with your favicon icon path.
<
link id="Link1" runat="server" rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
< link id="Link2" runat="server" rel="icon" href="favicon.ico" type="image/ico"
/>
In the above line just replace the path and include this in your header same like CSS.
So enjoy with your site icon.
Thanks
Rajat Jaiswal
Merge SQL Files and run with batch Program with vb.net
Dear all,
I got a problem 2 days ago that I have to update my database with latest sps after a particular day but the problem is there is more than 20 sql files.
So either I have to run each file one by one or do some creativity. Just due to this what I did, made an applcation.
This application is exists for the merging all SQL file after a particular date and save that file with "Merge.sql" name and also it create Batch file to run and run the file on
Selected database.
I used Osql over here if you want to download code just download at http://www.indiandotnet.tk
Thanks
Rajat
Enjoy coding
I got a problem 2 days ago that I have to update my database with latest sps after a particular day but the problem is there is more than 20 sql files.
So either I have to run each file one by one or do some creativity. Just due to this what I did, made an applcation.
This application is exists for the merging all SQL file after a particular date and save that file with "Merge.sql" name and also it create Batch file to run and run the file on
Selected database.
I used Osql over here if you want to download code just download at http://www.indiandotnet.tk
Thanks
Rajat
Enjoy coding
How to download Youtube video on your system ?
Hello friends ,
you can easily download video by asp.net code for more information just click
below link
http://indiandotnet.wordpress.com/2009/02/28/how-to-download-youtube-video-on-your-system/
Thanks
Rajat
you can easily download video by asp.net code for more information just click
below link
http://indiandotnet.wordpress.com/2009/02/28/how-to-download-youtube-video-on-your-system/
Thanks
Rajat
Binary Serialization example
Serialization in .NET allows us to take an instance of an object and convert it into a format that is easily transmittable over the network, or even stored in a database or file system.
This object will actually be an instance of a custom type, including any properties or fields you may have set.
Serialization is the process of converting an object into a stream of bytes which is easily transferable over the network and storing its current state on any permanent storage media like file or database for later use.
De-serialization is the reverse process of Serialization, where the stored object is taken and the original object is recreated.
.NET provides classes through its System.Runtime.Serialization namespaces that can be used for serializing and de-serializing objects.
Serialization can be divided into following types:
· Binary Serialization: Binary serialization allows the serialization of an object into a binary stream and restoration from a binary stream into an object.
· XML Serialization: XML serialization allows the public properties and fields of an object to be reduced to an XML document that describes the publicly visible state of the object.
· SOAP Serialization: SOAP serialization is similar to XML serialization in that the objects being serialized are persisted as XML.
Below is example how to make a serialize class
And how to serialize and deserialize class.
_
Private Class pvt_clsTest
Public strName As String = String.Empty
End Class
Private Sub pvt_SearializeMe()
Try
Dim cls As New pvt_clsTest
cls.strName = Me.txtNeedToSerialize.Text
Dim mem As New MemoryStream()
Dim binaryFormat As New System.Runtime.Serialization.Formatters.Binary.BinaryFormatter()
binaryFormat.Serialize(mem, cls)
Session("arr") = mem.GetBuffer
Me.txtSerialize.Text = mem.ToString
mem.Close()
Catch ex As Exception
Throw ex
End Try
End Sub
Private Sub pvt_DeserializeMe(ByVal arr As Byte())
Dim ascEn As New ASCIIEncoding
Dim mem As New MemoryStream(arr)
mem.Position = 0
Dim bf As New System.Runtime.Serialization.Formatters.Binary.BinaryFormatter()
Dim cls As pvt_clsTest = CType(bf.Deserialize(mem), pvt_clsTest)
Me.txtDeserialize.Text = cls.strName
mem.Close()
End Sub
for more information visit : http://www.indiandotnet.wordpress.com
Thanks
Rajat Jaiswal
This object will actually be an instance of a custom type, including any properties or fields you may have set.
Serialization is the process of converting an object into a stream of bytes which is easily transferable over the network and storing its current state on any permanent storage media like file or database for later use.
De-serialization is the reverse process of Serialization, where the stored object is taken and the original object is recreated.
.NET provides classes through its System.Runtime.Serialization namespaces that can be used for serializing and de-serializing objects.
Serialization can be divided into following types:
· Binary Serialization: Binary serialization allows the serialization of an object into a binary stream and restoration from a binary stream into an object.
· XML Serialization: XML serialization allows the public properties and fields of an object to be reduced to an XML document that describes the publicly visible state of the object.
· SOAP Serialization: SOAP serialization is similar to XML serialization in that the objects being serialized are persisted as XML.
Below is example how to make a serialize class
And how to serialize and deserialize class.
Private Class pvt_clsTest
Public strName As String = String.Empty
End Class
Private Sub pvt_SearializeMe()
Try
Dim cls As New pvt_clsTest
cls.strName = Me.txtNeedToSerialize.Text
Dim mem As New MemoryStream()
Dim binaryFormat As New System.Runtime.Serialization.Formatters.Binary.BinaryFormatter()
binaryFormat.Serialize(mem, cls)
Session("arr") = mem.GetBuffer
Me.txtSerialize.Text = mem.ToString
mem.Close()
Catch ex As Exception
Throw ex
End Try
End Sub
Private Sub pvt_DeserializeMe(ByVal arr As Byte())
Dim ascEn As New ASCIIEncoding
Dim mem As New MemoryStream(arr)
mem.Position = 0
Dim bf As New System.Runtime.Serialization.Formatters.Binary.BinaryFormatter()
Dim cls As pvt_clsTest = CType(bf.Deserialize(mem), pvt_clsTest)
Me.txtDeserialize.Text = cls.strName
mem.Close()
End Sub
for more information visit : http://www.indiandotnet.wordpress.com
Thanks
Rajat Jaiswal
Subscribe to:
Posts (Atom)