Asp Dot Net Matters
Thursday, November 19, 2009
Friday, May 15, 2009
Monday, May 11, 2009
Preload Image - Show Loading Image
To show Loading Image while web page is being load. Simple Javascript is required for it. Just check following JavaScript, you can use it directly... Just replace elementId.
Saturday, April 11, 2009
Write an Image in Iframe(Currently IE only)
This is something different I came across, some months back.
We can actually write an Image file in Iframe,this file is visible, but user can't save the file.
This is very simple trick which we can actually use to avoid image copying.
e.g. Though communities like orkut prohibited right click on an image, we can simple drag the image in address bar and can save it. This is something which we can't avoid in normal scenario, but there is one way to deal with this, using ASP.NET and it's handler concept.
I have already talked about ashx file in one of my previous article on image handling
We can actually write an Image file in Iframe,this file is visible, but user can't save the file.
This is very simple trick which we can actually use to avoid image copying.
e.g. Though communities like orkut prohibited right click on an image, we can simple drag the image in address bar and can save it. This is something which we can't avoid in normal scenario, but there is one way to deal with this, using ASP.NET and it's handler concept.
I have already talked about ashx file in one of my previous article on image handling
Lets go step by step
Step 1
Create one file names Image.ashx
copy paste following code
save file, check the assignment of string names "img" in above code.
step 2
In aspx file generally add an Iframe as below
step 3
Add followin javascript function
step 4
On body 'onload' event call above function as
Run your code, make sure that you assign correct Image in Image.ashx file.
Now if you run your code you can get an image in iframe which can't be saved
Tags:
Monday, March 9, 2009
Ajaxified Grid 2
Ajax enabled grid using ICallbackEventHandler
In my previous article of “Ajax enabled grid using ICallbackEventHandler”, we have discussed about following operations
1.Sort the grid in ascending or in descending order by clicking on the arrows next to column name.
2.Change pages of the grid.
3.Change page length of the gird
In this article we will discuss about editing the grid, i.e. just double click on the grid cell and the cell become editable. Change the content of the cell and click on Update button. This will update server side data without refreshing the page.
Best features of this grid are as follows
In my previous article of “Ajax enabled grid using ICallbackEventHandler”, we have discussed about following operations
1.Sort the grid in ascending or in descending order by clicking on the arrows next to column name.
2.Change pages of the grid.
3.Change page length of the gird
In this article we will discuss about editing the grid, i.e. just double click on the grid cell and the cell become editable. Change the content of the cell and click on Update button. This will update server side data without refreshing the page.
Best features of this grid are as follows
Data will be bind to grid only once, i.e. on page load.
Only modified data goes to server and update the Data.
Logic for Grid Update : We can see grid and Data table as two dimensional array. User will update any cell i.e. row[i][j] this is like playing with two dimensional array in learing phase of programming; update cell row[i][j] in grid and the onclick of update button Update datable or other two dimensional array.
The basic UI will contain one grid and one update button. Will bind data to grid on page load
1.Simply copy paste following code in the tag of the page
The basic UI will contain one grid and one update button. Will bind data to grid on page load
1.Simply copy paste following code in the tag of the page
We have activated RowDataBound event of the grid.
2.We will maintain a datatable, so that we can avoid fetching data from database. This is only to make understanding more simpler. We will assume that we have datatable and we define get and set properties for the table as follows.
We can write a function which will return data table, and the get property will simply return that table. This time we have used session variable instead of Viewstate to store the table; because we need to update data on server side, if we use viewstate , to update it we need to do post back of the page.
To use this table we will simply say “_grid.DataSource = _sampleData;”
And to set new data table we will say _sampleData = _tempTable;
To use this table we will simply say “_grid.DataSource = _sampleData;”
And to set new data table we will say _sampleData = _tempTable;
Here _tempTable is the updated table after updating the grid on client side.
3.We will follow typical ICallbackEventHandler procedure and add folloing points on server side page, i.e. in c# code.
Implement ICallbackEventHandler interface
public partial class Default : System.Web.UI.Page , ICallbackEventHandler
Write RaiseCallbackEvent(string eventArgument) and GetCallbackResult()
Which will be as follows
Implement ICallbackEventHandler interface
public partial class Default : System.Web.UI.Page , ICallbackEventHandler
Write RaiseCallbackEvent(string eventArgument) and GetCallbackResult()
Which will be as follows
result is a global variable declared on the page.
We are following the same conversions in RaiseCallbackEvent(string eventArgument) which we have used in my last article
4.To make cell editable on double click we need to add javascript which will convert the cell in to textbox or in dropdownlist in such way that we can keep track of each updated cell.
As we have discussed earlier; we will look at the grid as a two dimentional array. Thus we will maintain unique id for each cell; in such a way that cell id will tell position of that perticular cell data in data table.
As we have discussed earlier; we will look at the grid as a two dimentional array. Thus we will maintain unique id for each cell; in such a way that cell id will tell position of that perticular cell data in data table.
Here understand that grid data is exact copy of the data table so row[i][j] in data table will match with row[i][j] of grid, unless we define our own order for binding the data to grid.
5.In step 1 we have activated RowDataBound event of the grid. In this step we will write code for RowDataBound event.
Define _rowNumber as global variable for same page.
To make cell editable we have added
MakeCellEditable(this) will write this JavaScript function in next step.
To identify each cell as unique cell and to mach it with corrosponding datatable entry, we will give id to each cell in such a way that it will follow row[i][j] structure.
i.e.
And we are increasing row number each time. Observe the way we have given id, we will get [i][j] position just by spliting the is on “_”.
6.To make cell editable we will write following function in JavaScript
This function will convert the cell into text box and set focus in that text box. Check the way we have assinged id to the text box; i.e.[i]_[j]_input obj is the cell, read step 5
7.Upto point 6 we are able to make cell editable; now we need to write a code which will pick all updated values and send them to server to update the datatable.
On click of update button we have called one javascript function ( reffer step 1), named UpdateTable().
We will write this JavaScript function
7.Upto point 6 we are able to make cell editable; now we need to write a code which will pick all updated values and send them to server to update the datatable.
On click of update button we have called one javascript function ( reffer step 1), named UpdateTable().
We will write this JavaScript function
Please reffer step 1 for 'Gridview','input' and UpdateGrid('updateTable$'+data);
data = textboxId|textboxData~textboxId|textboxData
data is string of modified data along with their textbox id.
data = textboxId|textboxData~textboxId|textboxData
data is string of modified data along with their textbox id.
8.UpdateGrid function will call RaiseCallbackEvent(string eventArgument) on server side.
Reffer step 3 where we have defined RaiseCallbackEvent(string eventArgument) and GetCallbackResult(). In step 3 we will observe
Reffer step 3 where we have defined RaiseCallbackEvent(string eventArgument) and GetCallbackResult(). In step 3 we will observe
if (args[0] == "updateTable") updateTable(args[1]); also observer last 3-4 lines of step 7
On server side updateTable is a function; which is responsible for updateing the Datatable. The function will be as follows.
In step 7 we have seen the javascript function JSUpdateTable()
And how we are sending updated data in the format of string.
For further understanding lets assume that we are getting data to server side and
_data = “0_1_input|ABC~3_3_input|XYZ” , this is how we send data from client to
Now in above function just observe how we will manipulate _data. Here understanding of each step is important so for this we can check the demo code and debug it.
result = "SUCCESS"; result is a global string.
After updating DataTable on server side we will send result to client, and if result = "SUCCESS" we will come to know that datatable has been updated successfully.And how we are sending updated data in the format of string.
For further understanding lets assume that we are getting data to server side and
_data = “0_1_input|ABC~3_3_input|XYZ” , this is how we send data from client to
Now in above function just observe how we will manipulate _data. Here understanding of each step is important so for this we can check the demo code and debug it.
result = "SUCCESS"; result is a global string.
After this GetCallbackResult() function (ref. point 3) will send result string to client.
9.On client side we need one function which will automatically get called. In step one we have registered following function
(Please reffer my "Ajaxified Grid 1" articles if you are not getting what this function means)
ShowResult JavaScript function will get called automatically after this GetCallbackResult(), so now we will write this function.
Above function is used only remove editable cells, i.e. to remove textboxes and to indicate that the server data has been updated.
10.On page load bind the grid
For editing the grid some points need to be considered; we have discussed only about text box, in the same way we can go for dropdown list, Text Areas etc. Possibilities are many.
But while updating the grid if we are using pagging and sorting then to update the corresponding row in data table is a problem. In this case we will add one column in the data table in which corresponds to table row, so if we can sort the table and can still maintain the row number i.e [i] in row[i][j].And this column will be hidden so that we can use it for adding and deleting the the data also.
But while updating the grid if we are using pagging and sorting then to update the corresponding row in data table is a problem. In this case we will add one column in the data table in which corresponds to table row, so if we can sort the table and can still maintain the row number i.e [i] in row[i][j].And this column will be hidden so that we can use it for adding and deleting the the data also.
Monday, February 16, 2009
About JSON
JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. It is based on a subset of the JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999. JSON is a text format that is completely language independent but uses conventions that are familiar to programmers of the C-family of languages, including C, C++, C#, Java, JavaScript, Perl, Python, and many others. These properties make JSON an ideal data-interchange language.
JSON is built on two structures:
* A collection of name/value pairs. In various languages, this is realized as an object, record, struct, dictionary, hash table, keyed list, or associative array.
* An ordered list of values. In most languages, this is realized as an array, vector, list, or sequence.
Kindly click on following link for more information. I find JSON much more useful for Ajax operations since parsing is easy like an XML.
check it : http://json.org/
Subscribe to:
Posts (Atom)
