Technical Journey: February 2010

Monday, February 15, 2010

Wednesday, February 10, 2010

Dynamically add control in asp.net

Recently I have faced a problem when try to dynamically add controls in asp.net, like this,
In test.aspx page

<body>
    <form id="form1" runat="server">
    <div>
        <asp:PlaceHolder ID="PlaceHolder1" runat="server" >    </asp:PlaceHolder>

    </div>
    </form>
</body>

In test.aspx.cs
protected void Page_Load(object sender, EventArgs e)
{
Button btn = new Button();
btn.ID = "btnSave";
this.PlaceHolder1.Controls.Add(btn);
}

Problem:

It is working fine but when I press any button I mean any post back occur It disappears.
After search for a long time I got the proper solution, now I would like to share this with you.

Solution:
To avoid this problem one should dynamically load the controls during Page_Init because we may want to hook up our events with proper handler at an early stage.

protected void Page_Init(object sender, EventArgs e)
{
Button btn = new Button();
btn.ID = "btnSave";
btn.Click+=new EventHandler(btn_Click);
this.PlaceHolder1.Controls.Add(btn);
}

Some Tips:
In addition I have got more tips on it,

Control's Lify cycle:

1.Initialization
2.Load view state
3.Process postback data
4.Load
5.Send postback change notifications
6.Handle postback events
7.Prerender
8.Save state
9.Render
10.Dispose
11.Unload

You will get details from here:http://msdn.microsoft.com/en-us/library/aa719775%28VS.71%29.aspx

1.During Page_Init you cannot assign dynamic control property,because in Page_Init event Initialization happens before loadViewState in control's life cycle.The value assigned to the properties during Initialization will simply get overwritten by the ViewState values.

2.If you are expecting your ViewState to retain after the postback, always assign same ID to the dynamic control,if you use like this,

protected void Page_Init(object sender, EventArgs e)
{
TextBox t = new TextBox();
t.ID = Guid.NewGuid().ToString();
this.form1.Controls.Add(t);
}

It will not work. You should use same id or fixed id ,
like this, t.ID="txtName";

Original info:
http://geekswithblogs.net/shahed/archive/2008/06/26/123391.aspx

Tuesday, February 9, 2010

Use Master page <body> tag in Content page of asp.net

How to use the <body> onclick from content page in asp.net?

Master page is introducing from asp.net 2.0, this is the main layout page for whole application content page just inherit it.

So that,we get the <body> tag only in Master page,in content page there is no body tag. But I need to use this body tag from content page.

After search it I found a solution in asp.net forum. Original link: http://forums.asp.net/t/1062445.aspx

Sample:

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" Title="Test Page" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script type="text/javascript">

function ClearBox()
{
var divBoxID=document.getElementById('BoxDiv');
divBoxID.style.display='none';
}

document.body.onclick= ClearBox;

</script>

For more info pls visit:
http://msdn.microsoft.com/en-us/library/7a9d6h4f.aspx
http://forums.asp.net/t/1225951.aspx

Converting Single-File Web Forms Pages to Code-Behind Pages

Sometimes I face some problem with single web form(only aspx page no code behind page) page. I am used to work in code-behind page,so that I try to solve this problem in may way but at last I found the solution in msdn. So I want to share this portion of the article with you:

It might be that the only thing you want to do with a single-file Web Forms page in Visual Studio is to convert it to a code-behind Web Forms page. Using Visual Studio to convert a single-file page to a code-behind page automatically accomplishes the following:

1. Generates a code-behind class file for the page.
2. Adds the appropriate page directives to the page so it is linked with the code-behind file.

The conversion does not do the following:

a. Convert inline code to code in the class file.

To convert a single-file .aspx page to code-behind

1. Open an existing project, or create a new ASP.NET Web application.
2. On the Project menu, click Add Existing Item.
3. Browse to the .aspx page that you want to convert.
4. Click Open. Visual Studio will display the following message:

There is no class file in the project associated with the Web Form ''. Create a new class file now?
5. Click Yes. Visual Studio will create the code-behind file and link it to the .aspx page.
6. Click the Show All Files button in Solution Explorer, and expand the tree below your newly converted file to see the code-behind class file.
7. Open the new .aspx file.
8. In HTML view, inspect the file to make sure it contains an @ Page directive at the top that contains the CodeBehind attribute.
9. Inspect the file to make sure it contains an HTML

element within the HTML tags. If not, add <form> and </form> tags around your controls, and in the opening tag, set the runat = "server" attribute so it looks similar to the following:

<form id="Form1" method="post" runat="server">

10. If the file contains calls to COM components — for example, ADO code — add the AspCompat attribute to the Page directive in HTML view:

<%@ Page [...] AutoEventWireup="false" AspCompat="true" %>

If you do not have any calls to COM components, you do not need to add the AspCompat attribute.
11. Move your code out of the .aspx file and into the .aspx.vb or .aspx.cs file.
If you are working with a legacy file that contains ASP code, you must convert it to ASP.NET code before you can move it to the code-behind page. Converting to ASP.NET also will help you to take advantage of dynamic browser customization, state maintenance, and other features the ASP.NET server controls provide. For details, see Converting ASP to ASP.NET.
12. Save the form, compile the project, and view it in the browser.
13. Check for issues that appear in the Task List window, and resolve them.

For more info please visit:
http://msdn.microsoft.com/en-us/library/aa290385%28VS.71%29.aspx

Basic Idea on JSON

What is JSON?

JSON is a very lightweight data format based on a subset of the JavaScript syntax, namely array and object literals. JSON allows communicating with server in a standard way. JSON is used as communication notation instead of XML.

JSON objects are typed while XML data is typeless
1.JSON types: string, number, array, boolean,
2.XML data are all string

JSON stands for Javascript Object Notation which is a data structuring format that is extremely clean and lightweight. Even though JSON is native to javascript (as in, it can be turned into an object directly by javascript), it is quite easy to handle with other languages, making it an ideal replacement of XML when javascript is involved with the exchange of data (i.e. ajax).

var fruitColors =
{
"apple":"green",
"banana":"yellow",
"orange":"orange"
};

alert(fruitColors .apple); //outputs "green"
alert(fruitColors .orange); //outputs "orange"

The above code creates an javascript object bike with two properties apple and orange

JSON 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

JSON Object Notation
• A JSON object is an unordered set of name/value pairs
• A JSON object begins with { (left brace) and ends with } (right brace)
• Each name is followed by : (colon) and the name/value pairs are separated by , (comma)

For more info please visit:
http://msdn.microsoft.com/en-us/library/bb299886.aspx
http://www.json.org/
http://en.wikipedia.org/wiki/JSON

Monday, February 8, 2010

Problem using AJAX call in IE6 and IE7

IE6 & IE7 makes problem when use xmlhttprequest for ajax

At first time when I used core ajax using xmlhttprequest. Using this technique we sent parameter as querystring through the url,like this,

function GetEmailId()
{
var url="http://server.com/test.aspx";
url=url+"&sid=test";
xmlhttp.onreadystatechange=statechangedLogin;
xmlhttp.open("GET", url, true);
xmlhttp.send(null);
}
function statechangedLogin()
{
if(xmlhttp.readyState==4)
{
if(xmlhttp.responseText=="Login")
{
//write your code
}
}
}

For the first time it is working fine,but when you try to second time in the same browser(IE6) its not work.

This is becuse Internet Explorer will also cache dynamic pages and this is a problem because the URL of the page may not change but the content will.A workaround for this situation can be achieved by adding a unique time stamp or random number, or possibly both, typically using the Date object and/or Math.random() such as url=url+"&sid=test"+Math.random();.

As for example:

function GetEmailId()
{
var url="http://server.com/test.aspx";
url=url+"&sid=test"+Math.random();
xmlhttp.onreadystatechange=statechangedLogin;
xmlhttp.open("GET", url, true);
xmlhttp.send(null);
}

For simple document request the query string delimiter '?' can be used, or for existing queries a final sub-query can be added after a final '&' – to append the unique query term to the existing query. The downside is that each such request will fill up the cache with useless (never reused) content that could otherwise be used for other cached content (more useful data will be purged from cache to make room for these one-time responses).

A better workaround can be achieved by adding meta tags to dynamic pages in order to make them no-cachable:

<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />

For more info please visit:
http://en.wikibooks.org/wiki/JavaScript/XMLHttpRequest
http://blogs.msdn.com/ie/archive/2006/01/23/516393.aspx
http://stackoverflow.com/questions/1229821/problem-using-ajax-call-in-ie6-and-ie7-i-am-asking-the-same-question-again-ca

scrollTop not work in IE6

scrollTop problem in IE6
I face a lots of problem ie6.Now I want to share one with you and how to solve it.
Hope that it may helps you.
divObj.scrollTop=0 moves to top of the div but it is not working in IE6.

To solve this you can use:

divObj.scrollTop = divBody.offsetTop; //for scroll to top of the div
divObj.scrollHeight = divBody.offsetHeight; //for scroll to bottom of the div

for more info please visit:
http://radio.javaranch.com/pascarello/2005/12/14/1134573598403.html

Technical Journey